.eslintrc [파악하기 편]

.eslintrc.json 또는 package.json .eslintrc.{js, yml, yaml, cjs} 등에서 규칙을 설정할 수 있다.

 

궁금한 것

1. rules
2. plugins ?? extends ???
3. parser
4. parserOptions
5. ...
6. root
7. files
8. ignorePatterns
9. env

plugin

• npm module
• `eslint-plugin-<plugin-name>` 형식
• .eslintrc에 추가되는 내용  plugins: ["<plugin-name>"]
• 그러나, plugins에 추가한다고 해서, 규칙이 자동으로 적용되는 것이 아님!
• 플러그인과 함께 사용하려는 규칙들을 "rules"에 개별적으로 추가해야 한다!
  • 모든 규칙들을 작성해주는 건 불편한데...?
  • 규칙 세트를 사용할 수 있다면 편하지 않을까? => 그게 바로~ config !!

config

• npm module
• `eslint-config-<config-name>` 형식
• [작성 순서] 뒤에 작성된 config rule이 앞쪽 rule을 덮어쓴다.
• eslintrc에 추가되는 내용   extends: ["<config-name>"]
• plugin과 함께 제공되는 config는 `plugin:` 접두사와 함께 사용
  • (예시) `eslint-plugin-<plugin-name>` 이 플러그인에서 제공하는 config가 `recommended`이면,
  • .eslintrc 파일에 작성되는 내용은 "extends": ["plugin:<plugin-name>/recommended"]
• plugin에서 자체적으로 제공하는 config

중간 요약 

(내가 파악한 내용)

plugin: 기본 eslint 규칙 외에 이런 규칙들을 제공합니다~ 다만 규칙은 직접 작성하셔야 합니다~

config: 규칙 묶음을 제공해서 일일히 규칙을 작성하는 수고를 덜어드립니다~

 

`eslint-plugin-react`의 경우 다음의 3가지의 config를 제공한다. `recommended` `all` `jsx-runtime`

 

 

https://eslint.org/docs/latest/use/configure/configuration-files#extending-configuration-files

 

https://stackoverflow.com/questions/53189200/whats-the-difference-between-plugins-and-extends-in-eslint

 

https://prateeksurana.me/blog/difference-between-eslint-extends-and-plugins/

 

eslint-plugin-react의 config파일 중 recommended

https://github.com/jsx-eslint/eslint-plugin-react/blob/master/configs/recommended.js

files

files: ["src/**/*.js"]

• src디렉토리에 있는 파일을 지정하여 린트 적용

ignores

ignores: ["**/*.config.js"]

• config.js 파일을 제외

root

 현재 터미널의 위치에서부터 상위 폴더로 이동하며 설정 파일을 찾게 된다. 그런데, root: true이면 현재가 루트 경로라고 판단

env

• node 노드 환경에서 실행할 때
• browser 브라우저 환경에서 실행할 때

parser

• "espree"(default) JavaScript 구문 분석기
• "esprima"
• "babel-eslint" Babel이 포함된 프로젝트에서 사용
• "@typescript-eslint/parser" TypeScript를 사용하는 경우

 

overrides

• 배열로 위의 내용(객체)들을 나열
• 확장자별 설정을 다르게 세팅할 수 있도록 하는 것 같다

overrides:[
  {
    files:"**/*.(js|jsx)",
    parser,
    plugins
    extends,
    rules, 
    ...
  },
  {
    files: "**/*.(ts|tsx)",
    parser,
    plugins
    extends,
    rules,
    ...
  }
]

 

https://www.npmjs.com/search?q=eslint-plugin-react