🧹 My Opinionated ESLint Config
This is my opinionated eslint-config
, heavily inspired by Antfu's config. This setup is a combination of the following rules:
-
Javascript
-
Node
-
Import X
-
Unused Imports
-
Promise
-
Security
-
Eslint Comments
-
JSDoc
-
Antfu
-
Drizzle
-
Zod
-
Typescript
-
Stylistic
-
CSS
-
Regexp
-
Perfectionist
-
Unicorn
-
Vitest
-
Json
-
Yaml
-
Toml
-
TailwindCSS*
-
Vue*
-
vue-a11y*
-
vue-i18n*
-
Nuxt*
-
React*
-
React-i18n*
-
Next*
- And more...
*Not enabled by default
-
Install with your favorite package manager:
- pnpm :
pnpm add -D eslint @dethdkn/eslint-config
- npm :
npm i -D eslint @dethdkn/eslint-config
- yarn :
yarn add -D eslint @dethdkn/eslint-config
- bun :
bun add -D eslint @dethdkn/eslint-config
- pnpm :
-
Create a
eslint.config.mjs
in the project root:
// eslint.config.mjs
import dethdkn from '@dethdkn/eslint-config'
export default dethdkn()
- Add lint scripts to
package.json
:
{
"scripts": {
"lint": "eslint .",
"lint:fix": "eslint . --fix"
}
}
- Add the following configuration to
.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" },
{ "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",
"xml",
"gql",
"graphql",
"css",
"less",
"scss",
"pcss",
"postcss"
]
}
tailwind
,vue
,nuxt
,vueI18n
,react
,next
,reactI18n
,i18n
rules can be enabled:
// eslint.config.mjs
import dethdkn from '@dethdkn/eslint-config'
export default dethdkn({ tailwind: true, vue: true, nuxt: true, vueI18n: true, react: true, next: true, reactI18n: true })
Copyright © 2024 Gabriel 'DethDKN' Rosa
This project is under MIT license