ESlint detail

ESlint 설정에 대해 살펴보자.

나름 next.js boilerplate 세팅 후
vscode상에서 문제 없던 prettier, eslint가
intelliJ 상에서 문제가 생겼고, 에러 처리하는 과정에서
eslint 설정의 디테일함에 궁금증이 생겨 글을 작성한다.

eslint에는 구성 할 수 있는 몇가지 옵션이있다.

• Environments : 스크립트 실행환경에 대한 설정, 각 환경에 미리 정의 된 전역 변수 설정 등
• Globals : 사용자가 추가하는 전역 변수
• Rules : 활성화 규칙 및 오류 수준
• Plugins : eslint가 사용할 추가 규칙, 환경 구성 등을 정의하는 곳(third-party)

module.exports = {
  key : value
}

object형식의 .eslintrc.js 파일에서
각 key가 무엇을 의미하는건지 살펴보자.

우선 ESlint는 기본적으로 모든 상위 폴더에서 root 디렉토리까지 구성파일을 찾고, .eslintrc 파일과 package.json 파일이 같은 디렉토리에 있는경우 .eslintrc가 우선 순위를 갖게 되며, package.json은 사용되지 않습니다.
(이 부분에서 .eslintrc key에 해당하는 extends, plugins 부분 value로 작성한 모듈이 설치되어 있지 않을 경우 에러가 발생할 수도 있습니다.)

하나하나 차근차근 살펴보자.

module.exports = {
  root: true,
  parser: 'babel-eslint',
  parserOptions: {
    ecmaVersion: 6,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  },
  env: {
    browser: true,
    node: true,
    es6: true,
  },

root

앞선 설명처럼 .eslintrc가 우선 순위를 갖게 된다고 설명했듯이 ESlint를 특정 프로젝트로 제한하는 경우 선언할 수 있다.
root의 default값은 true이다

parser

eslint는 기본적으로 Espree를 파서로 사용하지만, 파서가 다음 2가지 요구 사항을 충족하는 상황에서는 다른 파서를 선택적으로 사용할 수 있다.

1. 파서가 사용되는 구성 파일에서 로드 할 수 있는 node module이여야 한다 (일반적으로 npm에서 parser package를 별도로 설치해야함)
2. 파서 인터페이스를 준수해야한다.

기본적으로 Babel과 함께 사용되는 파서로는 "babel-eslint"가 있고 Typescript 구문 분석을 위해 사용되는 "@typescript-selint/parser"가 있다.

parserOptions

parserOptions은 eslint 사용을 위해 지원하려는 javascript 언어 옵션을 지정할 수 있다.

parserOptions: {
    ecmaVersion: 6,
      // 말 그대로 사용할 ECMAscript 버전 설정
    sourceType: 'module',
      // parser의 export 형태 설정
    ecmaFeatures: {
      jsx: true,
        // ECMAscript 규격의 JSX 사용여부
    },
      // ECMAscript의 언어 확장 기능을 설정

ecmaFeatures value안에 jsx외에도
globalReturn(전역 스코프의 사용여부 node, commonjs 환경에서 최상위 스코프는 module), impliedStric(stric mode 사용여부)
등이 있다.

env

  env: {
    browser: true,
    node: true,
    es6: true,
  },

env는 사전 정의된 전역 변수 사용을 정의합니다.
주로 사용되는 설정으로는 browser, node가 있습니다.
env내에서 사용할 수 있는 전역변수는 여기에서 확인하실 수 있습니다.

  env: {
    ...
  },
  globals: {
    "$": true
  }

설정하지 않은 예외 전역 변수를 사용하는 경우에는 globals를 활용하여 추가할 수 있습니다.

module.exports = {
  ...,
  plugins: ['react', 'prettier', 'react-hooks'],
  extends: ['airbnb-base', 'eslint:recommended',
            'plugin:react/recommended', 
            'plugin:prettier/recommended',
            'plugin:react-hooks/recommended'],
  ignorePatterns: ['temp.js', 'node_modules/'],
  rules: {
    'prettier/prettier': 'error',
  }
}

plugins

eslint는 서드파티 플러그인을 지원함으로서, 플러그인 패키지를 설치한 뒤, 해당 플러그인을 위의 코드처럼 추가하여 사용할 수 있습니다.
ex) npm -> eslint-plugin-react

extends

extends는 우리가 추가한 플러그인에서 사용할 규칙을 정합니다
플러그인은 일련의 규칙의 집합일뿐, 추가하여도 규칙은 적용되지 않습니다.
규칙을 적용하기 위해서는 추가한 플러그인 중에서 사용할 규칙들을
'plugin:react/recommended',
'plugin:prettier/recommended',
'plugin:react-hooks/recommended'
이런식으로 추가해주어야 적용이 된다.

추가적으로 작성예정

ignorePatterns

rules