本文需求在ctrl+s保存代码是自动格式化代码

在 Visual Studio Code 中，可以通过以下步骤配置保存时自动格式化文件，并使用 Prettier 作为默认格式化工具。

打开 Visual Studio Code 的设置界面，可以通过快捷键 Ctrl + , 或点击左下角的齿轮图标进入设置。

在设置搜索框中输入 editor.formatOnSave，找到该选项并勾选。这样在保存文件时，VSCode 会自动对文件进行格式化。

继续在设置搜索框中输入 editor.defaultFormatter，找到该选项并选择已安装的 Prettier 作为默认格式化工具。如果没有安装 Prettier，可以通过扩展市场搜索并安装 Prettier 扩展。

安装 Prettier 扩展

在 VS Code 中，按下 Ctrl + Shift + X 打开扩展面板。
在搜索栏中输入 “Prettier”
找到 “Prettier - Code formatter” 并点击安装。

配置 settings.json 文件

打开 VS Code 的设置文件 settings.json，添加以下配置：

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit",
    "source.organizeImports": "explicit"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}
 

通过以上配置，每次保存文件时，VSCode 都会使用 Prettier 对文件进行格式化，确保代码风格一致。

.prettierrc配置文件配置项

{
  "$schema": "https://json.schemastore.org/prettierrc",
  "printWidth": 100,                 // 每行代码最大长度
  "tabWidth": 2,                     // 缩进空格数
  "useTabs": false,                  // 是否使用tab缩进
  "semi": false,                     // 是否在语句末尾添加分号
  "singleQuote": true,               // 是否使用单引号
  "quoteProps": "as-needed",         // 对象属性引号处理 ("as-needed"|"consistent"|"preserve")
  "jsxSingleQuote": false,           // jsx中是否使用单引号
  "trailingComma": "none",           // 末尾逗号处理 ("none"|"es5"|"all")
  "bracketSpacing": true,            // 对象括号两边是否加空格 { foo: bar }
  "bracketSameLine": false,          // HTML标签闭合括号是否另起一行
  "arrowParens": "avoid",            // 箭头函数参数是否使用括号 (x) => x
  "rangeStart": 0,                   // 格式化的起始位置
  "rangeEnd": Infinity,              // 格式化的结束位置
  "parser": null,                    // 指定解析器
  "filepath": null,                  // 指定文件路径
  "requirePragma": false,            // 是否仅格式化文件顶部包含特殊注释的文件
  "insertPragma": false,             // 是否在文件顶部插入特殊标记
  "proseWrap": "preserve",          // 是否换行 ("always"|"never"|"preserve")
  "htmlWhitespaceSensitivity": "css", // HTML空白敏感度 ("css"|"strict"|"ignore")
  "vueIndentScriptAndStyle": false,   // 是否缩进Vue文件中的脚本和样式标签
  "endOfLine": "auto",               // 换行符类型 ("lf"|"crlf"|"cr"|"auto")
  "embeddedLanguageFormatting": "auto", // 是否格式化嵌入的代码
  "singleAttributePerLine": false    // HTML标签属性是否每行一个
}

这些配置可以根据项目需求进行调整。常用的重要配置有：

• printWidth: 控制代码长度
• tabWidth和useTabs: 控制缩进
• semi和singleQuote: 控制基本代码风格
• trailingComma: 控制多行时的逗号样式
• bracketSpacing: 控制对象字面量的空格

注意事项

确保配置中的值使用正确的类型，布尔值使用 true 或 false，字符串需要引号。
在最新版的 VS Code 中，某些 codeActions 值需要使用 “explicit” 而不是 true。
配置完成后，可能需要重启 VS Code 以使设置生效。