VS Code 주요 확장 소개

Auto Rename Tag

• 하나의 태그를 수정하면 짝이 되는 태그도 동시에 수정된다.

Bracket Pair Colorizer 2

• 괄호 쌍들이 서로 같은 색상으로 보이도록 설정한다.

BetterComments

• 주석을 조금 더 보기 좋게 만들어 준다.
• 주석 앞에 *(중요), !(경고), ?(물음), TODO(할일), @param(파라미터) 등을 입력할 수 있다.
• 함수를 생성한 후에 /**/을 입력하고 엔터를 누르면 파라미터가 자동으로 생성된다.

ESLint

• 자바스크립트 용 Linter
• Linter는 소스코드를 분석해 정해진 규칙을 체크한다.

설정방법

1. 확장에서 eslint 설치
2. 터미널에서 npm install -g eslint 입력
3. 터미널에서 npm init 입력
4. 터미널에서 eslint --init 입력
5. 스타일에서 air-bnb 선택

주의사항

• .eslintrc.js에서 다음을 추가해야 한다.

module.exports = {
  "extends": "airbnb-base",
  rules: {
    'linebreak-style': 0
  }
};

EditorConfig for VS Code

• 특정 프로젝트에서 VS Code 설정정보를 구성하여 다른 사람들도 같은 환경에서 작업할 수 있도록 해준다.

gitignore

• .gitignore 파일을 프로젝트 환경에 맞게 자동으로 생성해준다. 또한 작업중인 파일을 바로 .gitignore에 추가할 수 있다.

Git History

• Git 로그를 시각적으로 보기 좋게 만들어준다.
• 로그 보기 뿐만 아니라 다양한 기능을 제공한다.
• 주로 로그를 보기위해 사용하고 Git에 관한 다양한 기능은 GitLens에서 주로 사용한다.

GitLens

• Git을 사용함에 있어서 시각적으로 고급화된 기능을 제공한다.

indent-rainbow

• 코드 들여쓰기 단계에 따라서 들여쓰기 공간 색을 다르게 하여 한결 코드를 읽기 편하게 해준다.

Import Cost

• import 또는 require 대상 패키지의 용량이 코드 옆에 표시된다.

Korean Language Pack for Visual Studio Code

• VS Code 언어를 한국어로 변경

npm

• package.json 파일을 확인하여 설치된 패키지들의 유효성을 검사한다.
• 파일 내에 종속성이 선언되어 있지 않은 경우 등의 확인을 해준다.

npm intellisense

• npm module을 import에 작성할 때 설치된 모듈을 기준으로 자동완성을 제공한다.

Path Intellisense

• 코드 작성시 Path를 작성할 때 현재 경로를 인식하고 자동완성을 추천해준다.
• 예를 들면, ./까지 타이핑하면 현재 폴더 내의 파일 및 폴더를 자동완성해준다.

Prettier - Code formatter

• 코드 포맷터
• 코드를 해석하여 규칙에 맞게 만든다.
• 설정에서 Format on Save를 체크하면 소스코드 저장 시 자동으로 포맷을 맞춰준다.
• prettier.require를 체크하여 로컬 구성 파일을 참조하도록 하는 것이 좋다.

Relative Path

• 프로젝트의 전체 파일 중 원하는 파일을 검색해 선택하면 작업 중인 파일에서 상대경로로 입력해준다.

Rest Client

• VS Code 내에 .http 파일을 생성해서 postman과 같이 http 요청을 테스트 해 볼 수 있다.

Settings Sync

• VS Code 설정 (확장 플러그인 포함) 동기화 도구
• 업로드 키: shift + alt + u
• 다운로드 키: shift + alt + d

TODO Highlight

• 주석으로 TODO:, FIXME: 구문 작성 시 하이라이트 해준다.

Turbo Console Log

• 변수를 선택한 후에 ctrl + alt + l을 누르면 해당 변수를 출력하는 콘솔 로그 코드가 자동으로 생성된다.

TypeScript Toolbox

• 타입스크립와 관련한 다양한 도구를 제공함
• 빠진 모듈을 자동으로 import 해준다.
• 사용하는 모듈만 import 하도록 코드를 작성해준다.
• 자동으로 클래스 생성자를 만들어준다.
• 클래스에서 getter와 setter를 만들어준다.

vscode-icons

• MS에서 만든 VS Code를 위한 아이콘 집합

Material Icon Theme

• VS Code를 위한 마테리얼 디자인 아이콘 집합
• 가장 많이 사용되는 아이콘 집합

Material Theme

• VS Code를 위한 화려한 테마를 제공한다.

markdownlint

• 마크다운 파일에 대한 린트 기능을 제공한다.

Markdown All in One

• 마크다운에 필요한 모든 기능이 있다.