[TypeScript] Eslint와 Prettier 설정

써야지 생각만 계속 하다가 이번에 작성하게 되었다. 

 

Eslint ? 

자바스크립트와 타입스크립트의 코딩 스타일 도구이다. 

미리 정해둔 코딩 컨벤션에 위배되는 코드나 안티 패턴을 자동으로 검출해주는 좋은 친구이다. 

 

Prettier ? 

코드의 스타일만 정리해준다. 

미리 규칙을 정하면 자동으로 규칙에 맞게 코드를 정리해주는 도구이다. 

 

미리 정해둔 규칙에 따라 정렬해주기 때문에 가독성을 높혀주고 코드의 스타일을 통일시켜준다. 

 

설치 

VScode의 extensions에서 eslint와 prettier를 설치해준다. 

 

npm install --save-dev eslint prettier typescript

설정을 위해서 eslint와 prettier를 설치하고, 타입스크립트 환경이므로 typescript도 설치해준다. 

 

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

eslint에서 타입스크립트를 활용하기 위한 플러그인을 설치해준다. 

 

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

eslint와 prettier를 함께 사용하기 위해서 플러그인을 설치한다. 

 

npm install --save-dev eslint-config-airbnb-base # 리액트 관련 규칙 X

npm install --save-dev eslint-config-airbnb      # 리액트 관련 규칙 O

airbnb의 스타일 가이드를 통해서 eslint를 설정하는데,  base의 경우 리액트와 관련된 규칙이 있는

가이드이고 base가 없는 라이브러리는 리액트 관련 규칙을 포함한다. 

 

$npm install --save-dev eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y eslint-plugin-import

만약 리액트를 사용하는 프로젝트인 경우에는 다음과 같은 플러그인을 추가적으로 설치해야한다. 

eslint-plugin-react : React 규칙이 들어있는 플러그인 

eslint-plugin-react-hooks : React Hooks 규칙이 들어있는 플러그인

eslint-plugin-jsx-a11y : JSX 요소의 접근성 규칙에 대한 정적 검사 플러그인

eslint-plugin-import : ES6의 import, export 구문을 지원하는 필수 플러그인

 

설정 

// .prettierrc

{
  "singleQuote": true,
  "parser": "typescript",
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 120,
  "arrowParens": "always"
}

먼저 prettier에 대한 설정이다. 

 

singleQuote : quote를 single로 사용할지, double로 사용할지 결정하는데, single로 사용한다. 

semi : 명령문 마지막에 semiclons를 붙일지 말지의 여부

quoteProps : 객체 안에 key의 따옴표를 quote를 감싸지 않으면 안되는 문자가 있을때만 사용  

useTabs : 공백 대신 탭으로 줄을 들여 쓸지에 대한 여부를 물어본다.

printWidth : 라인의 최대 길이 설정으로 120으로 설정했다. 

tabWidth : 들여쓰기의 칸 수를 말하며 2칸으로 설정했다. 

arrowParens : 화살표 함수에서 매개변수를 항상 괄호로 감싸도록 설정했다. 

 

더 자세한 옵션들은 https://prettier.io/docs/en/options.html 참고하면 된다! 

 

// .eslintrc.js

module.exports = {
  parser: '@typescript-eslint/parser',
  plugins: [
    '@typescript-eslint',
    //'react-hooks' // eslint-plugin-react-hooks 설치한 경우
  ],
  extends: [
    'airbnb-base', // or airbnb
    // 'plugin:react/recommended', // eslint-plugin-react 설치한 경우
    // 'plugin:jsx-a11y/recommended', // eslint-plugin-jsx-a11y 설치한 경우
    // 'plugin:import/errors', // eslint-plugin-import 설치한 경우
    // 'plugin:import/warnings', // eslint-plugin-import 설치한 경우
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
  ],
  rules: {
    'prettier/prettier': 0,
  },
  settings: {
    'import/resolver': {
      node: {
        extensions: [
          '.js',
          //   '.jsx',
          '.ts',
          //   '.tsx',
        ],
      },
    },
  },
};

다음으로 eslint 설정이다. 

필요에 따라서 주석을 풀어서 설정해주면 된다. 

 

참고 

https://github.com/SeoJaeWan/Express-TypeScript

GitHub - SeoJaeWan/Express-TypeScript