자주 쓰는 VS Code Extenstions

Prettier - Code formatter

코드를 보기 편하게 정돈해줌

Setting(ctrl + , 또는 cmd + ,)에서 설정하거나 프로젝트 별로 package.json이나 .prettierrc에서 세부 옵션 설정 가능

"editor.formatOnSave": true 로 설정해놓으면 더 편하게 사용할 수 있음

// .prettierrc 또는 package.json의 "prettier": {}
{
  "printWidth": 100,
  "singleQuote": true,
  "trailingComma": "all",
  "bracketSpacing": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "jsxBracketSameLine": false
}

ESLint

코딩 컨벤션에 맞지 않는 부분이나 안티 패턴을 찾아줌

.eslintrc.js에서 세부 옵션 설정 가능

// .eslintrc.js
module.exports = {
  root: true,
  parserOptions: {
    parser: "babel-eslint",
    ecmaVersion: 6,
    sourceType: "module",
    ecmaFeatures: {
      impliedStrict: true
    }
  },
  env: {
    browser: true,
    node: true,
    es6: true
  },
  extends: ["airbnb-base", "prettier"],
  globals: {
    __static: true
  },
  plugins: ["html", "import", "prettier"],
  rules: {
    "no-console": "off",
  }
};

• 참고 블로그: https://poiemaweb.com/eslint

GitLens — Git supercharged

Git history 탐색

Git Graph

Git 커밋 내역과 브랜치를 시각적으로 보여줌

TODO Highlight

TODO, FIXME 등의 주석에 하이라이트

Rainbow Brackets

같은 쌍의 괄호를 같은 색으로

npm Intellisense

import 할 때 npm modules 자동 완성

Live Server

개발용 서버 띄워줌

단축키: alt+L, alt+C

Document This

JSDoc 자동 생성 (JS, TS 둘 다 지원)

Project Manager

프로젝트 폴더에 빠르게 접근

Code Spell Checker

오타 잡아줌

Bookmarks

코드 북마크

IntelliSense for CSS class names in HTML

HTML에서 CSS Class name 자동 완성

CSS Peek

HTML에서 class의 style 바로 확인

Alt + click 해서 확인

Auto Close Tag

HTML 닫는 태그 자동 완성

Auto Rename Tag

HTML 여는 태그와 닫는 태그 동시에 수정

Markdown All in One

마크다운 작성을 편리하게 해줌(단축키 등)

Markdown Preview Github Styling

마크다운 문서 미리보기

Material Icon Theme

아이콘 테마