VSCode与Svelte开发环境搭建-VSCode-PHP中文网

VSCode与Svelte开发环境搭建

P粉986688829

发布： 2025-12-22 17:25:02

原创

151人浏览过

用VSCode开发Svelte项目需安装Svelte官方扩展、ESLint和Prettier，用npm create svelte@latest初始化项目，确保.vscode中配置Chrome调试器，并启用格式化、自动导入和Emmet支持。

vscode与svelte开发环境搭建

用 VSCode 开发 Svelte 项目很顺手，关键是要装对扩展、配好工具链，避免踩自动补全失效、语法标红、热更新不工作这些坑。

必备扩展：Svelte 官方支持不能少

Svelte 官方维护的 Svelte for VS Code 扩展是核心。它提供语法高亮、组件跳转、属性提示、错误实时校验等功能。安装后默认启用，但需确认项目根目录下有 svelte.config.js（哪怕内容为空），否则语言服务可能不激活。顺带推荐装上 ESLint 和 Prettier，配合 svelte-eslint 规则，代码格式和逻辑检查才完整。

项目初始化：优先用官方脚手架

别手动搭 Webpack 或 Vite 配置——直接用 Svelte 官方推荐方式：

终端运行 npm create svelte@latest my-app，按提示选模板（推荐 Skeleton project 或 With TypeScript）
进项目目录，npm install 装依赖
VSCode 打开该文件夹，确保右下角状态栏显示 “Svelte” 语言模式（不是 “HTML”）

如果打开 .svelte 文件仍是 HTML 模式，点击右下角语言名 → 选择 “Svelte”，再点 “Always use Svelte for .svelte files” 即可永久生效。

调试配置：用 Chrome 调试器跑起来

VSCode 自带的 Debugger for Chrome（或 Edge）能直接断点调试 Svelte 组件逻辑。需在项目中：

飞蛙B2B2C商城电商系统

飞蛙B2B2C（FeiWa B2B2C）商城系统是山东破浪网络科技有限公司于2017年最新推出的企业级B2B2C电商平台系统，采用PHP5+MySQL技术为基础，OOP（面向对象）方式进行核心框架搭建，结合MVC模式进行开发，可以支持Windows/Unix服务器环境，需PHP5.3及以上版本支持，可运行于包括Apache、IIS和Nginx在内的多种WEB服务器。飞蛙B2B2C（FeiWa B2

查看详情

确保已安装 npm install -D @sveltejs/vite-plugin-svelte（Vite 项目默认含）
在 .vscode/launch.json 中添加配置（若无此文件，用命令面板 Debug: Open launch.json 创建）：

{ "version": "0.2.0", "configurations": [ { "type": "pwa-chrome", "request": "launch", "name": "Launch Chrome against localhost", "url": "http://localhost:5173", "webRoot": "${workspaceFolder}", "sourceMapPathOverrides": { "webpack:///src/*": "${webRoot}/src/*" } } ] }

启动开发服务器（npm run dev），再按 F5 启动调试，断点会准确停在 <script></script> 块里。

小技巧：提升日常开发体验

几个实用设置建议：

在 VSCode 设置中搜索 “svelte plugin”，勾选 Format On Save 和 Auto Import
为 .svelte 文件启用 Emmet：设置里搜 “emmet include”, 添加 "emerald.include": ["*.svelte"]
遇到类型提示不全？检查 tsconfig.json 是否包含 "include": ["src/**/*"]，且 compilerOptions.types 包含 "svelte"