DevelopTips

VSCode 설정

VSCode, VisualStudio Code, coding, develop, javascript

Setting

목차

  • VS CODE에서 자바스크립트 즉석 실행하기 ( Extention 설치 )
  • VS CODE , 전역 Setting 하기 ( settings.json 파일 수정 )
  • Fira Code 추가하기
  • VSCode 환경설정 동기화


VS CODE에서 자바스크립트 즉석 실행하기 ( Extention 설치 )

  • Code.Runner : 브라우저 나 노드에서 굳이 사용하지 않고 js파일을 실행할수있다. ctrl + option + n

    (단, 코드러너는 노드환경에서 실행되기 때문에 DOMAPI등은 못읽는다.)

  • Quokka.js 시작 : cmd + shift + p - quokka.js : start on current file

    Quokka.js 종료 : stop all (current)


VS CODE , 전역 Setting 하기 ( settings.json 파일 수정 )

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
{
  "editor.tabSize": 2,
  // Fira code
  "editor.fontFamily": "'Fira Code'",
  "editor.fontLigatures": true,
  // "editor.fontWeight": "normal",
  // "editor.fontWeight": "bold",
  // "editor.formatOnPaste": true,
  "editor.scrollBeyondLastLine": false,
  // Theme
  "workbench.colorTheme": "Atom One Light",
  "workbench.iconTheme": "material-icon-theme",
  // LiveServer
  "liveServer.settings.port": 0,
  "liveServer.settings.donotShowInfoMsg": true,
  "liveServer.settings.donotVerifyTags": true,
  "emmet.variables":  {
    "lang": "ko"
  },
  "files.exclude": {
    "**/.git": false
  },
  "files.trimTrailingWhitespace": true,
  "window.zoomLevel": 1,
  "material-icon-theme.showUpdateMessage": false,
  // ESLINT
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "html"
  ],
  "breadcrumbs.enabled": true,
  // DOM 기반 terminal
  "terminal.integrated.rendererType": "dom",
  "workbench.fontAliasing": "antialiased",
  "editor.multiCursorModifier": "alt",
  // Type Safe JavaScript with JSDoc
  // "javascript.implicitProjectConfig.checkJs": true,
  "editor.minimap.enabled": false,
  "editor.suggestSelection": "first",
  "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
  "C_Cpp.updateChannel": "Insiders",
  "vsicons.projectDetection.disableDetect": true,
  "vsicons.dontShowNewVersionMessage": true
}

Fira Code 추가하기

  1. 구글 폰트 접속
  2. Fira Code 검색
  3. 다운로드
  4. 압축해제
  5. Fira Code 폴더 -> static -> 모든 .ttf 서체 더블클릭해서 추가(Mac 기준)

Fira Code

적용시 화면


VSCode 환경설정 동기화

VSCode 환경설정 동기화하기

Share