[환경설정] ESLint for React, Test, Typescript, Prettier (단독 혹은 CRA, create-next-app과 함께 사용하기)

1. 개요

개발의 편리함을 위해 eslint와 prettier의 설치는 필수인데
매번 프로젝트 시작할때마다 복붙으로만 따라하고, 원하는대로 동작한 적이 없는것 같다.
그래서 이번주는 eslint + prettier의 설정 뽀개기!

• ESLint: 문법오류
• Prettier: 코드 포멧터(따옴표, indent 등)

2. eslint

1) 설치

기본 설치

https://eslint.org/docs/user-guide/getting-started

에디터 extension에서의 설치

에디터에서 설치하지 않아도 위의 기본 설치를 진행했다면
터미널에서 npx eslint . 명령을 실행하거나, build시에는 작동한다.
하지만 extension을 설치해야 에디터 내부에서 빨간 밑줄이나 에러 관련된 설명을 볼 수 있다.

Creat-React-App로 프로젝트를 생성하는 경우

https://create-react-app.dev/docs/setting-up-your-editor

If you prefer the lint results to appear right in your editor, please make sure you install an ESLint plugin/extension. (...) This is because Create React App intentionally provides a minimal set of rules that find common mistakes.

// CRA 설치 직후 package.json 내 eslintConfig
  "extends": [
    "react-app",
    "react-app/jest"
  ]

• 따로 설치 안해도 내부에 최소한의 설정이 있음
• extension 설치하지않으면 editor에 에러표시는 안됨

1. We highly recommend extending the base config, as removing it could introduce hard-to-find issues.
2. When working with TypeScript, you'll need to provide an overrides object for rules that should only target TypeScript files.
3. It's important to note that any rules that are set to "error" will stop the project from building.

• .eslintrc.XX 파일을 만들어서 설정을 대체할 수 있지만 CRA 에서는 package.json 내의 eslintConfig를 확장해서 쓸것을 추천
• rules, overrides 항목들을 통해 'error'를 'warn'이나 'off'로 지정할 수 있고, 특정 파일에 대해서 다른 rule을 적용할 수 있음
• error 가 있으면 build가 중지됨

create-next-app로 프로젝트를 생성하는 경우

https://nextjs.org/docs/basic-features/eslint

create-next-app 직후

• .eslintrc.json 파일 존재
• package.json 내 devDependencies에 eslint, eslint-config-next 있음
• extension 설치하지 않으면 editor에 에러표시는 안됨 (CRA와 동일)
• cli로 작동되고, build시 오류로 중단됨
• npm run dev에서는 오류가 있어도 중단되지 않음

create-next-app --typescript 직후

• eslint 관련 내용은 동일

// package.json
// eslint와는 상관없지만 궁금하니까 ts버전 설치시 추가되는것들 살펴보기
  "devDependencies": {
    "@types/node": "17.0.21", // nodejs를 위한 타입들
    "@types/react": "17.0.41",  //react 관련 타입들
    "eslint": "8.11.0",
    "eslint-config-next": "12.1.0",
    "typescript": "4.6.2"  //  ts사용을 위한 설치
  }

2) 설정

설정파일

• .eslintrc.* 파일 혹은 package.json 파일 내부의 eslintConfig 필드

• 우선순위
  파일이 속한 폴더 내부 > root directory까지 나타나는 파일
  같은 위치의 파일이라면 .eslintrc.* > eslintConfig(in package.json)

• 플러그인의 사용
  npm install --save-dev eslint-plugin-XX 로 따로 설치해야함
  플러그인 사용시 plugins에 적어야 한다
  plugins에 표기없이 extends에 바로 쓰기도 하는데, 내부 설정에 이미 plugins로 넣었다면 가능
  플러그인이나 룰을 합쳐서 eslint-config-XX 로 만들어서도 사용

• 설정 파일 예시

// .eslintrc

// 이렇게 쓰여있으면, 부모 폴더의 설정파일을 더 찾으러 올라가지 않는다
"root": true,

// 사용 환경 명시 가능
"env": {
  "browser": true,
  "node": true,
}

// extends에 적을 경우 전체 프로젝트에 적용됨
// 나중에 들어갈수록 규칙을 덮어쓰므로 우선순위가 높음
"extends": ["airbnb", "plugin:prettier/recommended", ... ]

// eslint-plugin|config- 표기는 생략 가능
// 다른곳에서 plugin:XXX으로 사용가능
"plugins": ["react-hooks", "testing-library", ... ]

// rules: extends된 rule을 custom 하거나, plugins에 있는 룰을 별도로 추가
"rules" : {
  "no-undef":"warn",
  "jest-dom/prefer-checked": "error",
}

// 기본값은 espree. ECMAScript 표준 지원
// experimental한 최신 문법을 위해서는 @babel/eslint-parser' 등의 추가가 필요
// 타입스크립트용으로는 아래와 같이 써야하지만, plugin:@typescript-eslint/recommended 내부에 포함되어있음
"parser": "@typescript-eslint/parser" 

// 특정 파일에 대해서만 적용하고싶은 경우 - 예) ts, test, storybook 등
// 이곳에 override해도 되지만, 특정 폴더에 대해서만 적용하고싶을때 해당 폴더 내에 .eslintrc 파일을 또 만들어도 됨
"overrides": [
	{
      "files": ["**/__tests__/**/*.[jt]s?(x)", "**/?(*.)+(spec|test).[jt]s?(x)"],
      "excludedFiles": "제외할 파일 또는 파일패턴",
      "extends": ["plugin:testing-library/react", plugin:jest-dom/recommended],
    },
  ],

3) 주요 plugins

eslint 기본 설치 후 사용 가능한 plugin

• eslint(:recommended, all)

react 관련

• eslint-plugin-react(/recommended, all, jsx-runtime)
• eslint-plugin-react-hooks(/recommended)
• eslint-plugin-react-native(/all)

react 관련은 아니지만, CRA, create-next-app에서 모두 내장하고있는 주요 플러그인:

• eslint-plugin-jsx-a11y(/recommended, strict) - 접근성 이슈 체크
• eslint-plugin-import - import/export 관련하여 체크

prettier 관련

• eslint-plugin-prettier - eslint를 prettier처럼 사용
• eslint-config-prettier - eslint내 prettier와 관련된 설정을 off

https://prettier.io/docs/en/integrating-with-linters.html
prettier의 공식문서를 보면,
plugin으로 eslint를 prettier처럼 쓰기보다
config로 관련된 eslint설정을 끄고 prettier를 별도로 사용하기를 추천한다.
또한 우선순위를 높이기 위해 가장 마지막에 extends 하는걸 추천하고있다.

"extends": [..., "prettier"],

with typescript

• @typescript-eslint/parser (parser 필수)
• @typescript-eslint/eslint-plugin

https://typescript-eslint.io/docs/linting/
위의 공식문서를 참고하면, ts파일들에 별도의 설정의 없는 경우는 아래의 내용을 추가해주면 되고
! CRA 또는 create-next-app으로 프로젝트 생성 시, 기본 설정에 이미 포함되어있다.

 parser: '@typescript-eslint/parser',
 plugins: ['@typescript-eslint'],
 extends: ['plugin:@typescript-eslint/recommended'],

with react-testing-library

• eslint-plugin-testing-library(/dom, react, vue, angular)
• eslint-plugin-jest-dom(/recommended)

https://testing-library.com/docs/ecosystem-eslint-plugin-testing-library
https://testing-library.com/docs/ecosystem-eslint-plugin-jest-dom

위의 testing-library 공식문서에는 두가지 플러그인을 언급하고있는데
eslint-plugin-testing-library를 주로 사용하는 것 같고
eslint-plugin-jest-dom 은 빠저있는 예시가 많은 듯 하다.
! CRA로 생성하는경우 extends: "react-app/jest" 에 이미 일부 설정되어있다.

// 설정 예시
 "plugins": ["testing-library", "jest-dom"]
 "overrides": {
   "files": ["**/__tests__/**/*.[jt]s?(x)", "**/?(*.)+(spec|test).[jt]s?(x)"],
   "extends": ["plugin:testing-library/react"]
 }

기타 - airbnb

• eslint-config-airbnb
• eslint-config-airbnb-base

에어비엔비의 설정이 유명하더라

4) 프로젝트 생성 방법에 따른 셋팅

a. 처음부터 뚝딱뚝딱 만들 경우

사용할 환경에 따라 위의 플러그인들을 적절히 설정해주면 된다.

b. with CRA

• react-app(/, /jest) 내장

CRA로 프로젝트 생성 시 package.json에 따로 표기되어있지는 않지만
package-lock.json 에서는 eslint-config-react-app이 설치된걸 찾아볼 수 있고
package.json 내부의 eslintConfig의 extends값으로 위의 두가지가 포함되어있다.
eslint-config-react-app 내부를 보면 react, ts, test를 위한 설정이 들어가있다.

//node_modules/eslint-config-react-app/base.js

parser: '@babel/eslint-parser',
plugins: ['react'],

//node_modules/eslint-config-react-app/index.js
plugins: ['import', 'flowtype', 'jsx-a11y', 'react-hooks'],
overrides: [{
  files: ['**/*.ts?(x)'],
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  ...
}]

//node_modules/eslint-config-react-app/jest.js
plugins: ['jest', 'testing-library'],
overrides: [{
  files: ['**/__tests__/**/*', '**/*.{spec,test}.*'],
  env: { 'jest/globals': true },
  rules: { ...extends대신 rules로 직접 추가됨... }
}]

c. with nextjs

• eslint-config-next(/, /core-web-vitals) 내장

create-next-app으로 프로젝트 생성 시 위의 설정을 extends하게 된다.
package.json 파일의 devDependencies에 eslint-config-next가 명시되어있고
설치된 파일을 살펴보면 react, ts, next를 위한 설정이 보이고, test용 설정은 없다.

//node_modules/eslint-config-next/index.js

extends: [
  'plugin:react/recommended',
  'plugin:react-hooks/recommended',
  'plugin:@next/next/recommended',
],
plugins: ['import', 'react', 'jsx-a11y'],
overrides: [{
  files: ['**/*.ts?(x)'],
  parser: '@typescript-eslint/parser',
  ...
}],

https://nextjs.org/docs/testing
nextjs에서 test용 설정 샘플을 보고싶으면 위의 주소에 가이드가 있고,
jest + react-testing-library를 이용한 샘플을 아래의 방법으로 설치해보면
npx create-next-app --example with-jest <프로젝트명>
테스트 파일 예제가 __test__ 폴더에 들어가있고
create-next-app의 기본 설치와 비교하여 아래의 내용이 추가되었다.

//package.json - 개발의존성 추가
devDependences: {
  "@testing-library/jest-dom": "5.16.1",
  "@testing-library/react": "12.1.2",
  "@testing-library/user-event": "13.5.0",
  "babel-jest": "27.4.5",
  "eslint-plugin-testing-library": "5.0.1",
  "jest": "27.4.5",
}

// eslint.json - eslint-plugin-testing-library 내용 추가
{
  "extends": ["next/core-web-vitals"],
  "plugins": ["testing-library"],
  "overrides": [
    // Only uses Testing Library lint rules in test files
    {
      "files": [
        "**/__tests__/**/*.[jt]s?(x)",
        "**/?(*.)+(spec|test).[jt]s?(x)"
      ],
      "extends": ["plugin:testing-library/react"]
    }
  ]
}

2. Prettier

1) 설치

https://prettier.io/docs/en/install.html

a. npm 또는 yarn으로 설치

editor의 extension으로만 설치해도 작동하지만,
협업하는 상황이라면 package.json에 정확한 버전 찍히고 공유하기 위해서는
npm설치하는게 좋음

b. editor extension 설치

이걸 해야 editor 연동기능(auto save 같은)을 사용할수 있는듯?

c. eslint 사용중이라면 eslint-config-prettier 설치 & 설정

2) 설정

설정파일

.prettierrc.XX
package.json 파일 내 prettier 항목

vscode 에서 저장시 자동으로 prettier 수정

https://github.com/prettier/prettier-vscode

// Users/XXX/Library/Application Support/Code/User/setting.json
// 못찾겠으면 vscode - Settings(cmd+,) - 우측상단 파일아이콘
// 프로젝트에만 적용시킬경우 /.vscode/settings.json

"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,

// 특정 언어에 대해 설정을 변경하고싶은 경우
"[javascript]": {
  "editor.formatOnSave": "false"
}

참고로 eslint에서 fix할 수 있는 것들은
아래의 셋팅으로 저장시 자동 fix를 실행 할 수 있다

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
},

3. 실제 사용해보기 (오답노트)

원하는 프로젝트 환경

• create-react-app으로 프로젝트 생성
• typescript, eslint, prettier 사용 예정
• 파일 저장시 자동 formatting 사용
• test는 아직 사용 안함

내가 저지른 만행

create-next-app --ts 로 프로젝트를 생성하고, prettier도 설치했다
인터넷을 뒤져서 다양한 extends를 추가하고
파일 저장시 자동으로 formatting도 하고싶은데 엉망으로 동작을 한다
.prettierrc.json에는 singleQuote: true를 설정했는데
파일 저장으로 auto formatting 할때 "으로 갔다가 '로 바뀌는것도 이상하고,
설정에 맞는데도 (eslint로 인한) 빨간 밑줄이 뜬다 😭

오답노트

// package.json
  "devDependencies": {
  	...
    "babel-eslint": "^10.1.0",	>> 삭제 (인터넷에서 보고 설치한거라 역할도 모름...)
    "eslint-config-prettier": "^8.5.0",	>> 유지 (eslint에서 prettier와 겹치는 설정 끄는 플러그인)
    "eslint-plugin-babel": "^5.3.1",	>> 삭제 (인터넷에서 보고 설치한거라 역할도 모름...)
    "eslint-plugin-prettier": "^4.0.0",  >> 삭제 (eslint를 prettier처럼 쓸 때 필요하고 비추임)
    "prettier": "^2.5.1", >> 유지 (프리티어 사용시 필요)
  }
  
// .eslintrc.json
"extends": [
  "eslint:recommended", >> 삭제 (next앱이므로 next로 충분)
  "eslint-config-prettier",  >> 가장 마지막으로 이동, "prettier"로 줄여써도 괜찮음
  "next", >> 삭제 (next에서 strict모드는 /core-web-vitals 로 사용하니까 나도..)
  "next/core-web-vitals", >> 유지
  "plugin:prettier/recommended"	>> 삭제 (eslint를 prettier처럼 사용하는건 비추)
]

// settings.json
"editor.defaultFormatter": "esbenp.prettier-vscode", >> 유지
"editor.formatOnSave": false, 	>> true로 변경
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true,	>> 상관없으나, eslint로도 fix를 원한다면 유지 
},

정답

1) vscode의 extension 으로 prettier, eslint 설치
2) create-next-app --ts 로 프로젝트 생성
3) next 프로젝트 내부에 react, ts 를 위한 eslint가 있으므로 이걸 기본으로 사용
4) test를 할거라면 eslint 의 test관련 플러그인을 셋팅해야함 (나는 안함)
5) prettier 사용을 위해 eslint-config-next 를 설치 및 설정
6) setting.json에서 에디터의 기본 포메터로 prettier를 설정하고, 저장시 자동수정 설정도 추가

// package.json
"devDependencies": {
  "@types/node": "17.0.21",
  "@types/react": "17.0.39",
  "eslint": "8.10.0",
  "eslint-config-next": "12.1.0",
  "eslint-config-prettier": "^8.5.0",
  "prettier": "^2.5.1",
  "typescript": "4.6.2"
}
  
// .eslintrc.json
"extends": ["next/core-web-vitals", "prettier"]

// settings.json
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true,	
},

나중에 추가로 하고싶은 환경설정 공부

npm run dev 설정
webpack-dev-server

craco
https://spookyjelly.tistory.com/42

qa, staging 환경설정
https://trend21c.tistory.com/2142