VSCode安装Svelte插件后无提示,需确认svelte-vscode已启用、.svelte文件关联为Svelte语言模式、未被files.associations误设为html;必须配置svelte.config.js以启用类型检查与补全,props需export声明,事件需dispatch调用,slot props需JSDoc辅助。

VSCode 安装 Svelte 插件后没提示?先确认 svelte-vscode 是否启用
装了插件但编辑器对 .svelte 文件毫无反应,大概率是插件没真正生效。VSCode 会为不同语言自动启用对应扩展,但前提是文件关联正确、插件未被禁用。
- 打开命令面板(
Ctrl+Shift+P或Cmd+Shift+P),输入Extensions: Show Enabled Extensions,确认svelte-vscode在列表中且状态为“已启用” - 右键任意
.svelte文件 → “重新打开使用”,选择Svelte语言模式(不是HTML或Plain Text) - 检查 VSCode 设置里是否误启用了
"files.associations": {"*.svelte": "html"}—— 这会强制把 Svelte 当 HTML 解析,直接废掉语法支持
为什么 svelte-check 报错但代码能跑?要配 svelte.config.js 才能联动类型检查
VSCode 的类型提示和错误红线依赖 svelte-check 的语言服务,而它必须读取项目根目录的 svelte.config.js 才知道如何解析组件、导入路径、TypeScript 配置等。没这个文件,补全和类型推导就只剩基础 HTML 层级。
- 在项目根目录新建
svelte.config.js,最简内容:const { vitePreprocess } = require('@sveltejs/vite-plugin-svelte'); module.exports = { preprocess: vitePreprocess() }; - 如果用了 TypeScript,确保
tsconfig.json中包含"include": ["src/**/*"],否则svelte-check会跳过你的组件文件 - 重启 VSCode 窗口(不是重载窗口),或运行命令
Developer: Restart Language Server
svelte-vscode 和 eslint-plugin-svelte 提示冲突?关掉 ESLint 的 HTML 解析器
ESLint 默认用 eslint-plugin-html 处理内联脚本,但它不理解 Svelte 的 <script context="module"></script> 或 {$count} 响应式声明,会导致大量误报(比如 “Unexpected token $”)。
- 在
.eslintrc.cjs或.eslintrc.js中移除plugin:html/recommended这类继承配置 - 改用
plugin:svelte/recommended(需安装eslint-plugin-svelte和svelte-eslint-parser) - 关键配置项必须加:
parser: 'svelte-eslint-parser', parserOptions: { parser: '@typescript-eslint/parser' },
补全不显示 props 或事件?检查 <script></script> 块里是否漏写了 export let
Svelte 插件的 props 补全只识别显式导出的 prop 声明。写 let name = 'foo' 不会出现在父组件传参提示里;只有 export let name = 'foo' 才会被索引。
- 组件内 props 必须用
export let(或export const)、export var显式声明 - 事件补全依赖
dispatch调用:写dispatch('click')后,父组件监听on:click才能被识别;纯字符串如'submit'不触发索引 - 使用
<slot></slot>时,插件不会自动推导具名 slot 的 props,得靠 JSDoc 注释(/** @type {import('./MyComponent.svelte').Props} */)辅助
插件本身不处理运行时逻辑,所有提示都基于静态分析 —— 没 export 就没索引,没 dispatch 就没事件,没 svelte.config.js 就没上下文。这些不是 bug,是设计约束。


















