要让Svelte开发在vscode中顺滑高效，需安装Svelte for vs code、ESLint、Prettier等关键扩展，配置prettier.documentSelectors、svelte.plugin.svelte.format.enable等settings.json选项，并确保项目含typescript和ESLint配置文件，最后通过launch.json启用调试与热更新。
要让 Svelte 开发在 VSCode 中顺滑高效，核心是装对扩展、配好设置、避免常见陷阱。官方推荐的配置其实很轻量，但细节决定体验好坏。
必须安装的扩展
只装这几个关键扩展，别堆砌：
- Svelte for VS Code（官方扩展，提供语法高亮、智能提示、组件跳转、Svelte 脚本/样式内类型检查）
- ESLint（配合
svelte3插件，能校验<script></script>和<script context="module"></script>块） - Prettier（格式化 .svelte 文件需额外配置，见下文）
- 可选但强烈建议：auto Rename Tag（重命名
<mycomponent></mycomponent>时自动同步闭合标签）
关键 settings.json 配置
在工作区或用户设置中加入以下项，解决最常遇到的格式化和提示问题：
- 启用 Svelte 文件的 Prettier 支持：
"prettier.documentSelectors": ["**/*.svelte"]
并确保"svelte.plugin.svelte.format.enable": true - 关闭重复的格式化冲突：
"editor.formatOnSave": true"[svelte]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } - 提升类型提示准确性：
"svelte.plugin.typescript.enable": true"svelte.plugin.svelte.inlayHints.enable": true（显示响应式声明、$ 符号绑定等内联提示）
项目级 ESLint + TypeScript 集成
仅装扩展不够，项目里得有对应配置文件：
- 初始化时用
npm create svelte@latest选 TypeScript + ESLint，会自动生成.eslintrc.cjs和eslint.config.js - 确保
eslint-plugin-svelte3（或新版eslint-plugin-svelte）已安装，并在 ESLint 配置中包含svelte3或svelte的处理器 - 在
tsconfig.json中确认"include"包含src/**/*和src/**/*.d.ts，否则<script lang="ts"></script>提示可能失效
调试与热更新小技巧
VSCode 内置调试器可直接跑 SvelteKit，不用切终端：
- 在项目根目录创建
.vscode/launch.json，内容为： { "version": "0.2.0", "configurations": [{ "type": "pwa-node", "request": "launch", "name": "SvelteKit Dev", "runtimeExecutable": "npm", "runtimeArgs": ["run", "dev", "--", "--host"], "console": "integratedTerminal", "internalConsoleOptions": "neverOpen" }] }- 按
F5启动后，断点会正常命中+page.svelte或hooks.server.ts中的代码 - 保存文件时，SvelteKit 默认热更新；若发现没反应，检查终端是否报
Failed to fetch—— 大概率是端口被占，改svelte.config.js中的port
基本上就这些。不复杂但容易忽略的是：Prettier 对 .svelte 的支持要手动打开，ESLint 必须搭配插件才能识别 <script context="module"></script>。配完重启 VSCode，再开一个 .svelte 文件试试——应该立刻看到语法高亮、悬停类型、保存即格式化、错误红线全到位。