本文介绍在 vs code 中使用 svelte 项目时,如何阻止 prettier(由 svelte 扩展默认调用)将数组、函数参数等逗号分隔内容强制换行,从而保留如 ["a", "b", "c"] 的单行写法。
本文介绍在 vs code 中使用 svelte 项目时,如何阻止 prettier(由 svelte 扩展默认调用)将数组、函数参数等逗号分隔内容强制换行,从而保留如 ["a", "b", "c"] 的单行写法。
Svelte 官方扩展默认集成了 Prettier 作为代码格式化引擎,而 Prettier 是高度「意见化」(opinionated)的——它不提供细粒度的换行控制选项(例如 printWidth 或 arrayBracketSameLine 等配置在 Svelte 模式下常被忽略或受限)。因此,即使你在 VS Code 设置中调整了 JavaScript/TypeScript 的格式化选项(如 "javascript.format.wrapLineLength"),这些设置对 <script> 块内的 Svelte 文件通常不生效。
在 VS Code 设置(settings.json)中添加以下配置,彻底关闭 Svelte 插件的格式化能力,改用 VS Code 内置的 JavaScript/HTML 格式器(对纯 JS 逻辑更可控):
{ "svelte.plugin.svelte.format.enable": false}
✅ 优点:简单有效,恢复对 editor.formatOnSave 等行为的完全控制;
⚠️ 注意:Svelte 特有语法(如 {$$props}、<svelte:fragment>)将不再被格式化,但也不会被错误处理——只要语法正确,不影响运行。
适用于希望保留 Svelte 格式化能力,但仅对 JS 部分“豁免”换行的场景:
? 提示:此方法利用了 VS Code 对 HTML 文档中内联 <script> 的 JS 格式化逻辑(基于内置 TypeScript formatter),它尊重 javascript.preferences.quoteStyle、javascript.format.preserveNewLines 等设置,且不会破坏 Svelte 语法结构。
若项目已集成 ESLint,可安装 eslint-config-prettier 并配置 .eslintrc.cjs,配合 VS Code 的 ESLint 扩展启用 formatOnSave。此时格式化由 ESLint 触发,可通过 eslint.format.enable: true 和自定义规则(如 "array-element-newline": ["error", "never"])精细控制换行行为。
对于追求简洁单行数组/函数调用的开发者,方案一(禁用 svelte.plugin.svelte.format.enable)是最稳定、低维护成本的选择;若需兼顾 Svelte 模板格式化,则推荐方案二的「格式化选中内容」流程。二者均可立即解决 "1. Safelane", "2. Midlane", ... 被强行拆成多行的问题,真正让代码风格回归你的掌控。