📌 Formatting, Linting 사용하는 이유

• 코드를 짜는 도중에 빠르게 피드백을 줌으로써 올바른 코딩을 하는 데 도움을 줌

• 여러 사람이 코드를 관리할 때, 코드를 깔끔하게 관리하는 데 도움을 줌

---

🟢 Formatting : Prettier

설치

npm install --save-dev prettier

⭐ vscode의 "Prettier - Code formatter" 플러그인을 반드시 설치해야함

설정

.prettierrc 파일 생성

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

.vscode 폴더 밑에 settings.json 파일 생성

• 해당 프로젝트에만 적용되는 설정들을 모아둔 곳

{
  "[javascript]" : {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

---

🟢 Linting: ESLint

설치

npm install --save-dev eslint

설정

.eslintrc.js 파일 생성

module.exports = {}

eslint에 정의된 rule들을 하나하나 다 가져와서 기재할 수 있지만,
이미 많은 rule들을 한꺼번에 다 정의해서 best practice에 맞게 정리해둔 플러그인들이 많이 있기 때문에 그것들을 쓰면 편리하다.

👉 airbnb/javascript

패키지 하나와 이 패키지가 필요로 하는 plugin-import 설치

npm install --save-dev eslint-config-airbnb-base eslint-plugin-import

.eslintrc.js 파일에 extends: ['airbnb-base'] 추가

module.exports = {
  extends: ['airbnb-base'],
}

prettier와 eslint의 충돌을 해결하기 위해서 eslint-config-prettier 설치

npm install --save-dev eslint-config-prettier

.eslintrc.js 파일 extends: ['airbnb-base']에 'prettier' 추가

module.exports = {
  extends: ['airbnb-base', 'prettier'],
}

⭐ prettier eslint plugin이 제대로 동작하려면 항상 마지막에 와야함

다음 줄 부터 모든 eslint 에러 무시

다음 줄 부터 eslint 에러 중 no-console 무시

node 전용 플러그인 설치

npm install --save-dev eslint-plugin-node

.eslintrc.js 파일 extends: ['airbnb-base']에 'plugin:node/recommended' 추가

module.exports = {
  extends: ['airbnb-base', 'plugin:node/recommended', 'prettier'],
}

---

🟢 TypeScript : Type checking

📌 JavaScript는 동적으로 type이 정의되는 언어

• 따라서 컴파일 과정을 거치지 않기 때문에 변수가 어떤 type으로 활용될 지 미리 알 수 없음 ( 에러X )
  👉 type checking을 해주어야 함

설치

npm install --save-dev typescript

사용

js 파일 맨 위에

// @ts-check

넣어주면 사용 가능

TypeScript가 Node 환경에서도 동작하게 하려면

@types/node

위 패키지를 설치해야 한다.
node에서 주로 사용되는 객체들에 대한 type 정보들이 들어 있다.

설정

자바스크립트 프로젝트를 진행하면서 TypeScript의 Type checking의 도움만 받을 것이기 때문에

jsconfig.json 파일 생성

{
  "compilerOptions": {
    "strict": true	// 엄격하게 검사하도록 함
  },
  "include": [
    "src/**/*"
  ]
}

👉 jsconfig.json reference

---

📄 VSCode JavaScript Development Setup

	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