[React] Typescript + eslint + prettier 설정

😁 Project 할 때마다 eslint, prettier 세팅 시 모호했던 것 들을 한 번 정리해 보려고 한다.

Create React App with TypeScript

Create React App은 타입스크립트를 별도의 설정 없이 사용할 수 있도록 지원한다.

CRA로 프로젝트 생성

다음 명령어를 실행하면 TypeScript를 지원하는 새로운 프로젝트를 생성할 수 있다.

npx create-react-app my-app --template typescript

위의 명령어로 프로젝트를 생성하면 자동으로 tsconfig.json 이 생성됨
https://www.typescriptlang.org/docs/handbook/tsconfig-json.html
수 많은 컴파일러 옵션을 볼 수 있음

Setup ESLint

1. default config 지우기(package.json)

더 좋은 세팅을 하기위해 아래 부분을 지운다.
CRA로 프로젝트를 생성하면 package.json에서 기본적으로 세팅되어있음

  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },

2. install eslint

npm install eslint --save-dev

3. setup eslint

npx eslint --init

위와 같은 절차를 따라주면 필요한 package들이 설치된다.

.eslintrc.json을 확인 해보면 아래와 같이 자동으로 세팅된다.

4. Running ESLint

터미널을 열고 아래와 같은 명령어를 입력한다...!

npx eslint src/* --fix

에러가 줄줄히 뜬다...ㅋㅋㅋ

대부분의 에러는 확장 파일 오류나 React 자체의 사용과 같이 의미가 없다.
'React' was used before it was defined no-use-before-define
JSX not allowed in files with extension.'tsx' react/jsx-filename-extension

5. 성가신 에러들을 해결하기위한 솔루션

😈 problem: "react/jsx-filename-extension"
😊 sample: JSX not allowed in files with extension '.tsx'
(확장자가 '.tsx' 인 파일에서는 jsx가 허용되지 않습니다)
🏆 solution

eslintrc.json

"rules":{
  "react/jsx-filename-extension":["warn",{"extensions":[".tsx"]} }
}

추측 jsx문법을 .tsx에서도 사용할 수 있도록 해주는거 같음(?)

😈 problem: "import/no-unresolved"
😊 sample: Unable to resolve path to module './App'
(모듈 './App'에 대한 경로를 확인할 수 없습니다.)
🏆 solution

프로젝트 디렉토리 내에서 터미널을 열고 eslint-import-resolver-typescript 패키지를 설치한다.

 npm install eslint-import-resolver-typescript --save-dev

eslintrc.json에 "settings"를 추가하고 아래와 같이 추가해준다.

"settings":{
  "import/resolver":{
    "typescript":{}
  }
}

😈 problem: "import/extensions"
😊 sample: Missing file extension 'tsx' from './App'
아니 이렇게 되어있길래 App.tsx라고 붙였는데 가져오기 경로는 '.tsx' 확장으로 끝날 수 없으니 'App.js'를 고려 하라네..? js는 확장자 붙이면 (lint에러 없이)가져와짐!
🏆 solution

eslintrc.json으로가서 rules에 아래와 같이 넣어준다.

"rules":{
  "import/extensions":[
        "error",
        "ignorePackages",
        {
          "ts":"never",
          "tsx":"never"
        }
    ]
}

😈 problem: "no-undef"
😊 sample:"test" is not defined
🏆 solution
eslintrc.json, extends에 아래와 같이 추가해준다.

"extends":[
  "plugin:@typescript-eslint/recommended"
  ]

6. nice rules!

• 모든 함수에 명시적 반환 유형이 있어야함!
  eslintrc.json rules에 아래와 같이 추가

"rules":{
  "@typescript-eslint/explicit-function-return-type":[
    "error",
    {
      "allowExpressions":true
    }
    ]

• 코드한줄의 최대길이
  eslintrc.json rules에 아래와 같이 추가

"rules":{
  "max-len":["warn",{"code":80}]
}

• react hooks rules
  eslintrc.json plugins에 아래와 같이 추가

"plugins":[
  "react-hooks"
 ]

eslintrc.json rules에 아래와 같이 추가

"rules":{
  "react-hooks/rules-of-hooks":"error",
  "react-hooks/exhaustive-deps":"warn"
}

setup prettier

1. Install prettier package

npm install --save-dev --save-exact prettier

2. .prettierrc.json file

{
  "trailingComma":"es5",
  "tabWidth":4,
  "semi":false,
  "singleQuote":true
}

3. .prettierignore file

.prettierignore file 생성!

node_modules

4. run prettier

npx prettier --write src/App.tsx

코드 포맷팅이 된다! 야호^0^

Prettier with auto-fix in a file when save

💡 밑에서 보면 알겠지만 eslint formatting rules와 prettier 가 충돌함

eslint 와 prettier을 함께 사용하는 경우 prettier 규칙만 사용하여 자동 수정을 설정하고 prettier 및 linter 규칙을 모두 사용하는 것은 권장하지 않는다!

프로젝트 최상위 경로에 .vscode 폴더를 만들고 그 안에 settings.json 파일을 만든다. 그리고 아래의 내용을 넣는다.

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

이렇게 설정해주고 저장을 해보면 prettierrc에 정의된 룰에 따라 자동으로 코드가 포맷팅된다.

ESLint, Prettier 함께 사용하기

세팅을 다 하고나서 둘다 실행하게 되면 formatting 룰에 따라 서로 충돌이 일어나는 것을 볼 수 있다.
이 문제를 해결하기 위해 formatting 규칙에는 Prettier만 사용하도록 ESLint를 설정하여 formatting 규칙이 충돌 하지 않도록 할 수 있다.

ESLint formatting rules 비활성화

1.eslint-config-prettier 패키지를 설치한다.

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

2..eslintrc.json에 eslint-config-prettier 설정

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

3. eslint 실행

npx eslint src/App.tsx ---quiet --fix

ESLint가 formatting rules사용을 중단한 것을 볼 수 있다.

ESLint가 Prettier 규칙을 사용하도록!

1. eslint-plugin-prettier 설치

npm install --save-dev eslint-plugin-prettier

2. .eslintrc.json에 eslint-plugin-prettier 설정

"extends":[
  "plugin:prettier/recommended"
  ]

note1: 이것은 ESLint 내에서 Prettier를 실행하는 eslint-plugin-prettier 플러그인에서 제공하는 규칙을 켠다.

note2: "plugin:prettier/recommended"가 이미 뒤에서 수행하므로 "extends"에서 "prettier"를 제거 할 수도 있다.

3. ESLint를 실행한다.

npx eslint src/App.tsx --quiet --fix

ESLint는 formatting rules 로 Prettier 구성을 사용한다.

저장할 때 파일에서 자동으로 ESLint + Pretter 실행 되도록 하기

.vscode/settings.json에 아래와 같이 추가해준다.

{
  "editor.defaultFormatter": "dbaeumer.vscode-eslint",
  "editor.formatOnSave": true,
  "eslint.alwaysShowStatus": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

완료! 이제 저장된 모든 파일은 코드를 수정하고 자동으로 수정 될 수 있는 ESLint + Prettier 규칙으로 형식을 지정한다.

What is ESLint

JavaScript 코드에서 문제를 찾아주고 고쳐주는 정적 코드 분석 도구이다. create-react-app 으로 리액트 앱을 생성하면 기본적으로 eslint-config-react-app 이라는 eslint 설정이 세팅되어있다.

esling-plugin-*

plugin은 룰을 정의한 것으로, 예를 들면 esling-plugin-react는 리액트와 관련된 룰을 정의한 패키지 이다.

{
  "plugins":["react"]
}

이렇게만 넣어두면 아무런 동작도 하지 않는다. 이 상태는 eslint-plugin-react에 존재하는 룰을 사용할 수 있게 된것이다! 만약 사용하고 싶다면 아래와 같이 정의해야함

{
  "plugins":["react"],
  "rules":{
  	"react/jsx-uses-react":"error",
    "react/jsx-uses-vars":"error
  }
}

이런식으로 매번 모둔 룰에 대해 분석하고 파악해서 일일히 작성하기에는 너무 귀찮다. 때문에 대부분의 플러그인은 recommened나 strict, all 등의 자체 설정을 제공한다.
eslint-plugin-react의 경우 recommended와 all 두가지의 config를 제공하는데 아래와 같이 사용할 수 있다.

{
  "extends":["plugin:react/recommended"]
}

위의 설정이 이미 pluging 선언을 포함하고 있기 때문에 따로 eslint에 적지 않아도된다. 대부분의 recommended config가 이러한 형태를 취하고 있다.

esling-config-*

이러한 esling-plugin- 패키지들이나 룰들을 모아서 설정으로 만든 것이 eslint-config- 패키지다. 예를들면, esling-config-airbnb는 eslint, eslint-plugin-import, eslint-plugin-react, eslint-plugin-react-hooks, eslint-plugin-jsx-a11y의 룰들을 조합한 설정 패키지 이고 아래와 같이 정의해서 사용한다.

{
  "extends":["airbnb"]
}

eslint-plugin- 패키지의 설정은 extends에서 plugin:패키지네임/설정네임으로 사용할 수 있는데 eslint-confing- 패키지의 설정은 바로 *를 써주기만 하면 된다. 플러그인 패키지를 plugins에 단축어로 쓰던 것과 동일하다.

parser

코드를 분석하기 위한 파싱툴, 기본값은 espree이다. 하지만 보통 js워크스페이스에서는 @babel/eslint-parser를 사용하고 ts워크스페이스인 경우 @typescript-eslint/parser를 사용한다.
plugin:@typescript-eslint/recommended를 포함시키면 @typescript-eslint/parser가 자동으로 포함된다.

	"parser":"@typescript-eslint/parser"

ESLint가 formatting rules를 사용하는것을 중단할 수 있다

env

사전 정의된 전역 변수를 제공한다. node 환경인 워크스페이스면 node:true를 추가해야하고, 웹 환경이라면 browser:true, es6:true 등을 추가해야한다. files나 overrides를 사용해서 파일 패턴단위로 적용할 전역변수를 나눌 수도 있다

What is Prettier

코드를 보기좋게 포맷팅 해준다. 설정파일에 정해둔 규칙으로 코드 구조를 완전히 새로 작성해줌!

참고
https://yrnana.dev/post/2021-09-02-eslint
https://javascript.plainenglish.io/setting-eslint-and-prettier-on-a-react-typescript-project-2021-22993565edf9