Editor & CI Integration
Editor & CI Integration
VS Code
Install the VS Code ESLint extension and add the following to .vscode/settings.json:
{
// Let ESLint handle formatting; disable Prettier and formatOnSave
"prettier.enable": false,
"editor.formatOnSave": false,
// Fix on save
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit",
"source.organizeImports": "never"
},
// Silence stylistic rules in the Problems panel but still auto-fix them
"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 }
],
// Run ESLint on every supported language
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"vue",
"html",
"markdown",
"json",
"jsonc",
"yaml",
"toml",
"xml",
"gql",
"graphql",
"astro",
"svelte",
"css",
"less",
"scss",
"pcss",
"postcss"
]
}
The rules.customizations block is the key insight: stylistic rules stay fixable (so save still reformats) but don't clutter the Problems panel with squiggles you don't care about.
Neovim
A few ways to get format-on-save in Neovim:
nvim-lspconfig
Use the built-in EslintFixAll command and trigger it on BufWritePre:
lspconfig.eslint.setup({
on_attach = function(client, bufnr)
vim.api.nvim_create_autocmd('BufWritePre', {
buffer = bufnr,
command = 'EslintFixAll',
})
end,
})
Alternatives
conform.nvim— formatter runner with ESLint as aformatternone-ls.nvim— exposes ESLint through the null-ls protocolnvim-lint— lightweight linter runner
Editor Specific Disables
When ESLint runs inside a code editor, a handful of rules report as non-fixable so your editor doesn't aggressively rewrite code you're still typing:
prefer-consttest/no-only-testsunused-imports/no-unused-importspnpm/json-enforce-catalog,pnpm/json-prefer-workspace-settings,pnpm/json-valid-catalog
These rules still report in your editor, they just don't auto-fix. When you run eslint in the terminal or through Lint Staged, they behave normally.
Motivation: an unused import you just pasted shouldn't vanish the moment your editor auto-saves. If you'd rather have uniform behaviour across editor and CLI, opt out:
import pleaseai from '@pleaseai/eslint-config'
export default pleaseai({
isInEditor: false,
})
Lint Staged
Run ESLint on changed files as a pre-commit hook so bad code never reaches main:
{
"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
The second command wires the hook into your .git/hooks directory — you only need to run it once per clone.