Inspired by @antfu/eslint-config
- Support Vue 2 & 3
- Single quotes, no semi
- Auto fix for formatting
- Also lint for TypeScript, json
- Order tailwindcss classnames
- Only one-line of config
pnpm add -D eslint @leedomjs/eslint-config{
"extends": "@leedomjs"
}For example:
{
"scripts": {
"lint": "eslint .",
"lint:fix": "eslint . --fix"
}
}Install VS Code ESLint extension
Add the following settings to your settings.json:
{
"editor.formatOnSave": false,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
"source.organizeImports": false
},
// The following is optional.
// It's better to put under project setting `.vscode/settings.json`
// to avoid conflicts with working with different eslint configs.
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"vue",
"html",
"vue-html",
"jsx",
"json",
"jsonc",
"json5",
"markdown",
"yaml"
]
}If you want to apply lint and auto-fix before every commit, you could do this:
1. husky + lint-staged
pnpm dlx husky-init && pnpm install -D husky lint-stagedand add the following to your package.json:
{
"scripts": {
// This script will be added automatically when husky is installed successfully.
"prepare": "husky install"
},
"lint-staged": {
"*": "eslint --fix"
}
}then add the following to your pre-commit:
.husky/pre-commit
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
# remove the default script
# npx test
# add this script
npx lint-stagedIf your project is small-sized, and you need quickly set up hooks and forget about it, simple-git-hook will be a good choice.
pnpm install -D simple-git-hooks lint-stagedand add the following to your package.json:
{
"simple-git-hooks": {
"pre-commit": "npx lint-staged"
},
"lint-staged": {
"*": "eslint . --fix"
}
}then run the CLI script to update the git hooks with the commands from the config:
# [Optional] These 2 steps can be skipped for non-husky users
git config core.hooksPath .git/hooks/
rm -rf .git/hooks
# Update ./git/hooks
npx simple-git-hooksYou can override the rules in your .eslintrc file.
{
"extends": "@leedomjs",
"rules": {
// your rules...
}
}No framework used, just for javascript, you can also use the package @leedomjs/eslint-config-basic
// .eslintrc
{
"extends": "@leedomjs/eslint-config-basic"
}If you are using tailwindcss , you can also add the package @leedomjs/eslint-config-tailwindcss which depend on eslint-plugin-tailwindcss , so you don't need to add prettier-plugin-tailwindcss and prettier extra.
// .eslintrc
{
"extends": [
"@leedomjs/eslint-config-tailwindcss",
...
]
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent