ESLint config for @kazupon
- Flat configuration via vite flavor
defineConfig
- Support built-in preset configurations
javascript
comments
typescript
imports
jsdoc
regexp
promise
unicorn
prettier
vue
react
svelte
vitest
jsonc
yml
toml
markdown
- Support primitive eslint flat configuration
- Support overrides for built-in configurations
rules
npm i -D @kazupon/eslint-config
Add create eslint.config.mjs
in your project root:
// eslint.config.mjs
import { defineConfig, javascript } from '@kazupon/eslint-config'
// You can put flat configurations (`Linter.Config | Linter.Config[]`)
export default defineConfig(
// built-in configurations
javascript({
// override rules
rules: {
'no-console': 'error'
}
}),
// You can put primitive flat configuration, and override it!
{
ignores: ['**/dist/**' /* something ignores ... */]
}
)
Important
Support flat configuration only, not supported Legacy style (.eslintrc
)
For example:
{
"scripts": {
"lint": "eslint .",
"lint:fix": "eslint . --fix"
}
}
You can lint and auto fix.
Install VS Code ESLint extension.
Add the following settings to your .vscode/settings.json
:
{
// Auto fix
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
},
// Enable eslint for supported languages
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"vue",
"svelte",
"json",
"jsonc",
"json5",
"markdown",
"yaml",
"toml"
],
// Enable flat configuration
"eslint.useFlatConfig": true
}
The following built-in preset configurations are supported:
Configuration | Powered by eslint plugin or package | Need to install eslint plugin or package? |
---|---|---|
javascript |
@eslint/js |
no (built-in) |
comments |
@eslint-community/eslint-plugin-eslint-comments |
no (built-in) |
typescript |
typescript-eslint |
yes |
imports |
eslint-plugin-import , eslint-plugin-unused-imports |
yes |
jsdoc |
eslint-plugin-jsdoc |
yes |
regexp |
eslint-plugin-regexp |
yes |
promise |
eslint-plugin-promise |
yes |
unicorn |
eslint-plugin-unicorn |
yes |
prettier |
eslint-config-prettier |
yes |
vue |
eslint-plugin-vue , eslint-plugin-vue-composable , eslint-plugin-vue-scoped-css , eslint-plugin-vuejs-accessibility ) |
yes |
react |
eslint-plugin-react , eslint-plugin-react-hooks , eslint-plugin-react-refresh |
yes |
svelte |
eslint-plugin-svelte |
yes |
vitest |
@vitest/eslint-plugin |
yes |
jsonc |
eslint-plugin-jsonc |
yes |
yml |
eslint-plugin-yml |
yes |
toml |
eslint-plugin-toml |
yes |
markdown |
@eslint/markdown |
yes |
You can use import
syntax:
import { defineConfig, javascript, typescript } from '@kazupon/eslint-config'
export default defineConfig(
javascript(/* ... */),
typescript(/* ... */)
// ...
)
⚖️ Comparing to @antfu/eslint-config
and others
- Respect the recommended config by the eslint plugin in built-in configurations
- Customization is overriding it only
This eslint config is inspired by:
@antfu/eslint-config
, created by Anthony Fu@sxzz/eslint-config
, created by Kevin Deng 三咲智子- Vite, created by Evan You and Vite community
Thank you! ❤️