esLint 설정해보기

제로초님이 한 것.

1. 
npm i eslint -D

2.
npm i eslint-plugin-import -D

3.
npm i eslint-plugin-react -D

4.
npm i eslint-plugin-react-hooks -D

//.eslintrc 내용
{
    "parserOptions":{
        "ecmaVersion":2021,
        "sourceType":"module",
        "ecmaFeatures" : {
            "jsx": true
        }
    },
    "env" : {
        "browser":true,
        "node": true,
        "es6":true
    },
    "extends" : [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:react-hooks/recommended",
        "plugin::import/recommended"
    ],
    "plugins": [
        "import",
        "react",
        "react-hooks"
    ]
}

eslint-plugin-import

eslint-plugin-react

eslint-plugin-react-hooks

---

ESLint 설정에 대해여

ESLint는 크게 4가지로 구분되어 있다.

• 환경 (코드가 돌아갈 환경을 설정해준다. 각 환경은 특정한 전역변수 조합을 갖고 있으며, 이들을 사용할 수 있게 만든다. 예를 들어 console 같은 것을 못 쓴다.)

• 전역 변수 (추가로 사용할 전역변수를 정의할 수 있다. $(jquery))

• 규칙 (어떤 룰을 활성화하고 에러의 레벨을 정한다.)

• 플러그인 (규칙, 환경, 설정들의 모음집(서드파티))

1. Environments

위의 설정에서 환경은 브라우저와 node.js에서 사용한다는 뜻

2. Globals

설정 없음.

3. Rules

설정 없음.

4. Plugins

3가지 플러그인을 사용하고 있다.
extends는 플러그인 에서 사용할 규칙을 지정해주는 역할이다.

예를 들어서, react라는 플러그인의 옵션들 중에서 recommended 옵션을 사용하는 것이다.

이때,
eslint-plugin-jquery 모듈을 예로 들면, 앞의 prefix를 제거할 수 있다.
아래처럼.

{
    // ...
    "plugins": [
        "jquery", // means eslint-plugin-jquery
    ]
    // ...
}

scoped package에서는 사용 못한다고 나와있다. 뭔지는 모르겠음!

{
    // ...
    "plugins": [
        "@jquery/jquery", // means @jquery/eslint-plugin-jquery
        "@foobar" // means @foobar/eslint-plugin
    ]
    // ...
}

5. ParserOptions

이 부분은 ECMAScript version이나 JSX 등을 지원하도록 만드는 부분이다.

공식 문서를 읽다가 뭔가 중요할 것 같아서 기록해두자면,
parserOption은 문법 자체를 지원하는 것이므로, 전역변수를 지원하는 것은 아니다. 따라서 es6의 문법과 전역 변수 모두를 사용하고 싶다면,
{ "env": { "es6": true } } 만 정의하면 된다.

{ "env": { "es6": true } } 는 문법을 자동으로 포함하지만,
{ "parserOptions": { "ecmaVersion": 6 } }는 전역변수를 포함하지 않는다고 한다.

각 세부 선택지들은 공식문서에 있으니 정리는 하지 않겠다!

---

Prettier 설정 추가

구글링 하니 금방 나오더라.

"eslint-config-prettier"
"eslint-plugin-prettier"

우선 이 두 가지를 설치하면 된다.

• config는 eslint와 prettier간 충돌하는 rule을 꺼버린다.
• plugin은 prettier에서 적용한 코드상의 오류를 eslint 오류로 출력한다.

그 다음

root 디렉토리에 .prettierrc 설정을 적용한다.

{
  "printWidth": 100,
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "all",
  "bracketSpacing": true,
  "semi": true,
  "useTabs": false,
  "arrowParens": "avoid",
  "endOfLine": "lf"
}

대충 이걸 사용하였다.