前端工程化（vscode自动格式化）-格式校验、代码质量校验大乱炖

这是前后端混合仓库的完整方案Prettier 管所有格式ESLint 管 JS/TS 质量Stylelint 只管 CSS 语法/语义、不管排版。一、分工一张表记牢工具管什么不管什么Prettier.prettierrcJS / TS / TSX / JSON / CSS / SCSS / MD 等排版代码质量、CSS 语义ESLintJS / TS / TSX质量未使用变量、hooks、Promise…缩进、引号、分号、CSSStylelintCSS / SCSS语法与语义非法属性、未知伪类、重复选择器等缩进、换行、空格交给 Prettier保存文件 ├─ Prettier → 按 .prettierrc 排版含 .css ├─ ESLint fix → 修 TS/JS 质量问题 └─ Stylelint fix → 修 CSS 可自动修的质量问题不碰 Prettier 管的格式 CI ├─ prettier --check ├─ eslint └─ stylelint二、依赖根package.json{devDependencies:{prettier:^3.4.2,eslint:^9.18.0,eslint/js:^9.18.0,eslint-config-prettier:^10.0.1,typescript-eslint:^8.20.0,globals:^17.0.0,stylelint:^16.0.0,stylelint-config-standard:^36.0.0,stylelint-config-prettier:^9.0.0}}前端 React 再按需加eslint-plugin-react-hooks、eslint-plugin-react-refresh用 SCSS 可把stylelint-config-standard换成stylelint-config-standard-scss。不要装eslint-plugin-prettier格式不经过 ESLint。必须装eslint-config-prettier、stylelint-config-prettier关掉和 Prettier 冲突的规则。三、.prettierrc全仓库唯一格式真相{singleQuote:true,trailingComma:all,semi:true,printWidth:100,tabWidth:2,useTabs:false,endOfLine:lf,arrowParens:always,bracketSpacing:true}CSS 保存格式化也读这一份不要在 Stylelint 里配缩进/换行。四、.prettierignorenode_modules dist build coverage .next .output generated *.min.css pnpm-lock.yaml package-lock.json五、.vscode/settings.json{editor.formatOnSave:true,editor.defaultFormatter:esbenp.prettier-vscode,editor.codeActionsOnSave:{source.fixAll.eslint:explicit,source.fixAll.stylelint:explicit},[typescript]:{editor.defaultFormatter:esbenp.prettier-vscode},[typescriptreact]:{editor.defaultFormatter:esbenp.prettier-vscode},[javascript]:{editor.defaultFormatter:esbenp.prettier-vscode},[javascriptreact]:{editor.defaultFormatter:esbenp.prettier-vscode},[json]:{editor.defaultFormatter:esbenp.prettier-vscode},[jsonc]:{editor.defaultFormatter:esbenp.prettier-vscode},[css]:{editor.defaultFormatter:esbenp.prettier-vscode},[scss]:{editor.defaultFormatter:esbenp.prettier-vscode},[markdown]:{editor.defaultFormatter:esbenp.prettier-vscode},css.validate:false,scss.validate:false,less.validate:false,stylelint.validate:[css,scss],stylelint.snippet:[css,scss],files.eol:\n,files.insertFinalNewline:true,files.trimTrailingWhitespace:true,eslint.useFlatConfig:true,eslint.workingDirectories:[{mode:auto}]}说明配置作用CSS 的defaultFormatter PrettierCSS格式只走 Prettiercss.validate: false关掉 VS Code 自带 CSS 检查避免和 Stylelint 重复stylelint.validateCSS语法/语义由 Stylelint 报波浪线不写prettier.*格式只读.prettierrc六、.vscode/extensions.json{recommendations:[esbenp.prettier-vscode,dbaeumer.vscode-eslint,stylelint.vscode-stylelint]}七、eslint.config.mjs只做 JS/TS 质量// ts-checkimporteslintfromeslint/js;importeslintConfigPrettierfromeslint-config-prettier;importglobalsfromglobals;importtseslintfromtypescript-eslint;exportdefaulttseslint.config({ignores:[**/dist/**,**/build/**,**/coverage/**,**/node_modules/**,eslint.config.mjs,],},eslint.configs.recommended,...tseslint.configs.recommended,eslintConfigPrettier,// 后端 Node / TS{files:[apps/api/**/*.ts,packages/**/*.ts],extends:[...tseslint.configs.recommendedTypeChecked],languageOptions:{globals:globals.node,parserOptions:{projectService:true,tsconfigRootDir:import.meta.dirname,},},rules:{typescript-eslint/no-floating-promises:warn,typescript-eslint/no-unsafe-argument:warn,},},// 前端 TS / TSX{files:[apps/web/**/*.{ts,tsx}],extends:[...tseslint.configs.recommendedTypeChecked],languageOptions:{globals:globals.browser,parserOptions:{projectService:true,tsconfigRootDir:import.meta.dirname,},},rules:{typescript-eslint/no-unused-vars:[warn,{argsIgnorePattern:^_}],},},// 构建脚本 .mjs{files:[**/*.{mjs,cjs}],languageOptions:{globals:globals.node},},);不 lint*.cssCSS 交给 Stylelint。八、stylelint.config.mjs只做 CSS 语法/语义/** type {import(stylelint).Config} */exportdefault{extends:[stylelint-config-standard,stylelint-config-prettier,],ignoreFiles:[**/node_modules/**,**/dist/**,**/build/**,**/*.min.css,],rules:{// ── 下面只保留「语义/语法」类规则示例按团队调整 ──},};stylelint-config-prettier做了什么自动关闭Stylelint 里和排版相关的规则例如indentationmax-line-lengthstring-quotesdeclaration-block-trailing-semicolon等等这样 Stylelint不会和 Prettier 抢 CSS 格式。Stylelint 仍会检查的典型问题非格式类型例子语法错误写错属性名、非法值未知伪类/元素拼错的:hover重复/冲突重复声明、无效组合最佳实践空源、错误import用法等具体以stylelint-config-standard为准团队不喜欢的规则在rules里null关掉。SCSS 项目exportdefault{extends:[stylelint-config-standard-scss,stylelint-config-prettier,],// ...};九、.stylelintignore可选node_modules dist build coverage *.min.css十、.editorconfig可选root true [*] charset utf-8 end_of_line lf insert_final_newline true trim_trailing_whitespace true indent_style space indent_size 2 [*.md] trim_trailing_whitespace false与.prettierrc的tabWidth: 2、endOfLine: lf保持一致。十一、根package.jsonscripts{scripts:{format:prettier --write .,format:check:prettier --check .,lint:eslint . stylelint \**/*.{css,scss}\,lint:fix:eslint . --fix stylelint \**/*.{css,scss}\ --fix,check:npm run format:check npm run lint}}命令作用formatPrettier 格式化全仓库含 CSSformat:checkCI 卡未格式化的代码lintESLintTS/JS 质量 StylelintCSS 语法lint:fix各自 auto-fixCSS fix 不修 Prettier 管的格式十二、保存时执行顺序心里有数1. Prettier formatOnSave → 排版TS CSS 都变 2. ESLint fixAll → TS/JS 质量 3. Stylelint fixAll → CSS 语义可修项不动 Prettier 已排的版偶尔 Prettier 和 Stylelint fix 会来回动一下一般保存两次就稳CI 用format:checklint兜底。十三、冲突防控清单✅ 要做❌ 不要做格式只写.prettierrcsettings.json里写prettier.*ESLint 加eslint-config-prettierESLint 开indent/quotes/semiStylelint 加stylelint-config-prettierStylelint 开indentation/max-line-lengthCSS 用 Prettier 格式化用 Stylelint 管缩进换行CI 跑prettier --check只靠肉眼保证格式十四、目录结构示例repo/ ├── .prettierrc ├── .prettierignore ├── .editorconfig ├── eslint.config.mjs # JS/TS 质量 ├── stylelint.config.mjs # CSS 语法/语义不管格式 ├── .stylelintignore ├── .vscode/ │ ├── settings.json │ └── extensions.json ├── package.json ├── apps/ │ ├── api/ # Nest/Koa无 CSS │ └── web/ # React/Vue有 CSS └── packages/ └── shared/十五、三工具一句话Prettier全仓库「长得整齐」含 CSS 排版ESLintTS/JS「写得对不对」StylelintCSS「用得对不对」语法/语义排版一律不管若要落到你某个具体仓库单仓或 imH5 imAdminUIReact imAdminNest 三仓共用同一份配置切 Agent 模式可以说一下仓库结构我可以按路径改好files匹配规则。