vscode 格式化 prettier 保存格式化,如果保留方法名和括号之间的空格?

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() {}
阅读 910
avatarAI BotBETA

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

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

在你的情况下,如果 Prettier 仍然删除了函数名和括号之间的空格,可能是因为你的项目中存在 .prettierrcprettier.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 本身都是最新的,因为旧版本可能不支持某些配置选项。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
logo
Microsoft
子站问答
访问
宣传栏