VSCode代码格式化配置

首先设置VSCode默认格式化工具并启用保存自动格式化，接着在项目中配置.prettierrc和.editorconfig文件统一团队代码风格，最后集成ESLint与Prettier协同工作确保JavaScript/TypeScript代码一致性。

VSCode 的代码格式化配置可以帮助你保持代码风格统一，提升可读性。关键在于正确设置编辑器默认格式化工具，并结合项目级配置文件实现团队协作一致。

启用并设置默认格式化工具

确保 VSCode 使用你喜欢的格式化程序，比如 Prettier、ESLint 或 Beautify：

• 打开设置（Ctrl + , 或菜单 File > Preferences > Settings）
• 搜索 “Default Formatter”
• 选择对应语言的格式化工具，例如使用 Prettier 时设为 esbenp.prettier-vscode
• 勾选 “Format On Save”，保存时自动格式化

配置项目级 .prettierrc 和 .editorconfig

在项目根目录添加配置文件，保证团队成员格式统一：

代码小浣熊

代码小浣熊是基于商汤大语言模型的软件智能研发助手，覆盖软件需求分析、架构设计、代码编写、软件测试等环节

51

查看详情

• 创建 .prettierrc 文件定义格式规则：

  <font face="Courier New">{
    "semi": true,
    "trailingComma": "es5",
    "singleQuote": true,
    "printWidth": 80,
    "tabWidth": 2
  }</font>

  登录后复制
• 添加 .editorconfig 补充基础编辑行为：

  <font face="Courier New">root = true
  
  [*]
  indent_style = space
  indent_size = 2
  end_of_line = lf
  charset = utf-8
  trim_trailing_whitespace = true
  insert_final_newline = true</font>

  登录后复制

结合 ESLint 自动修复（适用于 JavaScript/TypeScript）

若使用 ESLint，可通过插件与 Prettier 协同工作：

• 安装依赖：npm install --save-dev eslint-config-prettier eslint-plugin-prettier
• 在 .eslintrc.js 中启用：

  <font face="Courier New">extends: [
    'eslint:recommended',
    'plugin:prettier/recommended'
  ]</font>

  登录后复制
• VSCode 安装 ESLint 插件（dbaeumer.vscode-eslint）
• 设置 ESLint 为默认格式化提供者之一，避免冲突

以上就是VSCode代码格式化配置的详细内容，更多请关注php中文网其它相关文章！