- 📝 Use single quotes, not semicolons.
- 🛠️ Automatically fix formatting (designed to be used standalone, without Prettier).
- 🎨 Designed to work with TypeScript and Vue out-of-the-box.
- 🔍 Linting also available for JSON, YAML, and Markdown.
- 📥 Imports are sorted and dangling commas are allowed.
- 🌟 Includes reasonable defaults and best practices, with only one line of configuration.
- 📌 Minimal for readability, stable for diffs.
pnpm add -D eslint @suxiong/eslint-config
{
"extends": "@suxiong"
}
You don't need .eslintignore normally as it has been provided by the preset.
For example:
{
"scripts": {
"lint": "eslint .",
"lint:fix": "eslint . --fix"
}
}
Install VS Code ESLint extension and create .vscode/settings.json
{
"prettier.enable": false,
"editor.formatOnSave": false,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
Type aware rules are enabled when a tsconfig.eslint.json
is found in the project root, which will introduce some stricter rules into your project. If you want to enable it while have no tsconfig.eslint.json
in the project root, you can change tsconfig name by modifying ESLINT_TSCONFIG
env.
// .eslintrc.js
process.env.ESLINT_TSCONFIG = 'tsconfig.json'
module.exports = {
extends: '@suxiong'
}
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": "pnpm lint-staged"
},
"lint-staged": {
"*": "eslint --fix"
}
}
and then
npm i -D lint-staged simple-git-hooks
This config does NOT lint CSS. I personally use UnoCSS or tailwindcss so I don't write CSS. If you still prefer CSS, you can use stylelint for CSS linting.
Sure, you can override the rules in your .eslintrc
file.
{
"extends": "@antfu",
"rules": {
// your rules...
}
}
Or you can always fork this repo and make your own.
MIT License © 2023-PRESENT Suxiong