Svelte for VS Code提供语法高亮、智能补全和类型检查；2. Prettier配合prettier-plugin-svelte实现代码格式统一；3. 启用TypeScript预处理器并配置tsconfig支持类型检查；4. 安装EditorConfig和ESLint确保代码一致性；5. 推荐settings.json配置默认格式化工具、保存时自动修复及补全建议，提升开发效率。
开发Svelte应用时，VS Code是许多开发者首选的编辑器。合理的插件搭配和配置能极大提升编码效率、减少错误并改善整体开发体验。以下是Svelte开发者应该安装的关键插件与推荐配置。
Svelte for VS Code
这是最核心的插件，由Svelte官方团队维护，为Svelte文件（.svelte）提供完整的语言支持。
功能包括：- 语法高亮、智能补全、跳转定义
- 组件属性提示与类型检查（配合TypeScript）
- 标签自动闭合与格式化支持
- 内联脚本和样式块的正确识别
在VS Code扩展市场搜索 “Svelte for VS Code” 或使用ID：svelte.svelte-vscode 安装。
Prettier - 代码格式化统一
Prettier 可以统一Svelte文件中的HTML、CSS和JavaScript部分的格式。
配置要点：- 在项目根目录创建 .prettierrc 文件
- 添加对Svelte文件的支持：在 .prettier.config.js 中加入
plugins: ['prettier-plugin-svelte'] - 安装 prettier-plugin-svelte 依赖：
npm install --save-dev prettier-plugin-svelte - 设置默认格式化工具为Prettier，在Svelte文件中右键“格式化文档”时选择Prettier
TypeScript Support for Svelte
如果你在Svelte项目中使用TypeScript，需要确保类型检查正常工作。
- 在 svelte.config.js 中启用 TypeScript 预处理器
- 安装 typescript 和 svelte-preprocess
- 在 jsconfig.json 或 tsconfig.json 中包含 .svelte 文件：
"include": ["src/**/*.ts", "src/**/*.svelte"]
这样VS Code就能正确识别Svelte组件中的TypeScript类型，并提供精准提示。
EditorConfig与Linting支持
保持团队协作中的一致性很重要。
- 安装 EditorConfig for VS Code 插件，读取 .editorconfig 配置
- 结合 ESLint + eslint-plugin-svelte3 实现代码规范检查
- 在VS Code设置中启用保存时自动修复：
"editor.codeActionsOnSave": { "source.fixAll.eslint": true }
推荐的VS Code设置（settings.json）
将以下配置添加到项目级或用户级 .vscode/settings.json 中：
{
"files.associations": {
"*.svelte": "html"
},
"typescript.preferences.includePackageJsonAutoImports": "auto",
"svelte.plugin.svelte.format.enable": true,
"svelte.plugin.html.completion.enable": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.quickSuggestions": {
"strings": true
}
}这些插件和配置组合起来，能让Svelte开发在VS Code中变得流畅且高效。基本上就这些。
