ESLint: 구성 가능한 JavaScript 린터이다.
린트 : 린트(lint) 또는 린터(linter)는 소스 코드를 분석하여 프로그램 오류, 버그, 스타일 오류, 의심스러운 구조체에 표시(flag)를 달아놓기 위한 도구들을 가리킨다.
규칙
- 코드가 특정 기대치를 충족하는지 확인하고, 해당 기대치를 충족하지 못하는 경우 수행할 작업을 확인한다.
- 다른 사람이 플러그인을 사용하여 만든 규칙을 사용할 수도 있다.
ex) semi규칙 -> 항상 세미콜론을 요구하거나 명령문이 세미콜론으로 끝나지 않도록 규칙을 설정할 수 있다.
구성파일
- eslint.config.js
- eslint.config.mjs
- eslint.config.cjs
참고
"type":"module”로 지정하지 않은 경우 package.jsoneslint.config.js와 같은 CommonJS 형식이어야 한다.
구성 객체
- env : 설정 환경에 대한 값
- root : 현재 디렉토리의 ESLint 설정 파일이 최상위 설정 파일임을 지정하는 옵션
- name : 구성 개체의 이름
- files : 구성 객체가 적용되어야 하는 파일
- ignores: 구성 객체가 적용되지 않아야 하는 파일
- languageOptions: Linting을 위해 JavaScript를 구성하는 방법과 관련된 설정이 포함된 개체
- ecmaVersion: 지원할 ECMAScript 버전
- sourceType: JavaScript 소스 코드의 유형
- globals : Linting 중에 전역 범위에 추가되어야 하는 추가 개체를 지정하는 개체
- parserparse() : 메소드 또는 메소드를 포함하는 객체
- parserOptions: 파서의 parse()또는 메소드 에 직접 전달되는 추가 옵션을 지정하는 객체
- linterOptions : 린팅 프로세스와 관련된 설정이 포함된 개체
- noInlineConfig : 인라인 구성이 허용되는지 여부
- reportUnusedDisableDirectives: 사용되지 않은 비활성화 및 활성화 지시문을 추적하고 보고해야 하는지 여부와 방법을 나타내는 심각도 문자열
- processorpreprocess() : 메소드를 포함하는 객체 또는 플러그인 내부의 프로세서 이름을 나타내는 문자열
- plugins : 플러그인 개체에 대한 플러그인 이름의 이름-값 매핑을 포함하는 개체
- rules : 구성된 규칙을 포함하는 개체
- settings : 모든 규칙에서 사용할 수 있어야 하는 정보의 이름-값 쌍을 포함하는 개체
- extends : 다른 설정 파일이나 플러그인이 제공하는 미리 정의된 규칙 세트를 현재 설정에 추가하는 옵션
간단 예시
{
"root": true,
"env": {
"browser": true,
"es2020": true
},
"extends": [
"next/core-web-vitals",
"prettier"
],
"ignorePatterns": ["dist", ".eslintrc.cjs"],
"parser": "@typescript-eslint/parser",
"plugins": [
"react-refresh",
"simple-import-sort"
],
"rules": {
"new-cap": "off",
"react/function-component-definition": [
2,
{
"namedComponents": "arrow-function"
}
],
"react/jsx-props-no-spreading": "off",
"import/no-extraneous-dependencies": [
"error",
{
"devDependencies": true
}
],
"@typescript-eslint/no-unused-expressions": "off",
"unused-imports/no-unused-vars": [
"warn",
{
"vars": "all",
"varsIgnorePattern": "^_",
"args": "after-used",
"argsIgnorePattern": "^_"
}
]
},
"parserOptions": {
"ecmaVersion": "latest",
},
"settings": {
"import/resolver": {
"typescript": {}
}
}
}
plugins와 extends의 차이는?
코드를 훑어보다가 extends에서 plugin:import/errors라는 것을 보았는데 extends가 plugins의 확장인 것인가에 대해서 궁금하게 되었다.
요약
plugins: 규칙을 추가만 해줌. 직접 어떤 규칙을 사용할지 선택해야 함.
extends: 미리 정해진 규칙 세트를 한 번에 적용.
출처
