@removify/eslint-config v1.3.5
ESLint-Config-Removify
- ESLint-Config-Removify
- Install
- Create config file
- Add script for package.json
- VS Code support (auto fix)
- View what rules are enabled
- Formatters
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.
Install
pnpm i -D eslint eslint-config-removify
Create config file
With "type": "module"
in package.json
(recommended):
// eslint.config.js
import removify from 'eslint-config-removify';
export default removify();
With CJS:
// eslint.config.js
const removify = require('eslint-config-removify').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('eslint-config-removify').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.
Add script for package.json
For example:
{
"scripts": {
"lint": "eslint .",
"lint:fix": "eslint . --fix"
}
}
VS Code support (auto fix)
Install VS Code ESLint extension
Add the following settings to your .vscode/settings.json
:
{
// Enable the ESlint flat config support
"eslint.experimental.useFlatConfig": true,
// 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" },
{ "rule": "format/*", "severity": "off" },
{ "rule": "*-indent", "severity": "off" },
{ "rule": "*-spacing", "severity": "off" },
{ "rule": "*-spaces", "severity": "off" },
{ "rule": "*-order", "severity": "off" },
{ "rule": "*-dangle", "severity": "off" },
{ "rule": "*-newline", "severity": "off" },
{ "rule": "*quotes", "severity": "off" },
{ "rule": "*semi", "severity": "off" }
],
// Enable eslint for all supported languages
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"vue",
"html",
"markdown",
"json",
"jsonc",
"yaml",
"toml"
]
}
View what rules are enabled
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
Formatters
!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 'eslint-config-removify';
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'
}
});