个人共享代码规范配置，基于 @antfu/eslint-config + stylelint，开箱即用。

快速开始

1. 安装

pnpm add eslint  @ranejie/eslint-config -D

pnpm add stylelint stylelint-config-standard-scss stylelint-config-standard-less stylelint-config-standard-scss -D

2. 项目配置

eslint.config.js

import lintConfig from "@ranejie/eslint-config/eslint";

export default lintConfig();

// 如需覆盖默认配置：
// export default lintConfig({
//   unocss: true,
//   rules: { 'no-console': 'off' },
// })

.stylelintrc.js

import stylelint from "@ranejie/eslint-config/stylelint";

export default stylelint();

// 如需追加/覆盖规则：
// export default stylelint({
//   rules: { 'color-hex-length': 'long' },
// })

3. 推荐的 .vscode/settings.json

在项目根目录创建 .vscode/settings.json：

{
  // 禁用默认格式化器，使用 eslint + stylelint 代替
  "prettier.enable": false,
  "editor.formatOnSave": false,

  // 保存时自动修复
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "never"
  },

  // ESLint 校验范围
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue",
    "html",
    "markdown",
    "json",
    "json5",
    "jsonc",
    "yaml",
    "toml",
    "xml",
    "gql",
    "graphql",
    "astro",
    "css",
    "less",
    "scss",
    "pcss",
    "postcss"
  ],

  // Stylelint 校验范围
  "stylelint.validate": ["css", "scss", "less", "vue"]
}

4. 推荐的 VS Code 扩展

• dbaeumer.vscode-eslint — ESLint
• stylelint.vscode-stylelint — Stylelint
• antfu.unocss — UnoCSS 智能提示（使用 UnoCSS 时安装）

相比 @antfu/eslint-config 默认配置的更改

ESLint 规则

| 规则 | 默认值 | 本配置 | 说明 | | ---------------------------------- | ------ | ----------------------------------- | ---------------------------------------- | | unused-imports/no-unused-imports | — | 'error' | 禁止未使用的 import 语句，保存时自动删除 | | unused-imports/no-unused-vars | — | 'error' (忽略 _ 前缀) | 禁止未使用的导入变量 | | vue/block-order | — | template → script → style | 强制 Vue SFC 块顺序 | | vue/first-attribute-linebreak | — | 单行 beside / 多行 below | 单属性不换行，多属性另起一行 | | vue/max-attributes-per-line | — | 单行 3 个 / 多行 1 个 | 控制 Vue 模板属性换行 | | object-curly-newline | — | ImportDeclaration ≥5 个属性时换行 | import 语句格式化 |

Stylelint 规则

| 规则 | 说明 | | ---------------------------------------- | ------------------------------------------ | | declaration-empty-line-before: 'never' | CSS 声明前不留空行 | | selector-class-pattern | BEM 命名规范校验，支持嵌套选择器 | | stylelint-config-recess-order | RECESS 属性排序规范，支持 --fix 自动排序 |

文件类型支持

| 文件类型 | 语法解析器 | 说明 | | ------------------------------ | ------------------------------------------------- | -------------------------- | | .scss / .vue (lang="scss") | stylelint-config-standard-scss | SCSS 规范 | | .less / .vue (lang="less") | stylelint-config-standard-less + postcss-less | Less 规范 | | .vue | postcss-html | Vue SFC 自动识别内联 style |

包依赖说明

peerDependencies（需项目自行安装）：

• eslint ^9.0.0
• stylelint ^17.0.0
• stylelint-config-standard-scss — SCSS 规范
• stylelint-config-standard-less — Less 规范
• stylelint-config-recess-order — CSS 属性排序
• stylelint-order — 排序引擎

dependencies（随包自动安装，无需手动处理）：

• @antfu/eslint-config — ESLint 基础配置
• eslint-plugin-format — 格式化插件
• postcss-html — Vue SFC CSS 解析
• postcss-less — Less 语法解析

eslint文档参考

https://eslint-config.antfu.me/rules

常用项目推荐配置

UnoCSS

本配置默认关闭 UnoCSS（unocss: false），如需启用请显式传入 unocss: true，并在项目中安装与 unocss 版本匹配的 @unocss/eslint-plugin：

pnpm add -D unocss @unocss/eslint-plugin

注意：@unocss/eslint-plugin 的版本必须与 unocss 一致（它们共用 @unocss/core），否则 eslint 会直接崩溃

import { defineConfig, presetUno, presetAttributify } from "unocss";

export default defineConfig({
  presets: [presetUno(), presetAttributify()],
});

vite.config.ts 中引入：

import UnoCSS from "unocss/vite";

export default defineConfig({
  plugins: [UnoCSS()],
});

Vue Router (文件路由)

使用 unplugin-vue-router 实现基于文件系统的路由，@antfu/eslint-config 内置支持：

pnpm add -D unplugin-vue-router

vite.config.ts：

import VueRouter from "unplugin-vue-router/vite";

export default defineConfig({
  plugins: [VueRouter()],
});

路由文件放在 src/pages/ 目录下，自动生成路由。

TypeScript

本配置默认启用 TypeScript（typescript: true），项目需要安装：

pnpm add -D typescript vue-tsc

tsconfig.json（推荐）：

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "jsx": "preserve",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
    "noEmit": true,
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"]
}

Element Plus (自动导入)

pnpm add element-plus
pnpm add -D unplugin-vue-components unplugin-auto-import

vite.config.ts：

import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";

export default defineConfig({
  plugins: [
    AutoImport({ resolvers: [ElementPlusResolver()] }),
    Components({ resolvers: [ElementPlusResolver()] }),
  ],
});

配合自动导入后，组件和 API 无需手动 import，直接使用。