@refinist/eslint-config

ESLint config preset for JavaScript, TypeScript, Vue, and Prettier

Features

• 🎨 Format with Prettier
• ⚡ Designed to work with Vue3 & TypeScript
• 📋 ESLint Flat config
• 🚫 Ignores common files like node_modules, dist and files in .gitignore
• 🎯 Best practices, only one-line of config
• Use @stylistic/eslint-plugin's @stylistic/spaced-comment rule to add spaces after comments (perfect for perfectionists 😬)
• 💯 Just to pursue higher code quality, no more
• 🌐 Add more language support

Install

Using pnpm, yarn, or npm

# with pnpm
pnpm add -D @refinist/eslint-config

# with yarn
yarn add -D @refinist/eslint-config

# with npm
npm i -D @refinist/eslint-config

Require Node.js >= 22.0.0, and ESLint >= 9.5.0.

Usage

// eslint.config.ts
import { refinist } from '@refinist/eslint-config';
export default refinist();

// eslint.config.ts
import { refinist } from '@refinist/eslint-config';
export default refinist({
  vue: true, // auto detection
  prettier: true // default true
});

Rules Overrides

// 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

// 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'
    }
  }
);

🔗 Prettier config

Combine with @refinist/prettier-config

Install

pnpm add -D @refinist/prettier-config

npm i -D @refinist/prettier-config

yarn add -D @refinist/prettier-config

package.json config(recommended)

// package.json
{
  "prettier": "@refinist/prettier-config"
}

.prettierrc config

// .prettierrc.json
"@refinist/prettier-config"

prettier.config.js / prettier.config.mjs config

// prettier.config.js
export { default } from '@refinist/prettier-config';

Rules Overrides

// 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

By the way, the configuration method I like is package.json 😬

npm create vue@latest

If you used Official Vue Starter, 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

pnpm add -D @refinist/eslint-config @refinist/prettier-config

3. Configure eslint.config.ts

// eslint.config.ts
import { refinist } from '@refinist/eslint-config';
export default refinist();

4. Configure prettier

// package.json
{
  "prettier": "@refinist/prettier-config"
}

5. Configure scripts

// package.json
{
  "scripts": {
    "lint": "eslint",
    "lint:fix": "eslint --fix"
  }
}

6. Verify/Fix

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, 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

// .vscode/settings.json
{
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

Inspired by @sxzz and @antfu

License

MIT

Copyright (c) 2025-present, Zhifeng (Jeff) Wang