1. uniapp + Vite 项目为什么需要一整套代码规范
如果你正在用 VSCode 开发 uniapp + Vite 项目，大概率遇到过这种场景：团队里每个人保存代码后格式都不一样，有人用双引号有人用单引号，有人加分号有人不加，<style>里的 CSS 属性顺序每次 diff 都一大片。更麻烦的是，提交到 Git 之后才发现有未使用变量、类型错误、样式单位写错，CI 一跑就红。
这套规范要解决的问题很具体：让 ESLint9 负责语法和潜在错误检查，Prettier 负责格式化，Stylelint 负责样式语法和属性排序，husky + lint-staged 负责在提交前只检查暂存区文件。配置完成后，你在 VSCode 里按 Ctrl + S 就能自动修复大部分问题，提交时也不会再把低级错误带进仓库。
本文面向的是已经用npx degit dcloudio/uni-preset-vue#vite-ts创建过 uniapp + Vue3 + Vite + TS 项目的开发者。如果你还没创建项目，可以先执行：
npx degit dcloudio/uni-preset-vue#vite-ts my-uniapp-project cd my-uniapp-project npm install然后用 VSCode 打开这个目录。接下来我会按 ESLint9 扁平配置、Prettier、Stylelint、husky 的顺序逐层落地，每一层都给出可复制的配置和验证命令。另外，因为现在很多团队会用 AI 辅助写代码，我也会演示如何用 TaoToken 统一 Key 接入 AI 工具，避免在多个插件里反复填不同厂商的 Key。
2. TaoToken 统一 Key 的前置准备
在配置规范的过程中，你可能会用到 AI 辅助补全、代码审查或者提交信息生成。如果每个工具都单独配置一家厂商的 Key，管理起来很乱。TaoToken 的思路是提供一个统一的 API 通道，你只需要一个 Key，就能在多个 AI 工具里复用。
先到官网注册并进入控制台：
https://taotoken.net/?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content=登录后进入 API Keys 页面创建一个 Key：
https://taotoken.net/console/api-keys?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content=api-keys创建完成后，你会拿到类似sk-xxxxxxxx的字符串。这个 Key 就是后续所有 AI 工具的入口凭证。API 基础地址统一使用：
https://taotoken.net/api注意这个地址后面不要加 UTM 参数，直接作为 base URL 使用即可。如果你只是想在配置规范时快速验证模型是否可用，可以打开模型对话页面测试：
https://taotoken.net/models?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content=models如果你打算长期用 AI 做编码辅助，比如让 AI 帮你生成 ESLint 规则说明、批量修复 lint 错误，可以了解 Coding Plan：
https://taotoken.net/coding-plan?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content=coding-plan接入文档在这里，里面有不同语言和工具的调用示例：
https://taotoken.net/doc?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content=doc如果你用的是 Claude Code 这类终端工具，Anthropic 兼容接入方式可以参考：
https://taotoken.net/claudecode-anthropic?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content=claudecode-anthropic把 Key 和 base URL 准备好之后，我们回到代码规范本身。下面所有配置都不依赖 AI，但配好之后你可以用 AI 工具来辅助排查 lint 报错。
3. ESLint9 扁平配置在 uniapp + Vite 中的落地
ESLint9 最大的变化是配置文件从.eslintrc.*变成了eslint.config.mjs，并且采用扁平化数组结构。旧版配置不能直接复制过来，这是很多人踩坑的地方。
3.1 初始化 ESLint9
在项目根目录执行：
npm init @eslint/config@latest --save-dev交互选项按下面选：
How would you like to use ESLint? · problems What type of modules does your project use? · esm Which framework does your project use? · vue Does your project use TypeScript? · typescript Where does your code run? · browser, node Would you like to install them now? · Yes Which package manager do you want to use? · npm注意Where does your code run?这一步要把node也选上，按空格键选中。完成后会生成eslint.config.mjs。
3.2 安装 uniapp 场景需要的扩展插件
除了初始化自带的@eslint/js、typescript-eslint、eslint-plugin-vue，我建议再加上 import 检查和 Prettier 集成：
npm install --save-dev eslint-plugin-import-x eslint-import-resolver-typescript eslint-plugin-prettier eslint-config-prettier3.3 可复制的 eslint.config.mjs
下面这份配置可以直接用于 uniapp + Vite + TS 项目，已经处理了uni_modules、static等目录的忽略，也处理了 Vue 文件里 TS 解析器的问题：
// eslint.config.mjs import globals from 'globals' import pluginJs from '@eslint/js' import { configs, parser } from 'typescript-eslint' import pluginVue from 'eslint-plugin-vue' import eslintPluginImportX from 'eslint-plugin-import-x' import tsParser from '@typescript-eslint/parser' import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended' /** @type {import('eslint').Linter.Config[]} */ export default [ // 全局忽略项，ESLint 默认已忽略 node_modules 和 .git { ignores: ['src/uni_modules/', 'src/static/', '.vscode', '.husky', 'dist/'] }, // 指定 ESLint 匹配的文件类型 { files: ['**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx,vue}'] }, // 基础语言配置 { languageOptions: { globals: { ...globals.browser, ...globals.node }, parser: tsParser, ecmaVersion: 'latest', sourceType: 'module' } }, pluginJs.configs.recommended, ...configs.recommended, ...pluginVue.configs['flat/essential'], eslintPluginImportX.flatConfigs.recommended, eslintPluginImportX.flatConfigs.typescript, eslintPluginPrettierRecommended, // Vue 文件里用 TS 解析器处理 <script lang="ts"> { files: ['**/*.vue'], languageOptions: { parserOptions: { parser: parser } } }, // 自定义规则 { rules: { '@typescript-eslint/no-unused-vars': 'warn', 'vue/multi-word-component-names': 'off', '@typescript-eslint/no-redeclare': 'error', 'no-redeclare': 'off' } } ]这里有几个关键点。ignores单独作为一个对象且只有ignores属性时，它会成为全局忽略项，自动追加到 ESLint 默认忽略列表后面。pluginVue.configs['flat/essential']是 Vue 官方提供的扁平配置，不要再用旧版的plugin:vue/essential写法。
3.4 验证 ESLint 是否生效
在package.json里加一个脚本：
{ "scripts": { "lint:eslint": "eslint . --ext \"./**/*.{vue,js,ts,jsx,tsx,mjs,cjs}\" --fix" } }然后执行：
npm run lint:eslint如果项目里有未使用变量，你会看到类似warning '@typescript-eslint/no-unused-vars'的输出。如果没有任何输出，说明当前代码通过了检查。
4. Prettier 与 Stylelint 的配置和冲突处理
ESLint 负责语法检查，Prettier 负责格式化，两者职责要分开。从 Stylelint v15 开始，所有与 Prettier 冲突的风格规则已经被弃用，v16 里彻底删除，所以现在 Stylelint 和 Prettier 可以共存。
4.1 安装并配置 Prettier
npm install --save-dev --save-exact prettier创建prettier.config.mjs：
// prettier.config.mjs /** @type {import("prettier").Config} */ const config = { semi: false, singleQuote: true, trailingComma: 'none', endOfLine: 'auto', printWidth: 120, tabWidth: 2, useTabs: false, arrowParens: 'avoid', bracketSpacing: true } export default config创建.prettierignore：
# Logs logs *.log # Editor directories and files .vscode .idea **/*.svg # projects .husky node_modules src/uni_modules/ src/static/ dist/ # uniapp 插件生成的文件 src/pages.json src/manifest.json在package.json里加格式化脚本：
{ "scripts": { "lint:prettier": "prettier \"./**/*.{vue,js,ts,jsx,tsx,mjs,cjs,html,json,md}\" --write" } }4.2 安装并配置 Stylelint
npm init stylelint npm install --save-dev stylelint-config-standard sass-embedded stylelint-config-standard-scss stylelint-config-standard-vue stylelint-config-recess-order创建stylelint.config.mjs：
// stylelint.config.mjs /** @type {import('stylelint').Config} */ export default { extends: [ 'stylelint-config-standard', 'stylelint-config-standard-scss', 'stylelint-config-standard-vue/scss', 'stylelint-config-recess-order' ], overrides: [ { files: ['**/*.{vue,html}'], customSyntax: 'postcss-html' }, { files: ['**/*.{css,scss}'], customSyntax: 'postcss-scss' } ], rules: { 'no-empty-source': null, 'unit-no-unknown': [true, { ignoreUnits: ['rpx'] }], 'selector-type-no-unknown': [true, { ignoreTypes: ['page'] }] } }这里特别处理了 uniapp 的两个常见问题：rpx单位不被识别，以及小程序里的page选择器不被识别。如果不加这两条规则，Stylelint 会直接报错。
创建.stylelintignore：
node_modules src/uni_modules/ src/static/ dist/ **/*.svg在package.json里加脚本：
{ "scripts": { "lint:stylelint": "stylelint \"./**/*.{vue,css,scss,html}\" --fix" } }4.3 验证 Prettier 和 Stylelint
npm run lint:prettier npm run lint:stylelint如果样式文件里有属性顺序问题，stylelint-config-recess-order会自动帮你排序。如果 Prettier 和 ESLint 有冲突，eslint-plugin-prettier/recommended已经帮你关闭了冲突规则。
5. husky + lint-staged 提交钩子配置
只靠编辑器保存时格式化还不够，因为总有人会绕过编辑器直接提交。husky 负责在 Git 提交前触发检查，lint-staged 负责只检查暂存区文件，避免每次提交都全量扫描。
5.1 安装依赖
npm install --save-dev lint-staged husky5.2 配置 lint-staged
在package.json里添加：
{ "lint-staged": { "**/*.{vue,js,ts,jsx,tsx,mjs,cjs,html,json,md}": [ "prettier --write" ], "**/*.{vue,js,ts,jsx,tsx,mjs,cjs}": [ "eslint --cache --fix" ], "**/*.{vue,css,scss,html}": [ "stylelint --fix" ] } }5.3 初始化 husky
npx husky init这个命令会在项目根目录生成.husky/pre-commit文件，并在package.json的scripts里自动添加"prepare": "husky"。
然后覆盖.husky/pre-commit内容：
#!/usr/bin/env sh . "$(dirname -- "$0")/_/husky.sh" npx --no-install -- lint-staged5.4 验证提交钩子
先确保项目已经初始化为 Git 仓库：
git init git add . npm run prepare然后故意写一个格式有问题的文件，执行：
git add . git commit -m "test: husky hook"如果 husky 生效，你会看到 lint-staged 开始运行，Prettier、ESLint、Stylelint 依次处理暂存区文件。如果检查不通过，提交会被中断。
6. VSCode settings.json 与常见报错排查
编辑器层面的配置能让保存时自动修复，减少手动执行命令的次数。
6.1 项目级 settings.json
在项目根目录创建.vscode/settings.json：
{ "editor.formatOnPaste": false, "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.fixAll": "never", "source.fixAll.eslint": "explicit", "source.fixAll.stylelint": "explicit" }, "editor.defaultFormatter": "esbenp.prettier-vscode", "stylelint.validate": ["css", "less", "postcss", "scss", "vue", "sass", "html"], "explorer.fileNesting.enabled": true, "explorer.fileNesting.expand": false, "explorer.fileNesting.patterns": { "eslint.config.mjs": "prettier.config.mjs, .prettierignore, stylelint.config.mjs, .stylelintignore" } }source.fixAll设为never是为了避免多个 fixAll 同时执行导致冲突，只保留 ESLint 和 Stylelint 的显式修复。
6.2 常见报错与处理
报错一：Parsing error: Unexpected token出现在.vue文件
原因通常是 Vue 文件里的<script lang="ts">没有被 TS 解析器处理。检查eslint.config.mjs里是否有：
{ files: ['**/*.vue'], languageOptions: { parserOptions: { parser: parser } } }报错二：Stylelint 报Unknown word CssSyntaxError
这是 Vue 插值语法或 SCSS 嵌套导致的。确认stylelint.config.mjs里overrides配置了postcss-html和postcss-scss，并且安装了postcss-html和postcss-scss：
npm install --save-dev postcss-html postcss-scss报错三：husky 提交时提示command not found
检查.husky/pre-commit文件是否有可执行权限，以及package.json里是否有"prepare": "husky"。如果.husky/_目录不存在，重新执行：
npm run prepare报错四：ESLint9 报Could not find config file
确认项目根目录存在eslint.config.mjs，而不是旧的.eslintrc.cjs。ESLint9 不再自动读取旧版配置文件。
报错五：Prettier 和 ESLint 规则冲突
确认eslint.config.mjs里引入了eslintPluginPrettierRecommended，并且它放在数组靠后的位置。这个插件会关闭所有与 Prettier 冲突的 ESLint 规则。
6.3 用 TaoToken 辅助排查 lint 报错
当你遇到不熟悉的 ESLint 规则报错时，可以把报错信息贴到模型对话里，让 AI 解释规则含义并给出修复建议：
https://taotoken.net/models?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content=models如果你在终端里用 Claude Code 做批量修复，可以按 Anthropic 兼容方式接入：
https://taotoken.net/claudecode-anthropic?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content=claudecode-anthropicAPI 调用时 base URL 用https://taotoken.net/api，Key 用你在控制台创建的那个。这样你不需要在多个工具里分别配置不同厂商的 Key。
7. 一次配置通过 lint 与提交校验的完整流程
把上面的步骤串起来，完整流程是这样的：
第一步，创建 uniapp + Vite + TS 项目，用 VSCode 打开。
第二步，执行npm init @eslint/config@latest --save-dev，按选项生成eslint.config.mjs，然后替换成第 3 节的完整配置。
第三步，安装 Prettier 和 Stylelint 相关依赖，创建prettier.config.mjs、.prettierignore、stylelint.config.mjs、.stylelintignore。
第四步，安装 husky 和 lint-staged，执行npx husky init，配置.husky/pre-commit和package.json里的lint-staged。
第五步，创建.vscode/settings.json，开启保存时自动修复。
第六步，依次执行验证命令：
npm run lint:eslint npm run lint:prettier npm run lint:stylelint第七步，执行git add .和git commit，确认 husky 钩子触发 lint-staged。
如果所有命令都没有报错，提交也能正常完成，说明整套规范已经落地。后续团队协作时，新成员只需要拉取代码、执行npm install、npm run prepare，就能获得一致的检查和格式化行为。
对于需要长期用 AI 辅助编码的团队，建议把 TaoToken 的 Key 配置在环境变量里，而不是硬编码到项目文件中。接入文档里有不同场景的示例：
https://taotoken.net/doc?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content=doc如果你还在选型阶段，可以先到模型对话页面测试几个模型对 ESLint 规则的解释能力，再决定用哪个模型做日常辅助：
https://taotoken.net/models?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content=models整套配置里最容易出问题的地方是 ESLint9 的扁平配置合并顺序，以及 Stylelint 对 uniapp 特殊单位和选择器的处理。把这两处调通之后，剩下的就是习惯问题：保存时自动格式化，提交前自动检查，慢慢就不需要手动跑 lint 命令了。
