前端开发者必备的VSCode插件属性设置-VSCode-PHP中文网

必须配齐editor.defaultformatter、editor.formatonsave、eslint.validate三者：defaultformatter需填准确插件id（如esbenp.prettier-vscode），按语言单独配置；formatonsave依赖语言模式匹配；validate须显式添加vue、typescriptreact等类型，否则语法不识别。

前端开发者必备的vscode插件属性设置

装了插件却没效果，本质是关键属性没设对——editor.defaultFormatter、editor.formatOnSave、eslint.validate 这三个配置不配齐，Prettier 不格式化、ESLint 不报错、Volar 不跳转。

editor.defaultFormatter 必须显式指定插件 ID

VS Code 不会自动把 Prettier 或 ESLint 当作默认格式器，哪怕你只装了一个格式化插件。留空或设为 null 就等于关掉格式化能力。

editor.defaultFormatter 值必须是插件 marketplace ID，例如 esbenp.prettier-vscode（Prettier）、dbaeumer.vscode-eslint（ESLint）、vue.volar（Vue3）
不同语言需单独设置：JavaScript 文件用 "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }，Vue 文件则要用 "[vue]": { "editor.defaultFormatter": "vue.volar" }
若同时启用 ESLint 自动修复，editor.codeActionsOnSave 中的 "source.fixAll.eslint" 才会生效，但前提是 editor.defaultFormatter 已就位

editor.formatOnSave 依赖语言模式和 formatter 双重就绪

点保存没反应？不是插件坏了，而是 VS Code 在当前文件上根本没启动格式流程。它只在满足全部条件时才触发。

前端设计优化skill

前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。

下载

右下角状态栏显示的语言模式必须匹配，比如写 Button.vue 时显示的是 vue，不是 plaintext 或 html
若项目根目录有 .prettierrc 或 eslint.config.js，它们的规则优先级高于用户 settings，可能禁用某类格式行为（如 prettier.semi: false 与 ESLint 的 semi: error 冲突会导致格式中断）
工作区设置（.vscode/settings.json）会覆盖全局设置，检查是否误写了 "editor.formatOnSave": false 或漏掉了语言块配置

eslint.validate 需手动声明 JSX/TSX 支持

React 或 TypeScript 项目里，useEffect 报红、useState 类型不提示，大概率是 ESLint 根本没扫描这些文件类型。

eslint.validate 默认只校验 javascript，必须显式加上 javascriptreact 和 typescriptreact
Vue3 项目还需加 vue，否则 v-model、defineProps 等语法不会被识别
若用 Volar，vue.volar 的 typesScript.preferences.includePackageJsonAutoImports 会影响类型导入提示，但不影响 ESLint 的语法校验范围

别名路径 @/ 跳转失效，根源在 jsconfig.json/tsconfig.json 缺失

Ctrl+Click @/components/Button.vue 没反应，不是插件问题，是 VS Code 的语言服务压根不知道 @ 指向哪。

必须在项目根目录放 jsconfig.json（JS 项目）或 tsconfig.json（TS 项目），内容含 "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"] } }
改完配置后必须**完全重启 VS Code 窗口**（Developer: Reload Window 不够），否则语言服务缓存未刷新，跳转仍无效
路径别名仅对 import 语句生效，require("@/...") 或动态 import("@/...") 不参与静态解析，跳转支持取决于插件（如 Volar 对 defineAsyncComponent 的处理）

最容易被忽略的是语言模式与配置作用域的错位：一个 .vue 文件可能被识别为 html 模式，导致所有 Vue 专属配置静默失效；而 jsconfig.json 放错位置或拼错 paths 键名，会让整个别名系统形同虚设。