Eslint, Prettier 설정 Best Practice

예전에 Eslint, Prettier를 설정하면서, 제대로 알지 못하고 무지성으로 설정한 경험이 있다.

최근에 우연하게도 React 파트를 맡게되는 일이 생겼고, 다시 한번 이를 설정할 기회가 생겼다.

무엇이 Best Practice인지 고민하면서 아래의 글을 정리할 수 있었다.

 

 

Eslint는 linter로써 문법상 오류를 방지하기 위한 것, Prettier는 formatter로써 코드 스타일을 통일하고 교정하기 위함입니다.

• VSCode 익스텐션 마켓플레이스에서 ESLint 를 검색 후 설치

• VSCode 익스텐션 마켓플레이스에서 Prettier - Code Formatter 검색 후 설치

 

1. eslint prettier 설치 / 연동

   yarn add --dev eslint prettier

   yarn add --dev eslint-config-airbnb
   
   # airbnb 스타일 가이드의 코드 규칙을 적용하기 위한 종속성 설치

   yarn add --dev eslint-config-prettier
   yarn add --dev eslint-plugin-prettier
   
   # eslint-config-prettier: eslint와 prettier간 충돌나는 규칙을 비활성화해주는 eslint 설정
   # eslint-plugin-prettier: prettier 규칙을 생성하는 eslint 플러그인

   • eslint-config-pretteir로 prettier 의 설정 중 eslint 의 설정과 충돌이 나는 설정들을 비활성화
   • eslint-plugin-prettier로 prettier의 규칙을 eslint에 적용
   참고:
   • https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbn
   
   
   • https://github.com/prettier/eslint-plugin-prettier

2. 프로젝트 최상위 위치에 .prettier.js 파일 생성 후 작성(json 파일로 생성해도 되지만, 주석의 용이성을 위함)

   module.exports = {
       singleQuote: true,
       // 문자열은 작은 따옴표로 통일
       semi: true,
       //코드 마지막에 세미콜른이 자동 생성
       useTabs: false,
       //탭의 사용을 금하고 스페이스바 사용으로 대체
       tabWidth: 4,
       // 들여쓰기 너비는 4칸
       trailingComma: 'all',
       // 객체나 배열 키:값 뒤에 콤마 생성
       printWidth: 80,
       // 코드 한줄이 maximum 80칸
       arrowParens: 'avoid',
       // 화살표 함수가 하나의 매개변수를 받을 때 괄호 생략
   };

   • 해당 세팅은 자신이 원하는대로 설정하면 됩니다.
     • 참고: https://prettier.io/docs/en/configuration.html

3. 프로젝트 최상위 위치에 .eslintrc.js 파일 생성 후 작성(json 파일로 생성해도 되지만, 주석의 용이성을 위함)

module.exports = {
    env: {
        browser: true,
        es6: true,
        node: true,
    },
    extends: [
        'eslint:recommended',
        'airbnb',
        'prettier',
        'plugin:prettier/recommended',
    ],
    rules: {
        'react/jsx-filename-extension': [
            'error',
            { extensions: ['.js', '.jsx'] },
        ],
    },
};

참고:

• https://velog.io/@_jouz_ryul/ESLint-Prettier-Airbnb-Style-Guide로-설정하기

• https://github.com/prettier/eslint-config-prettier/blob/main/CHANGELOG.md