VSCode Javascript 개발 환경 (Prettier, ESLint, Typescript)

Javascript 개발 환경을 세팅할 때, 유용한 툴들을 이용하면 코드 에러를 방지하고, 코딩스타일을 일관되게 맞출 수 있다.

	Formatting	Linting	Type checking
Package	prettier	ESLint	Typescript
additional dependencies		eslint-config-airbnb-base eslint-config-prettier eslint-plugin-import eslint-plugin-node	@types/node
config file	.prettierrc	.eslintrc.js	jsconfig.json
vscode extensions	O	O	X

1. Formatting - Prettier

협업을 할 때 프로젝트 코딩 스타일이 제각각이면 보기가 불편하다. 가독성과 유지보수를 위해서는 팀원들과 약속한 코딩스타일을 따르는 것이 좋다.

자바스크립트의 코딩스타일을 도와주는 툴로 Prettier가 있다. Prettier 을 설치한 후 원하는 코딩 스타일을 config 파일에 작성하면 프로젝트의 코드를 일관된 스타일로 유지할 수 있다.

VSCode 에서 설치 방법:

1. VSCode extensions 설치

Extenstons (ctrl+shift+X)에 들어가서 prettier 검색 & 설치

2. npm install

npm install --save-dev prettier

3. config file 설정

.prettierrc 파일을 생성하여 rule을 작성한다.
ex)

{
    "semi": false,
    "singleQuote": true
}

2. Linting - ESLint

1. VSCode extensions 설치

Extenstons (ctrl+shift+X)에 들어가서 esling 검색 & 설치

2. npm install

npm install --save-dev eslint

3. 추가적으로 필요한 패키지 설치

1. eslint-config-airbnb-base
   javascript 개발자들이 많이 사용하는 airbnb에서 만든 eslint 설정이라고 한다.
2. eslint-config-prettier
   prettier이랑 같이 사용하면 코드가 바뀌면서 eslint에서 오류 경고를 띄워서 꼭 필요한 패키지이다.
3. eslint-plugin-import
4. eslint-plugin-node

3. Typecript

자바스크립트는 동적으로 type이 정의되므로 코드를 실행했을 때 에러를 알게된다. 다른 언어처럼 컴파일 과정이 없다. 코드를 작성하는 과정에서 미리 type checking 이 이루어지는 Typescript 언어를 사용하여 해결할 수 있다.

Typescript는 자바스크립트로 변환되는 언어로 실행가능한 언어는 아니다.

npm install

npm install --save-dev typescript

사용방법

파일 제일 첫번째 줄에 // @ts-check 삽입

@types/node 패키지

node에서 주로 사용되는 객체에 대한 type 정보가 담겨있다.

모두 설치한 packages.json 결과

{
"scripts": {
  "test": "echo \"Error: no test specified\"",
  "lint": "eslint --ext .js --ignore-path .gitignore ."
},
"devDependencies": {
  "@types/node": "^16.10.3",
  "eslint": "^7.32.0",
  "eslint-config-airbnb-base": "^14.2.1",
  "eslint-config-prettier": "^8.3.0",
  "eslint-plugin-import": "^2.24.2",
  "eslint-plugin-node": "^11.1.0",
  "prettier": "^2.4.1",
  "typescript": "^4.4.3"
}
}