ESLint로 Airbnb style 적용하기

들어가며

ESLint는 ECMAScript / JavaScript 코드에서 발견되는 패턴을 식별하고 보고하는 도구이고,

JavaScript, JSX의 정적 분석 도구로 오픈 소스 프로젝트입니다.

우리의 코드를 분석해 문법적인 오류나 안티 패턴을 찾아주고 일관된 코드 스타일로 작성하도록 도와줍니다.

아래의 사이트를 참고하여 설정할 수 있습니다.

 

http://eslint.org

ESLint - Pluggable JavaScript linter

 

 

 

설치 및 사용법

1. VSCode의 터미널에 npm을 사용해 ESLint를 설치합니다.

npm install eslint --save-dev 

 

 

 

2. 마켓플레이스에서 prettier를 설치합니다.

 

 

 

3. 다음의 패키지들을 설치합니다.

npm i prettier -D

npm i eslint-config-prettier

npm i eslint-plugin-prettier

 

 

 

4. package.json 파일을 확인합니다.

eslint-config-prettier, eslint-plugin-prettier가 dependencies 프로퍼티에 들어가 있다면

devDependencies 로 옮깁니다.

 

 

 

5. 구성 파일을 설정합니다.

npm eslint --init

명령어를 실행하게 되면 아래와 같이 퀘스천을 던지는데 

How would you like to define a style for your project? 물음에서 Use a popular style guide를 선택합니다.

 

 

 

6. .eslintrc.js 파일을 수정합니다. (파일이 없을 경우 생성하여 수정)

아래와 같이 수정합니다.

module.exports = {
  env: {
    browser: true,
    es6: true,
  },
  extends: [
    'airbnb-base', "plugin:prettier/recommended"
  ],
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly',
  },
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: 'module',
  },
  rules: {
    "no-console": "off"
  }
};

 

 

SMALL