기존에는 eslintrc 로 세팅을 하다가 eslint.config.js 로 세팅하는 방법을 알아보기 위해 작성하였다.
eslintrc 와 eslint.config.js 의 차이점
| 항목 | .eslintrc | eslint.config.js |
|---|---|---|
| 도입 시기 | 전통적인 방식 | ESLint 8.0 이후 Flat Config에서 사용 |
| 파일 포맷 | JSON, YAML, JS | JavaScript (JS) |
| 동적 설정 가능 여부 | 제한적 (JS 사용 시 일부 가능) | 완전한 JavaScript 지원 |
| 사용성 | 간단하고 직관적 | 더 복잡하지만 유연함 |
| 성능 | 기존 방식, 성능이 최적화되지 않음 | 더 나은 성능 제공 |
언제 무엇을 써야 할까?
.eslintrc: 기존 프로젝트에서 사용하는 경우 계속 사용할 수 있으며, 간단한 설정에는 충분합니다.
eslint.config.js: 새로운 프로젝트에서 더 복잡하거나 동적인 설정이 필요할 경우 사용을 권장합니다. Flat Config를 통해 ESLint의 최신 기능을 활용할 수 있습니다.
eslint.config.js 기본세팅
import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import tseslint from 'typescript-eslint'
export default tseslint.config(
{ ignores: ['dist'] },
{
extends: [js.configs.recommended, ...tseslint.configs.recommended],
files: ['**/*.{ts,tsx}'],
languageOptions: {
ecmaVersion: 2020,
globals: globals.browser,
},
plugins: {
'react-hooks': reactHooks,
'react-refresh': reactRefresh,
},
rules: {
...reactHooks.configs.recommended.rules,
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
},
)import
import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import tseslint from 'typescript-eslint'-
@eslint/js: ESLint 기본 JavaScript 설정 패키지입니다. JavaScript 파일에 대한 추천 구성(js.configs.recommended)을 제공합니다. -
globals: 전역 변수 설정을 위한 패키지입니다. 예: 브라우저 환경(globals.browser)에 적합한 전역 변수 정의. -
eslint-plugin-react-hooks: React의 Hooks 규칙을 위한 ESLint 플러그인입니다. Hook의 올바른 사용을 보장합니다. -
eslint-plugin-react-refresh: React Fast Refresh와 관련된 규칙을 제공하는 ESLint 플러그인입니다. 개발 환경에서 핫 리로딩을 개선하는 데 사용됩니다. -
typescript-eslint: TypeScript 파일에 대한 ESLint 지원을 제공하는 패키지입니다.
주요구성
ignores
{ ignores: ['dist'] },디렉토리의 파일을 ESLint 검사에서 제외합니다. 주로 빌드 출력 파일을 대상으로 합니다.
extends
extends: [js.configs.recommended, ...tseslint.configs.recommended],ESLint의 기본 추천 규칙과 TypeScript ESLint의 추천 규칙을 확장합니다.
-
js.configs.recommended: ESLint 기본 JavaScript 규칙 집합. -
tseslint.configs.recommended: TypeScript 코드에 적합한 추천 규칙 집합.
files
files: ['**/*.{ts,tsx}']ESLint가 검사할 파일 패턴을 정의합니다.
*/.{ts,tsx}: 모든 디렉토리 내의 .ts 및 .tsx 파일을 대상으로 합니다.
languageOptions
languageOptions: {
ecmaVersion: 2020,
globals: globals.browser,
}-
ecmaVersion: 2020: ECMAScript 2020을 지원합니다. -
globals: globals.browser: 브라우저 환경에서 사용되는 전역 변수(window, document 등)를 허용합니다.
plugins
plugins: {
'react-hooks': reactHooks,
'react-refresh': reactRefresh,
}react-hooks: React Hooks의 규칙을 검사합니다.react-refresh: React Fast Refresh 관련 규칙을 검사합니다.
rules
rules: {
...reactHooks.configs.recommended.rules,
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
}...reactHooks.configs.recommended.rules: React Hooks의 추천 규칙을 적용합니다.
예:
react-hooks/rules-of-hooks(Hook의 규칙 준수) 및 react-hooks/exhaustive-deps(의존성 배열 검사) 규칙.
react-refresh/only-export-components: React Refresh와 관련된 규칙입니다.
설정:
warn: 이 규칙이 위반되면 경고를 표시합니다.
allowConstantExport: true: 상수를 기본 내보내기로 설정하는 것을 허용합니다.
예: export default MyComponent는 규칙 위반이 아니게 설정됩니다.
🕵️ 터미널에서 npx eslint . 로 하면 정상적으로 에러를 찾아서 검사를 하는데 에디터에서 에러 표시가 나지 않았다.
1️⃣ Ctrl + Shift + P
2️⃣ >Preferences: Open User Settings (JSON)
3️⃣ 현재 내 설정..
{
"editor.stickyScroll.enabled": false,
"git.autofetch": true,
"diffEditor.ignoreTrimWhitespace": false,
"github.copilot.editor.enableAutoCompletions": true,
"[vue]": {
"editor.defaultFormatter": "Vue.volar"
},
"editor.defaultFormatter": "esbenp.prettier-vscode",
"github.copilot.advanced": {},
"sonarlint.rules": {
"Web:AvoidCommentedOutCodeCheck": {
"level": "off"
},
"Web:S6850": {
"level": "off"
}
},
"git.openRepositoryInParentFolders": "never",
"eslint.execArgv": null,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
}
}
4️⃣ "source.fixAll.eslint": "explicit" 는 true 로 바꾸고
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},이 부분을 넣어준다.
"eslint.experimental.useFlatConfig": true,
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"vue"
],
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.formatOnSave": true-
eslint.experimental.useFlatConfig: Flat Config를 사용하는 경우 필요하다. 설정이 없으면 VS Code가 eslint.config.js를 인식하지 못할 수 있다. -
eslint.validate: ESLint가 .tsx 파일을 검사할 수 있도록 "typescriptreact"를 명시적으로 포함한다. -
[typescriptreact]의 기본 포맷터: TypeScript React 파일(.tsx)의 기본 포맷터를 Prettier로 설정한다. 하지만 ESLint의 규칙을 우선 적용하도록 source.fixAll.eslint를 활성화한다. -
editor.formatOnSave: 저장 시 자동 포맷팅을 활성화합니다.
현재 적용된 eslint.config.js
import js from '@eslint/js'
import globals from 'globals'
import react from 'eslint-plugin-react'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import jsxA11y from 'eslint-plugin-jsx-a11y'
import importPlugin from 'eslint-plugin-import'
import eslintPlugin from '@typescript-eslint/eslint-plugin'
import parser from '@typescript-eslint/parser'
export default [
{
ignores: [
'dist',
'node_modules',
'lib',
'idea',
],
},
{
files: ['**/*.{ts,tsx}'],
languageOptions: {
ecmaVersion: 2020,
globals: globals.browser,
parser: parser
},
plugins: {
'@typescript-eslint': eslintPlugin,
'react': react,
'react-hooks': reactHooks,
'react-refresh': reactRefresh,
'jsx-a11y': jsxA11y,
'import': importPlugin,
},
settings: {
react: {
version: 'detect',
},
},
rules: {
...js.configs.recommended.rules,
...eslintPlugin.configs.recommended.rules,
...react.configs.recommended.rules,
...reactHooks.configs.recommended.rules,
...jsxA11y.configs.recommended.rules,
'quotes': ['error', 'single'],
"no-unused-vars": "off",
'react/react-in-jsx-scope': 'off',
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
'indent': ['error', 'tab', {
'SwitchCase': 1,
'ignoredNodes': ['TemplateLiteral'],
}],
'react/jsx-indent': ['error', 'tab'],
'react/jsx-indent-props': ['error', 'tab'],
},
},
]