자바스크립트 개발환경 설정

스크립트/JavaScript 2021. 6. 30. 19:02

■ Visual Studio Code
(1) 다운로드
윈도우) https://code.visualstudio.com/
맥) brew install --cask visual-studio-code

(2) Extensions 확장프로그램 설치
HTML CSS Support
HTML Snippets
JavaScript (ES6) code snippets
Live Server
Open In Default Browser

■ VS Code's User Snippet 설정
File > Preferences > User Snippets
html 이라고 검색하여 나오는 결과인 html(HTML)을 선택하면 html.json 문서가 열림
해당 문서 안에 스니핏 틀을 만들어두면 prefix의 이름으로 언제든 스니핏을 불러올 수 있음

{
    // Place your snippets for html here. Each snippet is defined under a snippet name and has a prefix, body and 
    // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
    // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
    // same ids are connected.
    // Example:
    // "Print to console": {
    //     "prefix": "log",
    //     "body": [
    //         "console.log('$1');",
    //         "$2"
    //     ],
    //     "description": "Log output to console"
    // }

    "Generate HTML Basic Structure": {
        "prefix": "html-basic",
        "body": [
            "<!DOCTYPE html>\n<html>\n<head>\n\t<title>Document</title>\n</head>\n<body>\n</body>\n</html>"
        ],
        "description": "Generate HTML Basic Structure"
    }
}