如何在Visual Studio Code中配置指定规则的自动代码格式化？

当然可以实现，你不需要依赖Prettier，通过VS Code内置配置或ESLint自定义规则就能精准满足需求，以下是两种可行方案：

方案一：利用VS Code内置格式化工具（适合单语言场景） #

VS Code对JavaScript、TypeScript、CSS等主流语言内置了格式化能力，你可以通过修改settings.json开启目标规则，同时关闭所有不需要的格式化选项：

1. 打开设置面板：按下Ctrl+,（Windows/Linux）或Cmd+,（Mac），点击右上角的「打开设置(JSON)」图标。
2. 根据你的开发语言添加对应配置（以下以JavaScript为例）：

{
  // 开启保存自动格式化
  "editor.formatOnSave": true,
  // 禁用Prettier（如果已安装）
  "prettier.enable": false,
  // 配置JavaScript的格式化规则
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features",
    // 规则1：所有括号前保留空格
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    // 规则2：控制块与函数的大括号前后换行
    "javascript.format.placeOpenBraceOnNewLineForControlBlocks": true,
    "javascript.format.placeOpenBraceOnNewLineForFunctions": true,
    // 关闭所有不需要的额外格式化规则（示例）
    "javascript.format.insertSpaceAfterCommaDelimiter": false,
    "javascript.format.insertSpaceAfterSemicolonInForStatements": false,
    "javascript.format.insertSpaceBeforeAndAfterBinaryOperators": false
  },
  // 如果使用TypeScript，添加对应配置块
  "[typescript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features",
    "typescript.format.insertSpaceBeforeFunctionParenthesis": true,
    "typescript.format.placeOpenBraceOnNewLineForControlBlocks": true,
    "typescript.format.placeOpenBraceOnNewLineForFunctions": true,
    // 同样关闭不需要的规则
  }
}

不同语言的配置项名称略有差异，比如CSS的大括号换行规则是css.format.newlineBeforeOpenBrace，你可以在设置面板搜索「[语言名] format」找到所有可用规则，将不需要的全部设为false。

方案二：使用ESLint自定义规则（适合跨语言或更灵活的场景） #

如果内置格式化无法满足需求，ESLint可以帮你精准控制仅启用指定规则：

1. 在VS Code扩展市场安装ESLint扩展。
2. 在项目根目录创建.eslintrc.json文件，配置仅启用你需要的规则：

{
  "rules": {
    // 规则1：括号前强制保留空格
    "space-before-function-paren": ["error", "always"],
    // 规则2：大括号前后换行（Allman风格）
    "brace-style": ["error", "allman"],
    // 关闭所有其他默认规则，避免额外格式化
    "no-unused-vars": "off",
    "no-undef": "off",
    "quotes": "off",
    "semi": "off"
  },
  "env": {
    "browser": true,
    "node": true,
    "es2021": true
  },
  "parserOptions": {
    "ecmaVersion": "latest"
  }
}

3. 在VS Code设置中开启ESLint自动修复：

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "prettier.enable": false,
  // 禁用内置格式化，让ESLint全权处理
  "[javascript]": {
    "editor.defaultFormatter": null
  }
}

验证效果 #

编写一段不符合规则的测试代码：

function test(){
  if(true){
    console.log('test')
  }
}

保存后应该自动修正为：

function test () {
  if (true) {
    console.log('test')
  }
}

如果仍有额外格式变动，检查配置中是否遗漏关闭了某些规则，或ESLint配置里是否还有未禁用的默认规则。

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