本文介绍如何在 vs code 中阻止 svelte 文件中 javascript 数组、函数调用等结构被 prettier 自动展开为多行，保留紧凑单行写法，同时兼顾语法正确性与开发体验。
本文介绍如何在 vs code 中阻止 svelte 文件中 javascript 数组、函数调用等结构被 prettier 自动展开为多行，保留紧凑单行写法，同时兼顾语法正确性与开发体验。
VS Code 对 Svelte 文件的格式化默认由官方 Svelte for VS Code 扩展驱动，而该扩展底层集成的是 Prettier —— 一个高度“固执己见”（opinionated）的代码格式化工具。Prettier 默认将数组字面量、对象属性、函数参数等以逗号分隔的结构强制换行排列（即所谓的 multiline array/object formatting），这正是你看到 ["1. Safelane", "2. Midlane", ...] 被转为多行形式的原因。
⚠️ 注意：仅调整 VS Code 内置的 "editor.formatOnSave" 或搜索“format”相关设置（如 javascript.preferences.quoteStyle、typescript.format.*）无法生效，因为 Svelte 文件中的 <script> 块由 Svelte 插件接管，其格式化行为不受通用 JS/TS 设置控制。
✅ 可行解决方案
方案一：完全禁用 Svelte 插件的格式化（最简单）
在 VS Code 设置（settings.json）中添加：
"svelte.plugin.svelte.format.enable": false
这样 Svelte 文件将不再触发 Prettier 格式化，你可手动使用 VS Code 默认的 JavaScript 格式器（基于 TypeScript 语言服务）——它支持更灵活的换行策略，且默认不会强制展开短数组。
✅ 优点：配置简单，立即生效
❌ 缺点：失去 Svelte 特有语法（如 $$props, $$slots, <svelte:fragment>）的格式化支持
方案二：按需使用默认格式器（推荐用于局部控制）
当需要保持 Svelte 语法高亮与校验，又想保留某段 JS 的紧凑格式时，可采用“选择性格式化”技巧：
- 将光标置于 <script> 标签内；
- 按 Ctrl+K Ctrl+L（Windows/Linux）或 Cmd+K Cmd+L（macOS）将语言模式临时切换为 HTML（此时 VS Code 启用内置 HTML/JS 格式器）；
- 选中目标代码（例如 let positions = ["1. Safelane", "2. Midlane", ...];）；
- 执行命令 Format Selection（快捷键 Shift+Alt+F / Shift+Option+F）；
- 切回语言模式为 Svelte。
✅ 此方法绕过 Prettier，利用 VS Code 原生 JS 格式逻辑，对短数组、简单函数调用通常保持单行。
方案三：自定义 Prettier 配置（进阶，有限效果）
若坚持使用 Prettier，可在项目根目录添加 .prettierrc：
{
"printWidth": 120,
"singleQuote": true,
"bracketSpacing": true,
"arrowParens": "avoid",
"jsxSingleQuote": false,
"trailingComma": "none"
}但请注意：Pretterr 不提供 array-should-stay-on-one-line-if-short 类选项。其换行策略由 printWidth + 内部启发式算法决定，即使设为 120，短数组仍可能被拆行。因此该方案无法 100% 保证你的 positions 数组不换行。
? 总结建议
- 日常开发中，优先尝试方案一（禁用 Svelte 格式化）+ 启用 editor.formatOnSave，再配合合理的 printWidth（如 100）和 javascript.preferences.quoteStyle 等通用设置，往往能获得更可控的 JS 格式体验；
- 若需保留 Svelte 特性检查（如 $: 声明响应式变量、{#if} 模板校验），则采用方案二的“格式化选中代码”工作流，既安全又精准；
- 避免在 Svelte 文件中依赖全局 Prettier 配置来抑制换行——这不是设计目标，强行适配反而增加维护成本。
最终，代码可读性 ≠ 强制换行；简洁清晰的单行数组，在语义明确、长度合理时，恰恰是更优实践。
