@refinist/eslint-config
Version:
ESLint config for @refinist.
287 lines (215 loc) • 7.38 kB
Markdown
# @refinist/eslint-config
[](https://npmjs.com/package/@refinist/eslint-config) [](https://github.com/refinist/eslint-config/actions/workflows/unit-test.yml) [](https://nodejs.org/en/about/releases/) [](https://eslint.org/docs/latest/user-guide/getting-started)
ESLint config preset for JavaScript, TypeScript, Vue, React, and Prettier
> English Documentation | [中文文档](./README.zh-CN.md)
## Features
- [x] 🎨 Format with **Prettier**
- [x] ⚡ Designed to work with **Vue3** & **TypeScript** or **React** & **TypeScript**
- [x] 📋 [ESLint Flat config](https://eslint.org/docs/latest/use/configure/configuration-files-new)
- [x] 🚫 Ignores common files like `node_modules`, `dist` and files in `.gitignore`
- [x] 🎯 Best practices, only one-line of config
- [x] 💬 Built-in `@stylistic/eslint-plugin`'s [@stylistic/spaced-comment](https://eslint.style/rules/spaced-comment) rule to add spaces after comments (perfect for perfectionists 😬)
- [x] <img src="https://avatars.githubusercontent.com/u/67109815" width="18" height="18" alt="Tailwindcss"> Built-in Tailwindcss 3/4 auto formatting/linting plugin support, [related documentation](https://github.com/schoero/eslint-plugin-better-tailwindcss), see [usage](#use-tailwindcss-eslint-plugin) for details
- [x] 💡 **React** + **TypeScript** will enable `type-aware` by default, [related documentation](https://typescript-eslint.io/getting-started/typed-linting/)
- [x] 💯 Just to pursue higher code quality, no more
- [ ] 🌐 Add more language support
## Install
Using pnpm, yarn, npm, or bun
```bash
# with pnpm
pnpm add -D @refinist/eslint-config
# with yarn
yarn add -D @refinist/eslint-config
# with npm
npm i -D @refinist/eslint-config
# with bun
bun add -D @refinist/eslint-config
```
> [!WARNING]
> If you use react, please install these three packages `pnpm add -D @eslint-react/eslint-plugin eslint-plugin-react-hooks eslint-plugin-react-refresh` and import react eslint config `import { react } from '@refinist/eslint-config/react'` like this 👇
```ts
// eslint.config.ts
import { refinist } from '@refinist/eslint-config';
import { react } from '@refinist/eslint-config/react';
export default refinist({}, react());
```
Require Node.js >= 20.0.0, and ESLint >= 9.5.0.
## Usage
```ts
// eslint.config.ts
import { refinist } from '@refinist/eslint-config';
export default refinist();
```
```ts
// eslint.config.ts
import { refinist } from '@refinist/eslint-config';
export default refinist({
vue: true, // auto detection
prettier: true // default true
});
```
### Rules Overrides
```ts
// eslint.config.ts
import { refinist } from '@refinist/eslint-config';
export default refinist(
{},
// From the second arguments they are ESLint Flat Configs
// you can have multiple configs
{
files: ['**/*.ts'],
rules: {}
},
{
rules: {}
}
);
```
### Use system's glob
```ts
// eslint.config.ts
import { refinist, GLOB_VUE } from '@refinist/eslint-config';
export default refinist(
{},
{
files: [GLOB_VUE], // GLOB_VUE is '**/*.vue'
rules: {
'vue/block-order': 'off'
}
}
);
```
### Use Tailwindcss ESLint plugin
```ts
// eslint.config.ts
import { refinist } from '@refinist/eslint-config';
export default refinist({
// ...
tailwindcss: {
// Configuration reference: https://github.com/schoero/eslint-plugin-better-tailwindcss/blob/main/docs/settings/settings.md#settings
entryPoint: 'src/global.css'
}
});
```
Rules Overrides
```ts
// eslint.config.ts
import { refinist, GLOB_TAILWINDCSS } from '@refinist/eslint-config';
export default refinist(
{},
{
files: GLOB_TAILWINDCSS,
// https://github.com/schoero/eslint-plugin-better-tailwindcss/tree/main/docs/rules
rules: {
'better-tailwindcss/no-unregistered-classes': [
'warn',
{ detectComponentClasses: true }
]
}
}
);
```
### 🔗 Prettier config
Combine with [@refinist/prettier-config](https://github.com/refinist/prettier-config)
#### Install
```bash
# with pnpm
pnpm add -D @refinist/prettier-config
# with yarn
yarn add -D @refinist/prettier-config
# with npm
npm i -D @refinist/prettier-config
# with bun
bun add -D @refinist/prettier-config
```
#### package.json config(recommended)
```json
// package.json
{
"prettier": "@refinist/prettier-config"
}
```
#### .prettierrc config
```json
// .prettierrc.json
"@refinist/prettier-config"
```
#### prettier.config.js / prettier.config.mjs config
```js
// prettier.config.js
export { default } from '@refinist/prettier-config';
```
#### Rules Overrides
```ts
// prettier.config.js
import config from '@refinist/prettier-config';
/** @type {import('prettier').Config} */
export default {
...config
/* your custom config */
};
```
> [!TIP]
> For more Prettier configuration options, please refer to the [official documentation](https://prettier.io/blog/2025/02/09/3.5.0#api)
By the way, the configuration method I like is `package.json` 😬
## `npm create vue@latest`
If you used [Official Vue Starter](https://github.com/vuejs/create-vue), which is `npm create vue@latest` to create your project, here are a few steps to quickly integrate with the official template:
### If you selected eslint and prettier
1. **Remove** related packages and files
- `@vue/eslint-config-prettier`
- `@vue/eslint-config-typescript`
- `eslint-plugin-vue`
- `.prettierrc.json` file
> [!TIP]
> Keep the eslint and prettier packages
2. Install `@refinist/eslint-config` and `@refinist/prettier-config`
```bash
pnpm add -D @refinist/eslint-config @refinist/prettier-config
```
3. Configure `eslint.config.ts`
```ts
// eslint.config.ts
import { refinist } from '@refinist/eslint-config';
export default refinist();
```
4. Configure `prettier`
```json
// package.json
{
"prettier": "@refinist/prettier-config"
}
```
5. Configure `scripts`
```json
// package.json
{
"scripts": {
"lint": "eslint",
"lint:fix": "eslint --fix"
}
}
```
6. Verify/Fix
```bash
pnpm run lint
pnpm run lint:fix
```
> [!WARNING]
> If your ESLint configuration file is `.ts` and you encounter errors when running `pnpm run lint`, it's because you don't have the jiti library as a dependency. [See reference](https://eslint.org/docs/latest/use/configure/configuration-files#typescript-configuration-files), or you can simply switch to `eslint.config.js` instead of using `.ts`, which works great too!
Done!
> [!TIP]
> If you didn't select eslint and prettier, replace step 1 above with `pnpm add -D eslint` and `pnpm add -D prettier`, then continue with the steps above!
## VS Code settings
```json
// .vscode/settings.json
{
"editor.formatOnSave": false,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
}
}
```
Inspired by [@sxzz](https://github.com/sxzz) and [@antfu](https://github.com/antfu)
## License
[MIT](./LICENSE)
Copyright (c) 2025-present, Zhifeng (Jeff) Wang