Vue3 与 UniApp 项目配置 ESLint 9 Prettier Husky Lint-staged EditorConfig Stylelint

文件扩展名说明

• eslint.config.mjs：强制 ESM，必须用 import。
• eslint.config.cjs：强制 CommonJS，必须用 require。
• eslint.config.js：根据 package.json 中的 "type" 字段决定是 ESM 还是 CommonJS。

内容说明

大部分配置可参考官方文档「Configuration Files」。TypeScript 解析器需额外配置 typescript-eslint。

eslint-plugin-vue 配置

在 eslint-plugin-vue 中，存在「要求组件名始终为多字」的规则，可根据需求关闭：

export default defineConfig([
  // ...其他配置
  pluginVue.configs['flat/essential'],
  {
    rules: {
      'vue/multi-word-component-names': 'off'
    }
  }
])

配置忽略文件

新版 eslint.config.js 中，.eslintignore 被完全忽略，必须改用配置中的 ignores 字段或 globalIgnores。

Vue 示例：

import { defineConfig, globalIgnores } from "eslint/config"
export default defineConfig([
  globalIgnores(["node_modules/", "pnpm-lock.yaml", "**/*.css", "**/*.d.ts"])
])

UniApp 示例：

import { defineConfig, globalIgnores } from "eslint/config"
export default defineConfig([
  globalIgnores(["node_modules/", "src/uni_modules/", "dist/", "pnpm-lock.yaml", "**/*.css", "**/*.d.ts"])
])

安装编辑器插件

通过安装编辑器插件，可在 IDE 中自动检测代码规范。

Prettier

ESLint 侧重代码质量，Prettier 侧重代码风格统一。

安装

pnpm add -D prettier --save-exact

--save-exact 用于精确保存版本号，避免自动升级导致环境不一致。

创建配置文件

推荐使用 prettier.config.js：

const config = {
  trailingComma: 'none',
  tabWidth: 2,
  semi: false,
  singleQuote: true,
  printWidth: 80,
  endOfLine: 'lf'
}
export default config

创建忽略文件

创建 .prettierignore 文件：

node_modules/
pnpm-lock.yaml
src/uni_modules/*
dist/*
wailsjs

格式化命令

pnpm dlx prettier --write .

eslint-config-prettier 和 eslint-plugin-prettier

ESLint 包含代码风格规则，可能与 Prettier 冲突。使用这两个包来解决冲突并统一工具链。

安装

pnpm add -D eslint-plugin-prettier eslint-config-prettier

配置

将 eslint-plugin-prettier 放在配置最后，确保它能覆盖其他规则：

import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
export default defineConfig([
  // 其他配置
  eslintPluginPrettierRecommended
])

VSCode 格式化设置

在 VSCode 中选择 Prettier 作为默认格式化程序，并开启保存时格式化文件。

Husky 和 lint-staged

Husky 用于管理 Git Hooks，Lint-staged 用于在提交前仅检查变更文件，提升性能。

初始化 Husky

pnpm add -D husky
pnpm exec husky init

在 .husky/pre-commit 文件中添加脚本。

下载 lint-staged

pnpm add -D lint-staged

创建配置文件

创建 lint-staged.config.js：

import { ESLint } from 'eslint'

const removeIgnoredFiles = async (files) => {
  const eslint = new ESLint()
  const ignoredFiles = await Promise.all(
    files.map((file) => eslint.isPathIgnored(file))
  )
  const filteredFiles = files.filter((_, i) => !ignoredFiles[i])
  return filteredFiles.join(' ')
}

export default {
  '*': async (files) => {
    const filesToLint = await removeIgnoredFiles(files)
    return [`eslint ${filesToLint} --max-warnings=0`]
  }
}

修改 Git Hook

在 .husky/pre-commit 文件中写入：

pnpm exec lint-staged

EditorConfig

EditorConfig 用于定义编辑器基础规范。

个人配置

root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
[*.md]
trim_trailing_whitespace = false
[*.json]
indent_size = 2

Stylelint

Stylelint 用于 CSS/SCSS 等样式文件的检查。

安装依赖

pnpm add -D stylelint
pnpm add -D stylelint-config-standard-scss
pnpm add -D postcss-html stylelint-config-recommended-vue postcss-scss
pnpm add -D stylelint-order stylelint-config-recess-order
pnpm add -D stylelint-config-prettier

创建配置文件

创建 stylelint.config.js：

/** @type {import('stylelint').config} */
export default {
  extends: [
    'stylelint-config-standard-scss',
    'stylelint-config-recommended-vue/scss',
    'stylelint-config-recess-order',
    'stylelint-config-prettier'
  ],
  ignoreFiles: [
    "node_modules/**"
  ]
}

创建忽略文件

创建 .stylelintignore：

/node_modules/**

安装编辑器插件

安装对应的 Stylelint 插件以在编辑器中自动检测样式问题。