Written by java-style
on 2021-10-07

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. 추가적으로 필요한 패키지 설치

eslint-config-airbnb-base

javascript 개발자들이 많이 사용하는 airbnb에서 만든 eslint 설정이라고 한다. eslint-config-prettier

prettier이랑 같이 사용하면 코드가 바뀌면서 eslint에서 오류 경고를 띄워서 꼭 필요한 패키지이다. eslint-plugin-import 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" } }

from http://whatsmyinterest.tistory.com/36 by ccl(A) rewrite - 2021-10-07 12:27:16

Top