ESLint Config
에디터 & CI 통합
VS Code, Neovim, 에디터 전용 비활성화, lint-staged를 통한 pre-commit 훅.
에디터 & CI 통합
VS Code
VS Code ESLint 확장을 설치하고 .vscode/settings.json에 다음을 추가하세요:
.vscode/settings.json
{
// ESLint가 포매팅을 담당하도록 Prettier와 formatOnSave 비활성화
"prettier.enable": false,
"editor.formatOnSave": false,
// 저장 시 자동 수정
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit",
"source.organizeImports": "never"
},
// Problems 패널에서 스타일 규칙은 조용히 하되 여전히 자동 수정
"eslint.rules.customizations": [
{ "rule": "style/*", "severity": "off", "fixable": true },
{ "rule": "format/*", "severity": "off", "fixable": true },
{ "rule": "*-indent", "severity": "off", "fixable": true },
{ "rule": "*-spacing", "severity": "off", "fixable": true },
{ "rule": "*-spaces", "severity": "off", "fixable": true },
{ "rule": "*-order", "severity": "off", "fixable": true },
{ "rule": "*-dangle", "severity": "off", "fixable": true },
{ "rule": "*-newline", "severity": "off", "fixable": true },
{ "rule": "*quotes", "severity": "off", "fixable": true },
{ "rule": "*semi", "severity": "off", "fixable": true }
],
// 지원하는 모든 언어에서 ESLint 실행
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"vue",
"html",
"markdown",
"json",
"jsonc",
"yaml",
"toml",
"xml",
"gql",
"graphql",
"astro",
"svelte",
"css",
"less",
"scss",
"pcss",
"postcss"
]
}
rules.customizations 블록이 핵심 포인트입니다: 스타일 규칙은 수정 가능한 상태를 유지하므로 저장 시 여전히 재포매팅되지만, 관심 없는 경고로 Problems 패널을 어지럽히지 않습니다.
Neovim
Neovim에서 저장 시 포맷팅을 받는 몇 가지 방법:
nvim-lspconfig
내장 EslintFixAll 명령을 BufWritePre에서 트리거하세요:
lspconfig.eslint.setup({
on_attach = function(client, bufnr)
vim.api.nvim_create_autocmd('BufWritePre', {
buffer = bufnr,
command = 'EslintFixAll',
})
end,
})
대안
conform.nvim— ESLint를formatter로 사용하는 포매터 러너none-ls.nvim— null-ls 프로토콜을 통해 ESLint 노출nvim-lint— 가벼운 린터 러너
에디터 전용 비활성화
ESLint가 코드 에디터 안에서 실행될 때, 일부 규칙은 에디터가 작성 중인 코드를 공격적으로 다시 쓰지 않도록 수정 불가(non-fixable) 로 리포트됩니다:
prefer-consttest/no-only-testsunused-imports/no-unused-importspnpm/json-enforce-catalog,pnpm/json-prefer-workspace-settings,pnpm/json-valid-catalog
이 규칙들은 에디터에서 여전히 리포트되지만 자동 수정되지 않습니다. 터미널에서 eslint를 실행하거나 Lint Staged를 통해 실행될 때는 정상적으로 동작합니다.
동기: 방금 붙여넣은 미사용 import가 에디터 자동 저장 순간 사라져서는 안 됩니다. 에디터와 CLI에서 동일한 동작을 원한다면 opt-out 할 수 있습니다:
eslint.config.ts
import pleaseai from '@pleaseai/eslint-config'
export default pleaseai({
isInEditor: false,
})
Lint Staged
변경된 파일에 pre-commit 훅으로 ESLint를 실행해서 잘못된 코드가 main에 도달하지 못하게 하세요:
package.json
{
"simple-git-hooks": {
"pre-commit": "bun lint-staged"
},
"lint-staged": {
"*": "eslint --fix"
}
}
bun add -D lint-staged simple-git-hooks
bunx simple-git-hooks
pnpm add -D lint-staged simple-git-hooks
pnpm exec simple-git-hooks
npm install -D lint-staged simple-git-hooks
npx simple-git-hooks
두 번째 명령이 .git/hooks 디렉토리에 훅을 연결합니다 — 클론당 한 번만 실행하면 됩니다.