This is a flat config for ESLint that we use in our projects, this is a fork of @antfu/eslint-config that fits our demands better.
pnpm i -D eslint @removify/eslint-config
With "type": "module"
in package.json
(recommended):
// eslint.config.js
import removify from '@removify/eslint-config';
export default removify();
With CJS:
// eslint.config.js
const removify = require('@removify/eslint-config').default;
module.exports = removify();
[!TIP] ESLint only detects
eslint.config.js
as the flat config entry, meaning you need to puttype: module
in yourpackage.json
or you have to use CJS ineslint.config.js
. If you want explicit extension like.mjs
or.cjs
, or eveneslint.config.ts
, you can installeslint-ts-patch
to fix it.
Combined with legacy config:
// eslint.config.js
const removify = require('@removify/eslint-config').default;
const { FlatCompat } = require('@eslint/eslintrc');
const compat = new FlatCompat();
module.exports = removify(
{
ignores: [],
},
// Legacy config
...compat.config({
extends: [
'eslint:recommended',
// Other extends...
],
})
// Other flat configs...
);
Note that
.eslintignore
no longer works in Flat config, see customization for more details.
For example:
{
"scripts": {
"lint": "eslint .",
"lint:fix": "eslint . --fix"
}
}
Install VS Code ESLint extension
Add the following settings to your .vscode/settings.json
:
{
// Disable the default formatter, use eslint instead
"prettier.enable": false,
"editor.formatOnSave": false,
// Auto fix
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit",
"source.organizeImports": "never"
},
// Silent the stylistic rules in you IDE, 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 }
],
// Enable eslint for all supported languages
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"vue",
"html",
"markdown",
"json",
"jsonc",
"yaml",
"toml",
"xml",
"gql",
"graphql",
"astro",
"css",
"less",
"scss",
"pcss",
"postcss"
]
}
For neovim lsp setup.
local 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 },
}
local lspconfig = require('lspconfig')
lspconfig.eslint.setup(
{
filetypes = {
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"vue",
"html",
"markdown",
"json",
"jsonc",
"yaml",
"toml",
"xml",
"gql",
"graphql",
"astro",
"css",
"less",
"scss",
"pcss",
"postcss"
},
settings = {
rulesCustomizations = customizations,
},
}
)
I built a visual tool to help you view what rules are enabled in your project and apply them to what files, eslint-flat-config-viewer
Go to your project root that contains eslint.config.js
and run:
npx eslint-flat-config-viewer
[!WARNING] Experimental feature, changes might not follow semver.
Use external formatters to format files that ESLint cannot handle yet (.css
, .html
, etc). Powered by eslint-plugin-format
.
// eslint.config.js
import removify from '@removify/eslint-config';
export default removify({
formatters: {
/**
* Format CSS, LESS, SCSS files, also the `<style>` blocks in Vue
* By default uses Prettier
*/
css: true,
/**
* Format HTML files
* By default uses Prettier
*/
html: true,
/**
* Format Markdown files
* Supports Prettier and dprint
* By default uses Prettier
*/
markdown: 'prettier'
}
});
In this configuration, prettier is used as an extension to format filetypes like xml
, css
and html
.
For javascript
/vue
we don't use prettier at all, because prettier is so strict in for example line length which I think it does not matter and will cause a lot of unnecessary diffs in PRs/commits. Sure you can set ignore white spaces to true, but when comes to refactor or merge conflicts it's just painful. Plus to use prettier with eslint, you need extra configurations that will make the format process even slower (eslint alone is slow enough).