talljack-eslint-config
v0.2.6
Published
Talljack's eslint config
Downloads
525
Readme
talljack-eslint-config
Talljack's ESLint config
Why write it?
When ESLint upgrades to flat config(ESLint 9), my all projects need to update the ESLint config file, so I want to write my config to be reused in all projects.
How to use it?
pnpm i -D eslint talljack-eslint-config
And create eslint.config.js
(you need to set package.json's type
to module
) like this:
// eslint.config.js
import createEslintConfig from 'talljack-eslint-config'
export default createEslintConfig()
Add ESLint scripts for package.json
{
"scripts": {
"lint": "eslint .",
"fix": "eslint . --fix"
}
}
VS Code support
Install VS Code ESLint extension
Add the following settings to your .vscode/settings.json
{
"eslint.experimental.useFlatConfig": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit",
"source.organizeImports": "never"
},
"editor.formatOnSave": false,
"eslint.validate": [
"javascript",
"typescript",
"javascriptreact",
"typescriptreact",
"vue",
"html",
"markdown",
"json",
"jsonc",
"json5",
"astro"
]
}
Customize it
Basic usage
Use all of the options in the config file.
// eslint.config.js
import createEslintConfig from 'talljack-eslint-config'
export default createEslintConfig({
formatter: true,
jsonc: true,
markdown: true,
typescript: true,
vue: true,
yaml: true,
})
React
To use the React ESLint config, you can turn it on.
// eslint.config.js
import createEslintConfig from 'talljack-eslint-config'
export default createEslintConfig({
react: true,
})
Vue3
To use the Vue3 ESLint config, you can turn it on.
// eslint.config.js
import createEslintConfig from 'talljack-eslint-config'
export default createEslintConfig({
vue: true,
})
Markdown
To use the Markdown ESLint config, you can turn it on.
// eslint.config.js
import createEslintConfig from 'talljack-eslint-config'
export default createEslintConfig({
markdown: true,
})
Jsonc
To use the Jsonc ESLint config, you can turn it on.
// eslint.config.js
import createEslintConfig from 'talljack-eslint-config'
export default createEslintConfig({
jsonc: true,
})
Yaml
To use the Yaml ESLint config, you can turn it on.
// eslint.config.js
import createEslintConfig from 'talljack-eslint-config'
export default createEslintConfig({
yaml: true,
})
Astro
To use the Astro ESLint config, you can turn it on(you need to install eslint-plugin-astro
).
pnpm add -D eslint-plugin-astro
// eslint.config.js
import createEslintConfig from 'talljack-eslint-config'
export default createEslintConfig({
astro: true,
})
Solid
To use the Solid ESLint config, you can turn it on(you need to install eslint-plugin-solid
).
pnpm add -D eslint-plugin-solid
// eslint.config.js
import createEslintConfig from 'talljack-eslint-config'
export default createEslintConfig({
solid: true,
})
Test
To use the Test ESLint config, you can turn it on.
// eslint.config.js
import createEslintConfig from 'talljack-eslint-config'
export default createEslintConfig({
test: true,
})
Formatters
To use the Formatters ESLint config, you can turn it on.
// eslint.config.js
import createEslintConfig from 'talljack-eslint-config'
export default createEslintConfig({
formatters: true,
})
Stylistic
To use the Stylistic ESLint config, you can turn it on.
It's default true
// eslint.config.js
import createEslintConfig from 'talljack-eslint-config'
export default createEslintConfig({
stylistic: true,
})
Type-aware rules
you can read more type-aware here.
// eslint.config.js
import createEslintConfig from 'talljack-eslint-config'
export default createEslintConfig({
typescript: {
tsconfigPath: 'tsconfig.json',
},
})
Lint Staged
If you want to apply lint and auto-fix before every commit, you can add the following to your package.json
you need to install lint-staged
and simple-git-hooks
pnpm i -D lint-staged simple-git-hooks
npx simple-git-hooks
then
// package.json
{
"simple-git-hooks": {
"pre-commit": "pnpm lint-staged"
},
"lint-staged": {
"*": "eslint --fix"
}
}