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


파일 내, 다른 파일 또는 클립보드에서 선택된 텍스트를 비교해 주는 확장입니다.


링크 : https://marketplace.visualstudio.com/items?itemName=ryu1kn.partial-diff





명령어

  • Select Text for Compare - 선택한 텍스트를 다음 선택 항목과 비교할 텍스트로 표시합니다.

  • Compare Text with Previous Selection - 선택한 텍스트를 첫 번째 선택 항목과 비교합니다.

  • Compare Text with Clipboard - 현재 클립 보드를 선택한 텍스트와 비교합니다.

  • Compare Text in Visible Editors - 두개의 보이는 에디터의 텍스트를 비교합니다.

  • Toggle Pre-Comparison Text Normalization Rules - 사전 비교 텍스트 정규화 규칙을 토글합니다.

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


프로젝트간에 쉽게 전환할 수 있게 도와주는 확장입니다.


링크 : https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager




제공

  • 어떤 프로젝트라도 즐겨찾기로 저장
  • VSCode, Git, Mercurial or SVN repositiories 자동 검색
  • 동일한 창이나 새 창에서 프로젝트 열기
  • 삭제되거나 이름 변경된 프로젝트 식별
  • 현재 프로젝트를 식별하는 상태바 표시
  • 전용 Activity Bar

명령어

  • Project Manager: Save Project 현재 폴더를 새 프로젝트로 저장
  • Project Manager: Edit Project 수동으로 프로젝트 수정 ( projects.json)
  • Project Manager: List Projects to Open 저장/감지된 모든 프로젝트를 나열하고 하나를 선택 - 현재창 열기
  • Project Manager: List Projects to Open in New Window 저장/감지된 프로젝트를 모두 나열하고 하나를 선택 - 새창 열기
  • Project Manager: Refresh Projects 캐시된 프로젝트 새로고침

프로젝트 저장


프로젝트 수정

[
    {
        "name": "Pascal MI",
        "rootPath": "c:\\PascalProjects\\pascal-menu-insight",
        "paths": [],
        "group": ""
    },
    {
        "name": "Bookmarks",
        "rootPath": "$home\\Documents\\GitHub\\vscode-bookmarks",
        "paths": [],
        "group": ""
    },
    {
        "name": "Numbered Bookmarks",
        "rootPath": "$home\\Documents\\GitHub\\vscode-numbered-bookmarks",
        "paths": [],
        "group": ""
    }
]


상태바에 프로젝트명 표시


액티브 바


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


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







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"

    }

}


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

+ Recent posts