[VS CODE] VS CODE 기본 세팅 및 확장 프로그램 설치 리스트

VS CODE를 사용하면서 유용한 확장 프로그램을 아래와 같이 정리 하려고 한다.

※추후 다시 세팅을 하기 위한 메모

 

[ VS CODE 설치 링크 ]

https://code.visualstudio.com/

 

[ 확장 프로그램 ]

auto rename tag : 여는 태그 변경 시 닫는 태그도 변경됨
community material Theme : VS CODE 테마 추가
ES7 React/Redux/GraphQL/React-Natvie snippets : React할 때 컴포넌트 만들 때 자동으로 만들어짐
ES7 + React/Redux/React-Native snippets : React할 때 컴포넌트 만들 때 자동으로 만들어짐
ESLint : Javascript 잘못 쓸 때 수정 시켜 줌
html tag wrapper : 드래그 후 (컨트롤 + i) 누르면 div로 감싸짐. (auto rename tag와 같이 사용하면 좋음)
indent - rainbow : 들여쓰기 태그 열고 닫고 하는 걸 색상별로 정렬 되어있음.
Material Theme : VS code 테마
Material Theme Icons : VS code 테마 아이콘
Prettier - Code formatter : 코드 이쁘게 정리 하는 것
Tailwind CSS IntelliSense : react 할 때 class 및 코드화 시켜서 바로바로 사용 할 수 있게 쓰는것
vscode-icon : VS code 테마 아이콘
vscdoe-styled-components : react 할때 자동완성 쓸 수 있다.
Live Server : vs code 아래 go Live 생겨서 바로 볼 수 있음 

 

[VS Code] 확장 프로그램 설치 이후 Setting.json 

{
  "editor.wordWrap": "on",
  "editor.fontFamily": "D2Coding ligature",
  "editor.fontLigatures": true,
  "editor.mouseWheelZoom": true,
  "editor.lineNumbers": "on",
  "editor.minimap.enabled": false,
  "editor.colorDecorators": true,
  "editor.codeLens": false,
  "liveServer.settings.donotShowInfoMsg": true,
  "workbench.iconTheme": "vscode-icons",
  "vsicons.dontShowNewVersionMessage": true,
  "liveServer.settings.CustomBrowser": "chrome",
  "liveServer.settings.donotVerifyTags": true,
  "editor.tabSize": 2,
  "prettier.tabWidth": 2,
  "prettier.useTabs": true,
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "javascript.updateImportsOnFileMove.enabled": "always",
  "prettier.vueIndentScriptAndStyle": true,
  "prettier.jsxSingleQuote": true,
  "prettier.singleQuote": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "prettier.quoteProps": "consistent",
  "editor.codeActionsOnSave": {},
  "editor.formatOnSave": true,
  "workbench.startupEditor": "none",
  "prettier.printWidth": 100,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "html",
    "vue",
    "css"
  ],
  "workbench.colorTheme": "Material Theme Palenight High Contrast",
  "window.zoomLevel": 1
}

[VS code] 사용하기 유용한 명령어 정리

GUI 늘리기 : Ctrl 누른 상태에서 + -

텍스트 늘리고 줄이기 : Ctrl + 마우스 휠

터미널 단축키 : Ctrl + `

[VS Code] HTML 입력 시 자동으로 여러개를 만들 수 있는 명령어 모음

html:5 - html5 기본 문법을 자동으로 생성 해줌

.CLASS명 - class명이 입력된 div 태그를 만들어준다.

#ID명 - ID명이 입력된 div 태그를 만들어준다.

.CLASS*숫자 - 숫자만큼 CLASS 태그를 넣어준다.

시멘틱태그 - 시멘틱 태그의 HTML 태그를 자동으로 만들어준다.

시멘틱태그>시멘틱태그 - 부모 시멘틱 태그 안에 자식 시멘틱 태그를 만들어준다.

A[href=''] - A태그의 href를 입력해서 태그를 만들어준다.

 

[VS Code] CMD를 이용한 Vs code 실행 (폴더 삽입 추가)

 

1. 폴더를 만들고 싶은 경로로 가서 폴더를 생성한다.

 mkdir 폴더명

2. 새로 생성된 폴더명으로 들어간다.

 cd 신규 생성 폴더명

3. 아래 명령어를 치면 해당 폴더가 열린 vs code가 열리게 된다.

 code .