Typescript + React ESLint Prettier 기초설정

ESLint : Javascript 파일 및 JSX(TSX) 파일에 대한 문법 감시 도구. 문법에 맞지 않는 코드, 참조되지 않는 변수 등등을 감시하여 정해진 기준에서 벗어난 코드를 쓰지않도록 도와주는 길잡이 역할을 함.

Prettier : 코드의 들여쓰기를 비롯한 여러 심미적 요소들을 코드 developing 하는데에 있어서 더 효율적일 수 있게 만들어줌. 말 그대로 코드를 이쁘게 만들어쥼. VS CODE 확장 프로그램에도 있숨.

yarn --dev add eslint prettier
yarn add --dev @typescript-eslint/eslint-plugin @typescript-eslint/parser
yarn add --dev eslint-config-prettier eslint-plugin-prettier
yarn add --dev eslint-plugin-react eslint-plugin-react-hooks

#패키지 소개

@typescript-eslint/eslint-plugin : typescript 문법에 대해서 Linting 을 도와주는 패키지

@typescript-eslint/parser : typescript 코드를 파싱해오는데에 사용되는 패키지

eslint-config-prettier : prettier 와 ESLint 의 규칙 충돌을 방지해주는 패키지

eslint-plugin-react : 리액트 전용으로 ESLint 에서 사용할 수 있는 rule 이 정의된 패키지

eslint-plugin-react-hooks : 리액트 함수 최상위에서만 hook 을 정의할 수 있게 강제하는 ESLint 패키지

 

 

#패키지 설치 후, 할 일

1. .eslintrc.js 파일 생성

module.exports = {
    parser: "@typescript-eslint/parser",
    plugins: ['@typescript-eslint', 'prettier'],
    settings: {
        'import/resolver': {
            node: {
                extensions: ['.ts', '.tsx'],
            },
        },
    },
    extends: [
        'airbnb',
        'plugin:import/errors',
        'plugin:import/warnings',
        'plugin:prettier/recommended',
        'plugin:@typescript-eslint/recommended',
        'prettier/@typescript-eslint'
    ],
    rules: { 
        /* 원하는 rule 넣기 */
    }
}

rules 는 각 항목마다 0(해당 패턴 무시), 1(해당 패턴에 경고 띄우기) 값을 가질 수 있다. 그 밖에도 .eslintrc.js 파일에 넣을 수 있는 옵션은 매우 많다.

2. .prettierrc 만들기

{
  "tabWidth":4,
  /* 원하는 규칙 넣기 */
}

#확장설치

ESLint 와 Prettier 확장을 설치하자.

파일 -> 기본설정 탭 -> 설정 에서 default formatter 를 prettier 로 설정해주자.