eslint(airbnb) + prettier + jest + typescript

미뤄왔던 개발 환경 설정을 한꺼번에 정리해보자

Eslint vs Prettier

• eslint : 코드의 퀄리티를 보장해주는 린터.
• prettier : 코드의 스타일을 깔끔하게 통일시켜주는 린터.
• 우리는 코드의 퀄리티와 스타일을 동시에 가져가기위해 eslint + prettier을 함께 사용한다.

😀 eslint 설정

1. vscode에 ESLint라는 익스텐션을 깔아준다.
2. npm install --save-dev eslint
3. AirBNB 모듈 다운로드

npm install --save-dev 
eslint-config-airbnb-base 
eslint-config-airbnb-typescript

4. Eslint와 관련된 Typescript 모듈 다운로드

npm install --save-dev 
@typescript-eslint/eslint-plugin
@typescript-eslint/parser

5. .eslintrc 파일(JSON)을 최상위에 만들어준다

// .eslintrc 

{
  "env": {
    "browser": true,
    "es2021": true,
    "jest": true // jest 사용
  },
  // extends는 eslint-config-prettier로 eslint와 충돌부분을 비활성화
  "extends": ["plugin:@typescript-eslint/recommended", "airbnb-base", "airbnb-typescript/base", "prettier"],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module",
    "project": "./tsconfig.json"
  },
  // plugins eslint-plugin-prettier로 prettier을 적용
  "plugins": ["@typescript-eslint", "prettier"],
  "rules": {},
  "ignorePatterns": ["./tsconfig.json", "./jest.config.json", ".eslintrc"]
}

😀 prettier 설정

1. npm install --save-dev eslint-config-prettier eslint-plugin-prettier
2. prettier는 eslint에 종속적으로 사용하여, .eslintrc 파일의 extends, plugins에 명시해준다

여기서 extends와 plugins의 차이점을 보자면
extends는 airbnb나 google같은 외부기관의 eslint룰을 가져오는것이고 eslint-config-XXX에 해당,
plugins는 react나 typescript 같은 부가적인 기능들에 대한 내용이고 eslint-plugin-XXX에 해당

😀 Jest

1. jest 관련 모듈 다운로드

npm install --save-dev
jest
@types/jest
eslint-plugin-jest
ts-jest

npm install @jest/globals

2. jest.config.json 생성

// jest.config.json

{
  "preset": "ts-jest",
  "testEnvironment": "node"
}

😀 Typescript

1. npm install --save-dev typesciprt
2. tsconfig.json 생성

//tsconfig.json 

{
  "compilerOptions": {
    "target": "ES2015",
    "module": "ES2015",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "sourceMap": true,
    "allowJs": false,
    "strict": true,
    "outDir": "dist",
    "esModuleInterop": true
  },
  "ts-node": {
    "files": true
  },

  "include": ["src/**/*.ts"],
  "exclude": ["node_modules"]
}

😀 Package.json

{
	...
    
    "scripts": {
    	"eslint": "eslint --fix src",
    	"test": "jest"
  	},
    
    ...
}

마지막으로 vscode에서 설정하기

https://daewoongkim.com/blog/vs-code-lint-automatically-on-save/

적용된 레포

https://github.com/aptakqmf12/twdash

참고 (2023.09.09추가)

https://velog.io/@limelimejiwon/ReactViteESLintPrettier-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0

https://velog.io/@2wndrhs/%EC%95%8C%EC%95%84%EB%91%90%EB%A9%B4-%EC%93%B8%EB%8D%B0%EC%9E%88%EB%8A%94-ESLint-Prettier-%EC%84%A4%EC%A0%95-%EB%B0%A9%EB%B2%95