ESLint Flat config for JavaScript, TypeScript, Vue, UnoCSS
- Single quotes, no semi
- Auto fix for formatting (aimed to be used standalone without Prettier)
- Designed to work with TypeScript, Vue out-of-box
- Lints also for json, yaml, toml, markdown
- Sorted imports, dangling commas
- Reasonable defaults, best practices, only one-line of config
- ESLint Flat config, compose easily!
- Using ESLint Stylistic
- Respects
.gitignore
by default
pnpm i -D eslint @byyuurin/eslint-config
With "type": "module"
in package.json
(recommended):
// eslint.config.js
import byyuurin from '@byyuurin/eslint-config'
export default byyuurin()
With CJS:
// eslint.config.js
const byyuurin = require('@byyuurin/eslint-config').default
module.exports = byyuurin()
Combined with legacy config:
// eslint.config.js
const byyuurin = require('@byyuurin/eslint-config').default
const { FlatCompat } = require('@eslint/eslintrc')
const compat = new FlatCompat()
module.exports = byyuurin(
{
ignores: [],
},
// Legacy config
...compat.config({
extends: [
'eslint:recommended',
// Other extends...
],
}),
// Other flat configs...
)
Note that
.eslintignore
no longer works in Flat config
For example:
{
"scripts": {
"lint": "eslint .",
"lint:fix": "eslint . --fix"
}
}
Important
Running npx eslint
, you should be prompted to install the required dependencies.
The first time you enable formatters, you need to run the command again.
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"
},
// Enable the ESlint flat config support
"eslint.experimental.useFlatConfig": true,
// Silent the stylistic rules in you IDE, but still auto fix them (if set to "off")
"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",
"markdown",
"json",
"jsonc",
"yaml",
"toml",
"vue",
"gql",
"graphql"
]
}
You can configure each integration individually, for example:
// eslint.config.js
import byyuurin from '@byyuurin/eslint-config'
export default byyuurin({
// 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',
'**/fixtures',
// ...globs
],
})
The factory function also accepts any number of arbitrary custom config overrides:
// eslint.config.js
import byyuurin from '@byyuurin/eslint-config'
export default byyuurin(
{
// Configures for byyuurin's config
},
// From the second arguments they are ESLint Flat Configs
// you can have multiple configs
{
files: ['**/*.ts'],
rules: {},
},
{
rules: {},
},
)
Since flat config requires us to explicitly provide the plugin names(instead of the mandatory convention from npm package name), we renamed some plugins to make the overall scope more consistent and easier to write.
New Prefix | Original Prefix | Source Plugin |
---|---|---|
import/* |
import-x/* |
eslint-plugin-import-x |
node/* |
n/* |
eslint-plugin-n |
yaml/* |
yml/* |
eslint-plugin-yml |
ts/* |
@typescript-eslint/* |
@typescript-eslint/eslint-plugin |
style/* |
@stylistic/* |
@stylistic/eslint-plugin |
When you want to override rules, or disable them inline, you need to update to the new prefix:
-// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+// eslint-disable-next-line ts/consistent-type-definitions
type foo = { bar: 2 }
Since v1.1.0, this preset will automatically rename the plugins also for your custom configs. You can use the original prefix to override the rules directly.
You can change the rules via the overrides
option in each integration:
// eslint.config.js
import byyuurin from '@byyuurin/eslint-config'
export default byyuurin({
vue: {
overrides: {
'vue/operator-linebreak': ['error', 'before'],
},
},
typescript: {
overrides: {
'ts/consistent-type-definitions': ['error', 'interface'],
},
},
yaml: {
overrides: {
// ...
},
},
})
Use external formatters to format files that ESLint cannot handle yet (.css
, .html
, etc).
Powered by eslint-plugin-format.
// eslint.config.js
import byyuurin from '@byyuurin/eslint-config'
export default byyuurin({
formatters: {
/**
* Format CSS, LESS, SCSS files, also the `<style>` blocks in Vue
*/
css: true,
/**
* Format HTML files
* Using custom stylistic rules
*/
html: {
indent: 4,
quotes: 'double',
semi: true,
},
/**
* Format Markdown files
* Supports Prettier and dprint
* By default uses Prettier
*/
markdown: {
formatter: 'dprint',
},
},
})
Running npx eslint
should prompt you to install the required dependencies, otherwise, you can install them manually:
npm i -D eslint-plugin-format
If you want to apply lint and auto-fix before every commit, you can add the following to your package.json
:
{
"simple-git-hooks": {
"pre-commit": "npm run lint-staged"
},
"lint-staged": {
"*": "eslint --fix"
}
}
and then
npm i -D lint-staged simple-git-hooks
# to active the hooks
npx simple-git-hooks
@eslint/config-inspector, built by Anthony Fu, is a visual tool designed to help you view and understand your ESLint Flat config
Go to your project root that contains eslint.config.js
and run:
npx @eslint/config-inspector