如何在VS Code中配置Prettier/ESLint保留函数名与括号间空格？

VS Code自带的javascript.format.insertSpaceBeforeFunctionParenthesis设置不生效，是因为启用Prettier后，Prettier会覆盖VS Code内置的JS格式化规则。Prettier本身是**强风格（Opinionated）**工具，没有配置项支持函数名与括号间加空格，所以需要通过ESLint配合实现需求：

步骤1：配置ESLint规则控制空格 #

在项目的ESLint配置文件（如.eslintrc.json或.eslintrc.js）中添加space-before-function-paren规则，强制命名函数的名称与左括号间保留空格：

{
  "rules": {
    "space-before-function-paren": ["error", {
      "anonymous": "always",  // 匿名函数括号前加空格
      "named": "always",      // 命名函数括号前加空格
      "asyncArrow": "always"  // 异步箭头函数括号前加空格
    }]
  }
}

步骤2：确保ESLint与Prettier协同 #

如果项目同时使用Prettier和ESLint，需安装整合依赖避免规则冲突：

1. 安装依赖：

npm install eslint-config-prettier eslint-plugin-prettier --save-dev

2. 在ESLint配置中引入这些插件，确保自定义规则优先：

{
  "extends": [
    "eslint:recommended",
    "plugin:prettier/recommended"  // 最后引入，确保Prettier规则作为ESLint规则运行
  ],
  "rules": {
    "space-before-function-paren": ["error", {
      "anonymous": "always",
      "named": "always",
      "asyncArrow": "always"
    }]
  }
}

步骤3：调整VS Code设置实现自动修复 #

修改VS Code的settings.json，设置保存时自动运行ESLint修复，并将ESLint设为JS文件的默认格式化工具：

{
  // 保存时自动修复ESLint问题
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  // 启用ESLint和Prettier
  "eslint.enable": true,
  "prettier.enable": true,
  // 将ESLint设为JS文件的默认格式化工具
  "[javascript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  }
}

这样配置后，每次保存代码时，ESLint会强制函数名与左括号间保留空格，同时Prettier会处理其他格式化规则，确保代码风格一致。

内容的提问来源于stack exchange，提问作者Mark Antonie