VSCode = Visual Studio Code 에서 사용할 수 있는 확장(Extension) 입니다.


git log 보기, 파일 히스토리, 브랜치와 커밋을 비교 할 수 있는 확장입니다.


링크 : https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory



Git History, Search and More

  • 그래프 및 세부 정보와 함께 git log 를 보고 검색합니다.
  • 파일의 이전 사본을 봅니다.
  • 히스토리 보기 및 검색
    • 하나 또는 모든 브랜치의 히소트로 보기
    • 파일의 히소트로 보기
    • 파일안의 행(line) 히스토리 보기
    • 작성자의 히소트로 보기
  • 비교:
    • 브랜치 비교
    • 커밋 비교
    • 커밋간의 파일 비교
  • Miscellaneous features:
    • Github avatars
    • Cherry-picking commits
    • Reverting commits
    • Create branches from a commits
    • View commit information in a treeview (snapshot of all changes)
    • Merge and rebase


참고 : 기록을 볼 파일은 이미 열려 있어야 합니다.







'GIT' 카테고리의 다른 글

GitLens - Git 저장소 탐색  (0) 2018.11.19
Git Project Manager - Git 프로젝트 관리  (0) 2018.11.19
Setting Sync - GitHub Gist 를 통한 설정등 동기화  (0) 2018.11.16
gi - .gitignore 파일 쉽게 만들기  (0) 2018.09.04
Git Indicators - 상태바에 git counters 표시  (0) 2018.09.01

VSCode = Visual Studio Code 에서 사용할 수 있는 확장(Extension) 입니다.


C, C++, Java, JS, PHP, Python, Perl, Ruby, Go, Lua, Groovy, PowerShell, CMD, BASH, F#, C#, VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml, R, AppleScript, Elixir, VB.NET, Clojure, Haxe, Objective-C, Rust, Racket, AutoHotkey, AutoIt, Kotlin, Dart, Pascal, Haskell, Nim, D 언어에 대해 실행해 주는 확장입니다.


링크 : https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner



실행

단축키 : Ctrl + Alt + N


실행중지

단축키 : Ctrl + Alt + M



언어를 선택해서 실행할 경우

Ctrl + Alt + J 를 누른 다음 언어를 입력하거나 선택하시면 됩니다.


구성

각 언어의 실행 프로그램 PATH가 환경 변수에 설정되어 있거나 code-runner.executorMap 에 설정되어 있어야 합니다.

{

    "code-runner.executorMap": {

        "javascript": "node",

        "php": "C:\\php\\php.exe",

        "python": "python",

        "perl": "perl",

        "ruby": "C:\\Ruby23-x64\\bin\\ruby.exe",

        "go": "go run",

        "html": "\"C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe\"",

        "java": "cd $dir && javac $fileName && java $fileNameWithoutExt",

        "c": "cd $dir && gcc $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt"

    }

}


저작자표시

'생산성' 카테고리의 다른 글

Prettier - Code formatter  (0) 2018.11.27
Comment Anchors - 앵커 태그 배치  (0) 2018.09.28
Bracket Pair Colorizer - 괄호 색상을 단계별로 표시  (0) 2018.09.19
Path Intellisense - 디렉토리 / 파일명 자동완성  (0) 2018.09.12
Indenticator - 들여쓰기를 시각적으로 강조  (0) 2018.09.08

VSCode = Visual Studio Code 에서 사용할 수 있는 확장(Extension) 입니다.


JavaScript 및 TypeScript 용 ES6 구문의 JavaScript 코드 스니펫 확장입니다.


링크 : https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets




지원 언어(파일 확장자)

  • JavaScript (.js)
  • TypeScript (.ts)
  • JavaScript React (.jsx)
  • TypeScript React (.tsx)
  • Html (.html)
  • Vue (.vue)


Import and export

TriggerContent
imp→imports entire module import fs from 'fs';
imn→imports entire module without module name import 'animate.css'
imd→imports only a portion of the module using destructing import {rename} from 'fs';
ime→imports everything as alias from the module import * as localAlias from 'fs';
ima→imports only a portion of the module as alias import { rename as localRename } from 'fs';
rqr→require package require('');
mde→default module.exports module.exports = {};
enf→exports name function export const log = (parameter) => { console.log(parameter);};
edf→exports default function export default (parameter) => { console.log(parameter);};
ecl→exports default class export default class Calculator { };
ece→exports default class by extending a base one export default class Calculator extends BaseClass { };


Class Helpers

TriggerContent
con→adds default constructor in the class constructor() {}
met→creates a method inside a class add() {}
pge→creates a getter property get propertyName() {return value;}
pse→creates a setter property set propertyName(value) {}


Various methods

TriggerContent
fre→forEach loop in ES6 syntax array.forEach(currentItem => {})
fof→for ... of loop for(const item of object) {}
fin→for ... in loop for(const item in object) {}
anfn→creates an anonymous function (params) => {}
nfn→creates a named function const add = (params) => {}
dob→destructing object syntax const {rename} = fs
dar→destructing array syntax const [first, second] = [1,2]
sti→set interval helper method setInterval(() => {});
sto→set timeout helper method setTimeout(() => {});
prom→creates a new Promise return new Promise((resolve, reject) => {});
thenc→adds then and catch declaration to a promise .then((res) => {).catch((err) => {});


Console methods

TriggerContent
cas→console alert method console.assert(expression, object)
ccl→console clear console.clear()
cco→console count console.count(label)
cdi→console dir console.dir
cer→console error console.error(object)
cgr→console group console.group(label)
cge→console groupEnd console.groupEnd()
clg→console log console.log(object)
clo→console log object with name console.log('object :', object);
ctr→console trace console.trace(object)
cwa→console warn console.warn
cin→console info console.info
clt→console table console.table


저작자표시

'언어 > Script' 카테고리의 다른 글

Node Debug - Node.js 디버그  (0) 2018.12.06
npm Intellisense - npm 자동 완성  (1) 2018.11.15
npm - VSCode 에서 npm 지원  (0) 2018.11.15

VSCode = Visual Studio Code 에서 사용할 수 있는 확장(Extension) 입니다.


작업 공간에 있는 정의를 기반으로 HTML Class 속성에 대한 CSS Class 이름을 자동 완성해 줍니다.


링크 : https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion




지원 언어 모드

  • HTML
  • Razor
  • PHP
  • Laravel (Blade)
  • JavaScript
  • JavaScript React (.jsx)
  • TypeScript React (.tsx)
  • Vue (.vue) [requires octref.vetur]
  • Twig
  • Markdown (.md)
  • Embedded Ruby (.html.erb) [requires rebornix.Ruby]
  • Handlebars
  • EJS (.ejs)


저작자표시

'언어 > CSS & HTML' 카테고리의 다른 글

Highlight Matching Tag - 매칭되는 태그 강조  (0) 2019.01.24
Minify - JS, CSS, HTML 파일 축소  (0) 2018.11.14
HTMLHint - HTML 코드 분석  (0) 2018.10.06
Bootstrap v4 Snippets - 부트 스트랩 스니펫  (0) 2018.10.01
Font Awesome Autocomplete - 폰트 어썸 자동완성  (0) 2018.10.01

VSCode = Visual Studio Code 에서 사용할 수 있는 확장(Extension) 입니다.


HTML을 위한 정적 코드 분석 도구입니다.


링크 : https://marketplace.visualstudio.com/items?itemName=mkaufman.HTMLHint




HTMLHint 확장은 열려 있는 HTML 파일에서 HTMLHint를 실행하고 오류와 문제의 수를 상태바에 표시해줍니다.

문제 패널에서 세부 정보를 함께 볼 수 있습니다.


HTML 파일의 오류는 강조표시되며 마우스 오버시 오류 메시지가 표시됩니다.


사용

로컬 프로젝트 폴더에 버젼을 설치

npm install --save-dev htmlhint


전역 설치

npm install --global htmlhint

저작자표시

'언어 > CSS & HTML' 카테고리의 다른 글

Minify - JS, CSS, HTML 파일 축소  (0) 2018.11.14
IntelliSense for CSS class names in HTML - CSS Class 자동 완성  (0) 2018.10.07
Bootstrap v4 Snippets - 부트 스트랩 스니펫  (0) 2018.10.01
Font Awesome Autocomplete - 폰트 어썸 자동완성  (0) 2018.10.01
CSS Peek - id 및 class 가 정의된 CSS 보기  (0) 2018.08.31

+ Recent posts

티스토리툴바