Flat ESLint config for JavaScript, TypeScript, React.
- Format with Eslint.
- Designed to work with TypeScript, React out-of-box.
- Sort imports,
package.json
,tsconfig.json
... - ESLint Flat config, compose easily!
- Reasonable defaults, best practices, only one-line of config
npm i -D @rubiin/eslint-config
Require Node.js >= 16
With "type": "module"
in package.json
(recommended):
// eslint.config.js
import rubiin from "@rubiin/eslint-config";
export default await rubiin();
With CJS:
// eslint.config.js
const rubiin = require("@rubiin/eslint-config").default;
module.exports = rubiin();
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
:
{
// 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": false
},
// Silent the stylistic rules in you IDE, but still auto fix them
"eslint.rules.customizations": [
{ "rule": "style/*", "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"
]
}
// eslint.config.js
import rubiin from "@rubiin/eslint-config";
export default await rubiin({
// Enable stylistic formatting rules
// stylistic: true,
// Or customize the stylistic rules
stylistic: {
indent: 2, // 4, or 'tab'
quotes: "single", // or 'double'
},
// TypeScript and Vue are auto-detected, you can also explicitly enable them:
typescript: true,
vue: true,
// Disable jsonc and yaml support
jsonc: false,
yaml: false,
// `.eslintignore` is no longer supported in Flat config, use `ignores` instead
ignores: [
"./fixtures",
// ...globs
]
});
{
"eslint.experimental.useFlatConfig": true
}
Comparing to @antfu/eslint-config
Most of the rules are the same, but there are some differences:
- Supports react as well as vue
- Adds deprecation plugin
- More stricter rules.