VSCode配置前端框架代码提示的方法-VSCode-PHP中文网

必须装volar而非vetur，配对安装vue language features，重启后手动将.vue文件语言模式设为vue并勾选“始终使用”，三者缺一不可，否则类型推导失效、跳转失灵、语法标红。

vscode配置前端框架代码提示的方法

装对扩展、配对配置、手动确认语言模式，三者缺一不可；否则提示失效、跳转失灵、语法标红全是表面症状。

Vue项目必须装Volar而非Vetur

Volar是Vue 3官方推荐的语言服务器，Vetur已停止维护且不支持Composition API类型推导。装错会导致defineProps无类型、ref返回值推断失败、setup中变量无法跳转。

卸载所有旧插件：Vetur、Vue VSCode Snippets（除非你明确需要旧版片段）
只装Volar和Vue Language Features (Volar)（二者常成对出现，缺一不可）
重启VSCode后，打开.vue文件，右下角状态栏必须显示Vue，不是HTML或Plain Text
若显示HTML，点击它 → 选Vue → 勾选Always use Vue for '.vue' files

Svelte项目必须有svelte.config.js且非空

VSCode的Svelte插件不会主动激活，它只在检测到项目根目录存在svelte.config.js时才加载语言服务。没有这个文件，.svelte文件一律当HTML处理，$:、export let、$lib全失效。

前端设计优化skill

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

下载

新建项目务必用npm create svelte@latest，它自动生成合法配置
手动建项目：执行touch svelte.config.js（空文件即可，但不能缺失）
确认右下角语言模式为Svelte，不是HTML；若点选后自动回退，检查是否装了冲突插件（如Svelte Language Server、Svelte Intellisense，全部卸载）
改完配置后，必须执行Cmd+Shift+P → Svelte: Restart Language Server，仅重载窗口无效

React项目需显式启用JSX语言模式

VSCode默认把.jsx识别为JavaScript，但不触发React专属补全（如useState导入建议、组件属性提示）。不手动切换，onClick、className等属性不会自动补全。

打开任意.jsx或.tsx文件，点击右下角语言标识
选择JavaScript React（不是JavaScript或TypeScript React）
勾选Always use JavaScript React for '.jsx' files
在.vscode/settings.json中加一行："javascript.preferences.jsxAttributeCompletion": "auto"
确保已安装ES7+ React/Redux/React-Native snippets，否则rfc、cc等快捷片段不生效

Prettier格式化.vue/.svelte/.jsx文件要装对应插件

默认Prettier不理解单文件组件结构，直接格式化会破坏<script></script>缩进、删掉$$props、把<template></template>内容压成一行。

Vue项目：安装prettier-plugin-vue，.prettierrc里加"plugins": ["prettier-plugin-vue"]
Svelte项目：安装prettier-plugin-svelte，.prettierrc里加"plugins": ["prettier-plugin-svelte"]
React项目：无需额外插件，但.prettierrc需含"parser": "flow"或"parser": "babel"（取决于Babel版本）
关键一步：在.vscode/settings.json中设"editor.defaultFormatter": "esbenp.prettier-vscode"，并关闭VSCode自带格式器（否则保存时反复冲突）