怎样禁用 VS Code 中 Svelte 文件的自动换行格式化

本文介绍在 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 文件通常不生效。

✅ 推荐解决方案

方案一：禁用 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 部分“豁免”换行的场景：

1. 将光标置于 <script> 标签内（如 let positions = [...] 所在区域）；
2. 按 Ctrl+K Ctrl+I（Windows/Linux）或 Cmd+K Cmd+I（macOS）打开命令面板；
3. 输入并执行 Change Language Mode → 选择 HTML；
4. 选中目标 JS 代码（如整行数组赋值）；
5. 执行 Format Selection（快捷键 Shift+Alt+F / Shift+Option+F）；
6. 再次切换回语言模式为 Svelte。

? 提示：此方法利用了 VS Code 对 HTML 文档中内联 <script> 的 JS 格式化逻辑（基于内置 TypeScript formatter），它尊重 javascript.preferences.quoteStyle、javascript.format.preserveNewLines 等设置，且不会破坏 Svelte 语法结构。

方案三：全局禁用 Prettier，改用 ESLint + Prettier（进阶）

若项目已集成 ESLint，可安装 eslint-config-prettier 并配置 .eslintrc.cjs，配合 VS Code 的 ESLint 扩展启用 formatOnSave。此时格式化由 ESLint 触发，可通过 eslint.format.enable: true 和自定义规则（如 "array-element-newline": ["error", "never"]）精细控制换行行为。

⚠️ 注意事项

• 不要尝试通过 prettier.config.js 设置 bracketSameLine: true 或 singleAttributePerLine: false —— Svelte 扩展当前版本（v106+）忽略大多数 Prettier 配置项；
• 修改 settings.json 后需重启 VS Code 窗口（或重载窗口 Ctrl+Shift+P → Developer: Reload Window）使配置生效；
• 若使用 Prettier 作为项目级依赖，请确保 .prettierrc 不被 Svelte 扩展读取（它优先使用内置 Prettier，而非项目配置）。

✅ 总结

对于追求简洁单行数组/函数调用的开发者，方案一（禁用 svelte.plugin.svelte.format.enable）是最稳定、低维护成本的选择；若需兼顾 Svelte 模板格式化，则推荐方案二的「格式化选中内容」流程。二者均可立即解决 "1. Safelane", "2. Midlane", ... 被强行拆成多行的问题，真正让代码风格回归你的掌控。