本文介绍在 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 文件通常<strong>不生效。</script>
✅ 推荐解决方案
方案一：禁用 Svelte 扩展的自动格式化（最直接）
在 VS Code 设置（settings.json）中添加以下配置，彻底关闭 Svelte 插件的格式化能力，改用 VS Code 内置的 JavaScript/HTML 格式器（对纯 JS 逻辑更可控）：
{
"svelte.plugin.svelte.format.enable": false
}
✅ 优点：简单有效，恢复对 editor.formatOnSave 等行为的完全控制；
⚠️ 注意：Svelte 特有语法（如 {$$props}、
方案二：按需使用「格式化选中内容」+ 切换语言模式（精准控制）
适用于希望保留 Svelte 格式化能力，但仅对 JS 部分“豁免”换行的场景：
- 将光标置于 <script> 标签内（如 let positions = [...] 所在区域）； </script>
- 按 Ctrl+K Ctrl+I（Windows/Linux）或 Cmd+K Cmd+I（macOS）打开命令面板；
- 输入并执行 Change Language Mode → 选择 HTML；
- 选中目标 JS 代码（如整行数组赋值）；
- 执行 Format Selection（快捷键 Shift+Alt+F / Shift+Option+F）；
- 再次切换回语言模式为 Svelte。
? 提示：此方法利用了 VS Code 对 HTML 文档中内联 <script> 的 JS 格式化逻辑（基于内置 TypeScript formatter），它尊重 javascript.preferences.quoteStyle、javascript.format.preserveNewLines 等设置，且<strong>不会破坏 Svelte 语法结构。</script>
方案三：全局禁用 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", ... 被强行拆成多行的问题，真正让代码风格回归你的掌控。
