VSCode配置Svelte开发：轻量级前端框架的环境搭建与调试

VSCode配置Svelte开发：轻量级前端框架的环境搭建与调试

免费影视、动漫、音乐、游戏、小说资源长期稳定更新！ 👉 点此立即查看 👈

其实，搞定Svelte开发环境，核心就三件事：装对扩展、配好svelte.config.js、启用Chrome调试器。这三步到位，开发流程基本就跑通了。话说回来，新手最容易卡住的地方，往往就是手动去配Webpack或者搞错了默认的语言模式。

为什么Svelte for VS Code扩展不生效？

你是不是也遇到过这种情况：插件明明装了，但.svelte文件里语法还是标红，响应式声明$:也没提示？问题很可能出在，这个扩展并不是安装完就能自动工作的——它有个硬性前提，就是项目根目录下必须存在一个svelte.config.js文件，哪怕里面是空的也行。没有这个文件，VSCode就会把.svelte文件当成普通的HTML来处理，语法高亮、代码跳转这些功能自然就全乱了。

• 最省心的办法，是用官方命令npm create svelte@latest新建项目，它会自动生成这个配置文件。如果是手动搭建的项目，别忘了在根目录自己创建一个空的svelte.config.js。
• 怎么判断文件被识别错了？打开一个.svelte文件，看一眼VSCode右下角的状态栏。如果显示的是“HTML”，那就是典型信号。点击它，选择“Svelte”，然后记得勾选“Always use Svelte for .svelte files”。
• 做完以上步骤，最后一步很关键：重启VSCode窗口（Ctrl+Shift+P，然后输入Developer: Reload Window）。否则，语言服务可能还缓存着旧的配置，导致改动不生效。

如何让.svelte文件支持Prettier格式化？

默认情况下，Prettier可认不出Svelte文件里那些