[React] Create-React-App에 Prettier & ES Lint 적용하기

협업을 진행하다보면 각기 다른 코드 스타일 때문에 코드의 통일성과 가독성이 떨어지거나, 잠재적으로 여러 문제를 일으킬 수 있는 위험이 있다. 그렇기에 협업시엔 코드 스타일을 합일화 할 필요성이 있는데, Prettier와 ES Lint를 적절히 사용한다면 협업시의 코드스타일로 인해 발생할 수 있는 잠재적 위험들을 어느정도 방지할 수 있다.

❗️ 적용 전 vsCode 마켓 플레이스에서 es lint와 prettier 익스텐션을 설치해야한다.

Create-React-App + Prettier & ES Lint

Create-React-App에는 자체적으로 Es Lint가 내장되어있고, CRA에서 지정해놓은 lint 스타일이 적용되어 있기 때문에, Es Lint를 설치할 필요가 없으며, 원하는 스타일 가이드(air bnb Style Guide, Google Style Guide 등) 적용시에는 원하는 style-config 만 설치해준뒤 적용해주면된다.

Install 'CRA (Create-React-App)'

$ npx create-react-app

먼저 Create-React-App를 설치해준다. 폴더 이름은 'add-lint-prettier'로 지정 해주었다.

Add 'eslint-config-airbnb'

일반적인 리액트 프로젝트에서 eslint-config-airbnb를 사용하기위해선 eslint-plugin-jsx-a11y, eslint-plugin-react 같은 패키지를 선행 설치해줘야 사용할 수 있지만, CRA로 생성된 프로젝트의 경우 이미 내장되어 있으므로 eslint-config-airbnb만 설치해주면 된다.

install

$ npm i eslint-config-airbnb --save

Add 'prettier'

이제 prettier를 설치해 줄 차례이다. prettier는 코드 검수보단 공백 제거, 따옴표 변환같은 포맷팅에 좀더 가까운 익스텐션이며, eslint와 함께 사용한다면 안성맞춤이다. 그러나 prettier의 세팅과 eslint의 세팅이 겹치면서 충돌할 위험이 있으므로 eslint-config-prettier, eslint-plugin-prettier를 설치해주어 충돌을 방지해 줄 수 있다.

install

$ npm i --save-dev prettier eslint-config-prettier eslint-plugin-prettier

Add .eslintrc & .prettierrc

필요한 패키지 설치를 마쳤으므로, 이제 lint와 prettier 세팅을 건드려줄 차례이다. 프로젝트 최상단 위치에 .eslintrc와 .prettierrc를 생성해주자.

.eslintrc

module.exports = {
  extends: ['airbnb', 'prettier/react', 'plugin:prettier/recommended'],
  rules: {
    'react/prefer-stateless-function': 0,
    'react/jsx-one-expression-per-line': 0,
    'react/jsx-filename-extension': ['error', { extensions: ['.js', '.jsx'] 	}],}],
    semi: ['error', 'always'],
    'prettier/prettier': ['error', { singleQuote: true }],
    'no-trailing-spaces': 0,
    'keyword-spacing': 0,
    'no-unused-vars': 1,
    'no-multiple-empty-lines': 0,
    'space-before-function-paren': 0,
    'eol-last': 0,
    'no-var': 'error'
  },
  parser: 'babel-eslint',
  parserOptions: {
    ecmaVersion: 2017,
    allowImportExportEverywhere: true,
  },
  env: {
    browser: true,
    es6: true,
    node: true,
  },
};

.eslintrc의 extends에 ['airbnb', 'prettier/react', 'plugin:prettier/recommended']를 추가해준 뒤 parser를 babel-eslint로 지정해주면 기본적인 세팅은 끝이다. 이제 rules라는 필드를 통해 규칙을 추가해주거나, 기존에 적용되어있는 규칙을 비활성화 할 수 있다. 위 예시는 현재 사용하고있는 세팅값이므로, extends와 parser, 그리고 rulus의 react로 시작하는 3개의 룰들을 제외하고는 임의적으로 설정해주면 된다.

.prettierrc

{
    "trailingComma": "es5",
    "tabWidth": 2, // tab사이즈
    "semi": true, // 자동 세미콜론 추가
    "singleQuote": true // 작은따옴표 변환
  }

.prettierrc 파일의 옵션도 입맛대로 임의적으로 설정해주면 된다.

이제 src폴더의 app.js를 확인해보면 lint 세팅대로 문법 오류를 잘 잡아내는것을 알 수 있다.