visual-studio-code - vscode 格式化 prettier 保存格式化，如果保留方法名和括号之间的空格？

Question

rt，已配置自动保存，且已配置 insertSpaceBeforeFunctionParenthesis
.vscode/settings.json 编辑器配置

{
  "scss.lint.unknownAtRules": "ignore",
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit",
    "source.fixAll.eslint": "explicit"
  },
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "typescript.format.insertSpaceBeforeFunctionParenthesis": true,
  "npm.packageManager": "pnpm",
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.formatOnSave": true
}

但是在 ts 文件中声明方法，保存后还是会将方法名和括号之间的空格删掉……

// 保存前
function test () {}
// 保存后
function test() {}

Answer 1

在 VSCode 中使用 Prettier 进行格式化时，通常 Prettier 的行为是由其配置文件 .prettierrc、prettier.config.js 或在 package.json 中定义的 Prettier 配置来控制的，而不是直接在 VSCode 的 settings.json 中。

虽然 VSCode 的 settings.json 允许你配置一些格式化相关的设置，但 Prettier 的一些具体规则（如函数名与括号之间的空格）仍然需要在 Prettier 的配置文件中设置。

在你的情况下，如果 Prettier 仍然删除了函数名和括号之间的空格，可能是因为你的项目中存在 .prettierrc 或 prettier.config.js 文件，并且这些文件中的配置与你在 settings.json 中设置的相反。或者，Prettier 的默认配置就是这样。

为了解决这个问题，你可以在项目的根目录下创建一个 .prettierrc 文件，并添加如下配置来确保函数名和括号之间有一个空格：

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "printWidth": 80,
  "jsxSingleQuote": false,
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "always",
  "insertPragma": false,
  "requirePragma": false,
  "proseWrap": "preserve",
  "htmlWhitespaceSensitivity": "css",
  "vueIndentScriptAndStyle": true,
  "functionParenthesesSpace": true // 注意：这个选项可能不是标准的 Prettier 配置项，具体取决于你的 Prettier 版本
}

但是，请注意，functionParenthesesSpace 可能不是 Prettier 的一个标准配置项。在最新的 Prettier 版本中，通常是通过其他方式（如使用 ESLint 与 Prettier 一起）来管理这些空格的。

如果你正在使用 ESLint 并与 Prettier 集成，你可能需要在 ESLint 配置中设置相应的规则来保持这种空格。例如，使用 @typescript-eslint/space-before-function-paren 规则。

最后，确保你的 VSCode 插件和 Prettier 本身都是最新的，因为旧版本可能不支持某些配置选项。