VSCode for Svelte：新兴前端框架的开发环境搭建

需安装Svelte官方扩展、初始化SvelteKit项目、配置TypeScript类型检查、集成ESLint与Prettier。依次完成扩展安装、项目创建、tsconfig配置、TS服务重启及代码规范工具配置，即可搭建完整VSCode Svelte开发环境。

如果您希望在 Visual Studio Code 中高效开发 Svelte 应用，但尚未配置适配的开发环境，则可能是由于缺少核心扩展、语言支持或项目脚手架工具。以下是完成 VSCode for Svelte 开发环境搭建的步骤：

本文运行环境：MacBook Air，macOS Sequoia。

一、安装 Svelte 官方语言支持扩展

该扩展提供语法高亮、智能补全、错误诊断和跳转定义等基础语言服务，是 Svelte 在 VSCode 中正常工作的前提。

1、打开 VSCode，点击左侧活动栏中的扩展图标（或按快捷键 Ctrl+Shift+X / Cmd+Shift+X）。

2、在搜索框中输入 Svelte for VS Code，确认发布者为 Svelte（官方认证）。

3、点击“安装”按钮，安装完成后重启 VSCode 或启用扩展。

二、初始化 SvelteKit 项目并关联工作区

使用官方推荐的 SvelteKit 框架创建项目，可确保目录结构、类型定义与 VSCode 扩展协同工作。

1、在终端中执行 npm create svelte@latest my-svelte-app，按提示选择 Skeleton project 及是否启用 TypeScript。

2、进入项目目录：cd my-svelte-app，然后运行 npm install 安装依赖。

3、在 VSCode 中通过 File → Open Folder 打开该项目根目录，确保 svelte.config.js 和 tsconfig.json 文件存在于工作区根路径。

三、配置 TypeScript 类型检查与智能提示

启用 TypeScript 支持可提升组件内脚本与绑定表达式的类型安全性和开发体验。

1、确认项目中已存在 tsconfig.json，且其中包含 "compilerOptions": { "moduleResolution": "bundler", "types": ["svelte"] } 配置项。

2、在 VSCode 设置中搜索 TypeScript › Preferences: Include Package JSON Auto Imports，将其设为 auto。

3、在任意 .svelte 文件中右键选择 TypeScript: Restart TS Server，强制刷新类型服务。

四、启用 ESLint 与 Prettier 代码规范支持

集成代码检查与格式化工具可统一团队协作风格，并在编辑时实时反馈潜在问题。

1、在项目中执行 npm install --save-dev eslint prettier eslint-config-prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-svelte3。

2、创建 .eslintrc.cjs 文件，内容包含 extends: ['eslint:recommended', 'plugin:svelte3/recommended']。

3、在 VSCode 设置中启用 ESLint: Enable 和 Editor: Format On Save，并设置默认格式化工具为 esbenp.prettier-vscode（需单独安装该扩展）。