VSCode代码：格式化与规范检查

配置 Prettier 和 ESLint 可实现 VSCode 保存时自动格式化与规范检查。首先安装 Prettier 和 ESLint 扩展，创建 .prettierrc 定义格式规则，如分号、单引号、行宽等；在 settings.json 中启用 "editor.formatOnSave" 并设置默认格式化工具为 Prettier。接着初始化 ESLint，生成 .eslintrc.js 配置文件，选择环境与规则，集成 "eslint:recommended" 与 "plugin:prettier/recommended"，安装 eslint-config-prettier 插件避免规则冲突。最后统一 settings.json：开启保存自动修复 "source.fixAll.eslint"，指定验证语言类型，并将配置文件提交版本控制，确保团队一致性。通过本地安装依赖和项目级配置，实现跨设备统一开发体验。

在使用 VSCode 进行开发时，代码的格式化与规范检查能极大提升团队协作效率和代码质量。通过集成工具如 Prettier 和 ESLint，可以实现保存时自动格式化、语法规范校验、错误高亮提示等功能。

配置 Prettier 实现代码格式化

Prettier 是一个流行的代码格式化工具，支持 JavaScript、TypeScript、CSS、HTML、JSON 等多种语言。

• 打开 VSCode 扩展市场（Ctrl+Shift+X）
• 搜索 “Prettier - Code formatter” 并安装

在项目根目录下创建 .prettierrc 文件定义格式规则：

{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2
}

启用保存时自动格式化：

• 打开 VSCode 设置（Ctrl+,）
• 勾选 “Editor: Format On Save” 或添加如下配置到 settings.json：

<pre class="brush:php;toolbar:false;">"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"

集成 ESLint 进行规范检查

ESLint 能帮助发现代码中的潜在问题并强制执行编码规范，尤其适合 JavaScript/TypeScript 项目。

• 在扩展中搜索 “ESLint” 并安装由 Microsoft 提供的版本

npm init @eslint/config

按照提示选择环境、模块系统、框架等，生成 .eslintrc.js 或 .eslintrc.json 文件。

常见 ESLint 配置示例：

代码小浣熊

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

51

查看详情

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:prettier/recommended"
  ],
  "rules": {
    "no-console": "warn",
    "no-unused-vars": "error"
  }
}

确保 ESLint 与 Prettier 协同工作：

• 安装依赖：npm install --save-dev eslint-config-prettier
• 在 extends 中包含 prettier 以关闭冲突规则

统一设置：让编辑器自动处理一切

将格式化与检查流程整合进 VSCode，实现“保存即修复”体验。

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript", "typescript", "vue"],
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

这样，在保存文件时，ESLint 会自动修复可修复的问题，Prettier 完成格式化。

项目级配置优先于全局设置

建议在项目中使用本地安装的工具和配置文件，避免不同机器间差异。

• 使用 .vscode/settings.json 存放项目专属编辑器设置
• 将 .prettierrc、.eslintrc.* 提交到版本控制
• 通过 .prettierignore 和 .eslintignore 忽略构建产物

基本上就这些。合理配置后，VSCode 能在你写代码时默默帮你保持风格统一，减少低级错误，提升整体开发体验。

以上就是VSCode代码：格式化与规范检查的详细内容，更多请关注php中文网其它相关文章！