[TIL] ESLint & Prettier

JIEUN YANG·2023년 1월 15일

ESLint

ESLint는 자바스크립트 코드에서 발견되는 문제시되는 패턴들을 식별하기 위한 정적 코드 분석 도구로 니콜라스 C. 자카스가 2013년에 개발하였다.
ESlint를 사용하기 위해서는 Node.js 가 꼭 설치되어 있어야 하며, VSCode 에디터에서 사용하려면 eslint extention 과 eslint library 모두 설치 및 세팅이 필요하다.

ESlint는 Codeing Convetion과 같이 가독성 있는 코드를 작성하는 규칙에 대해 명시하고 선행된 rules에 벗어난 코딩스타일이 존재하면 'error' 또는 'warning' 표시하거나 유효성 체크를 'off' 할 수도 있다. 따라서, ESLint는 버그를 더 빠르게 찾고 고칠 수 있도록 도와준다.

사용방법

install ESLint extention and ESLint library
ESLint 는 VSCode(텍스트 에디터)에 의존하여 구동되기 때문에, 에디터 확장 프로그램으로 설치하고, 설치된 확장 프로그램은 workspace 내에 설치된 ESLint library 를 통해 코드의 규칙을 판단하고 에러를 찾아낸다.
make .eslintrc file
.eslintrc 파일을 통해서는 확장성, 플러그인 을 개별적으로 명시할 수 있기 때문에 커스텀 한 설정으로 협업 시 다른 사람이 작성한 코드의 가독성을 높여준다.

기본설정

module.exports = {
  root: true,
  env: {
    browser: true,
    es2021: true,
  },
  extends: ['eslint:recommended', 'plugin:react/recommended'],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: [],
  rules: {
    quotes: ['error', 'single'],
    // semi: ['error', 'never'],
    // 'space-in-brackets': ['error', 'always'],
    // endOfLine: 0, //개행 설정. windows에서 prettier를 사용할 시 crlf 오류가 발생하기 떄문에 설정
  },
};

root

.eslintrc 파일을 찾을 때 검색범위를 설정하는 옵션으로, 현재 리텍토리에서만 확인할지 그 상위 폴더까지 올라갈지 범위를 설정한다. default : true
env

자바스크립트가 node, browser 등 여러 환경에서 실행될 수 있기에 환경에 따라 사용 가능한 고유 객체(ex : window) 를 미리 알려줌으로써 오류가 나지 않도록 설정하는 옵션
extends

이미 제공된 lint를 그대로 설정할 수 있는 옵션으로 basic 규칙을 수정하고 싶다면, rules 옵션에서 덮어쓰는 설정이 가능하다. ex : 'extends': ['airbnb ']
parserOptions

ESLint가 순수자바스크립트 코드만 이해할 수 있기 때문에 코드를 최신 문법으로 작성한 경우 파서를 사용하도록 설정해주는 옵션이다.
plugins

ESLin- t 기본규칙 외에 추가적인 규칙을 사용할 수 있도록 만들어주는 옵션으로, 해당 규칙에 어긋났을 때 error, warn, off 에 대한 설정은 extends 혹은 rules 옵션에서 명시한다._
rules

사용자 규칙을 정의하는 옵션으로 extends 옵션에서 자동으로 설정된 rules을 오버라이드 할 때 유용하다. ex : quotes: ['error', 'single']