VSCode插件让前端代码维护更简单-VSCode-PHP中文网

eslint配置后不报错，主因是文件未被正确关联或eslint.enable未启用：需确保settings.json中eslint.enable为true，通过files.associations将.vue等非默认后缀映射至对应语言模式，并在项目根目录放置.eslintrc.js或eslint.config.js。

vscode插件让前端代码维护更简单

ESLint 配置后不报错？检查 `eslint.enable` 和文件关联

VS Code 里装了 ESLint 插件却没任何提示，大概率不是插件没起作用，而是它根本没“看到”你的文件。默认情况下，ESLint 只对 .js、.jsx、.ts、.tsx 生效，如果你在 .vue 或 .svelte 文件里写 JS 逻辑，ESLint 默认是静默的。

解决方法很简单：

打开设置（Ctrl+,），搜索 eslint.enable，确保勾选
再搜 files.associations，添加对应映射，比如：
"*.vue": "vue"（让 Vue 文件走 vue 语言服务）
确认项目根目录有 .eslintrc.js 或 eslint.config.js（ESLint v9+ 推荐后者）
如果用的是 Vue，还要额外安装 Volar，并关闭旧插件 Vetur，否则语言服务冲突会导致 ESLint 无法读取 script 块内的代码

Prettier 和 ESLint 冲突时，`eslint-config-prettier` 是必选项

你改完代码一保存，Prettier 把分号删了，ESLint 立刻标红说“Missing semicolon”——这不是配置错了，是两者规则打架。Prettier 负责格式，ESLint 负责逻辑和风格规范，它们本不该重叠。

正确做法是让 ESLint 主动“让位”给 Prettier：

安装 eslint-config-prettier：npm install eslint-config-prettier --save-dev
在 eslint.config.js 的 extends 数组末尾加上 "eslint-config-prettier"
别再手动配置 quotes、semi、comma-dangle 这类纯格式规则——全交给 Prettier
VS Code 设置里只保留一条关键配置："editor.defaultFormatter": "esbenp.prettier-vscode"，其余格式相关开关（如 formatOnSave）开或关都行，但不要同时启用多个 formatter

Vue / React 模板内 JS 逻辑不被 ESLint 检查？确认语言模式和插件链路

在 <script setup></script> 里写了 console.log，ESLint 却没警告；或者 React JSX 中用了未声明变量，TS 类型检查亮绿灯但 ESLint 没反应——问题往往出在“谁在解析这段代码”。

前端美化

使用此技能可创建独具特色、具备生产级质量的前端界面，设计品质高。当用户要求构建网页组件、页面、产物、海报或应用程序时（例如：网站、落地页、仪表盘、React 组件、HTML/CSS 布局，或对任意 Web UI 进行样式优化与视觉美化），请启用该能力。输出需为富有创意、精雕细琢的代码与 UI 设计，避免千篇一律的 AI 风格。

下载

前端单文件组件的 JS 部分，需要三层协作：文件后缀 → VS Code 语言模式 → 对应语言服务 → ESLint 解析器。

Vue 文件必须设为 vue 语言模式（右下角点击，选 “Configure File Association for '.vue'” → “vue”）
Volar 必须启用，且在设置中开启 vue.experimental.scriptSetupRefSugar（如需支持 $ref 语法）
ESLint 配置里要显式指定解析器选项，例如：
parserOptions: { parser: '@typescript-eslint/parser', sourceType: 'module' }
React 项目若用 TypeScript，确保 tsconfig.json 中 compilerOptions.jsx 设为 preserve 或 react-jsx，否则 ESLint 无法识别 JSX 语法

CI 流程里 ESLint 报错但本地不报？检查 `package.json` 中的 `lint` 脚本路径

本地运行 npm run lint 没问题，GitLab CI 却失败，错误常是 Cannot find module 'eslint-plugin-react' 或 No files matching the pattern。根本原因不是插件没装，而是脚本执行路径和 glob 匹配范围不一致。

典型陷阱：

"lint": "eslint src" 在 monorepo 子包中会失败，因为 src 相对于子包目录可能不存在
CI 使用 Docker 镜像时，node_modules 是全新安装的，但本地可能用了 pnpm 的硬链接缓存，导致插件版本实际不一致
忘记在 .eslintignore 中排除构建产物（如 dist/、build/），CI 有时会误扫这些目录并报错
最隐蔽的一点：Windows 本地路径分隔符是 \，而 CI 是 Linux，某些 glob 写法（如 src/**/*.js）在跨平台时行为不同，建议统一用正斜杠