127 lines
2.9 KiB
Markdown
127 lines
2.9 KiB
Markdown
# @antfu/eslint-config
|
|
|
|
[](https://npmjs.com/package/@antfu/eslint-config)
|
|
|
|
- Single quotes, no semi
|
|
- Auto fix for formatting (aimed to be used standalone **without** Prettier)
|
|
- Designed to work with TypeScript, Vue out-of-box
|
|
- Lint also for json, yaml, markdown
|
|
- Sorted imports, dangling commas
|
|
- Reasonable defaults, best practices, only one-line of config
|
|
- **Style principle**: Minimal for reading, stable for diff
|
|
|
|
## Usage
|
|
|
|
### Install
|
|
|
|
```bash
|
|
pnpm add -D eslint @antfu/eslint-config
|
|
```
|
|
|
|
### Config `.eslintrc`
|
|
|
|
```json
|
|
{
|
|
"extends": "@antfu"
|
|
}
|
|
```
|
|
|
|
> You don't need `.eslintignore` normally as it has been provided by the preset.
|
|
|
|
### Add script for package.json
|
|
|
|
For example:
|
|
|
|
```json
|
|
{
|
|
"scripts": {
|
|
"lint": "eslint .",
|
|
"lint:fix": "eslint . --fix"
|
|
}
|
|
}
|
|
```
|
|
|
|
### Config VS Code auto fix
|
|
|
|
Install [VS Code ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) and create `.vscode/settings.json`
|
|
|
|
```json
|
|
{
|
|
"prettier.enable": false,
|
|
"editor.formatOnSave": false,
|
|
"editor.codeActionsOnSave": {
|
|
"source.fixAll.eslint": true
|
|
}
|
|
}
|
|
```
|
|
|
|
### TypeScript Aware Rules
|
|
|
|
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.
|
|
|
|
```js
|
|
// .eslintrc.js
|
|
process.env.ESLINT_TSCONFIG = 'tsconfig.json'
|
|
|
|
module.exports = {
|
|
extends: '@antfu'
|
|
}
|
|
```
|
|
|
|
### Lint Staged
|
|
|
|
If you want to apply lint and auto-fix before every commit, you can add the following to your `package.json`:
|
|
|
|
```json
|
|
{
|
|
"simple-git-hooks": {
|
|
"pre-commit": "pnpm lint-staged"
|
|
},
|
|
"lint-staged": {
|
|
"*": "eslint --fix"
|
|
}
|
|
}
|
|
```
|
|
|
|
and then
|
|
|
|
```bash
|
|
npm i -D lint-staged simple-git-hooks
|
|
```
|
|
|
|
## FAQ
|
|
|
|
### Prettier?
|
|
|
|
[Why I don't use Prettier](https://antfu.me/posts/why-not-prettier)
|
|
|
|
### How to lint CSS?
|
|
|
|
This config does NOT lint CSS. I personally use [UnoCSS](https://github.com/unocss/unocss) so I don't write CSS. If you still prefer CSS, you can use [stylelint](https://stylelint.io/) for CSS linting.
|
|
|
|
### I prefer XXX...
|
|
|
|
Sure, you can override the rules in your `.eslintrc` file.
|
|
|
|
```jsonc
|
|
{
|
|
"extends": "@antfu",
|
|
"rules": {
|
|
// your rules...
|
|
}
|
|
}
|
|
```
|
|
|
|
Or you can always fork this repo and make your own.
|
|
|
|
## Check Also
|
|
|
|
- [antfu/dotfiles](https://github.com/antfu/dotfiles) - My dotfiles
|
|
- [antfu/vscode-settings](https://github.com/antfu/vscode-settings) - My VS Code settings
|
|
- [antfu/ts-starter](https://github.com/antfu/ts-starter) - My starter template for TypeScript library
|
|
- [antfu/vitesse](https://github.com/antfu/vitesse) - My starter template for Vue & Vite app
|
|
|
|
## License
|
|
|
|
[MIT](./LICENSE) License © 2019-PRESENT [Anthony Fu](https://github.com/antfu)
|