配置 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 等多种语言。
安装 Prettier 扩展：- 打开 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：
"editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode"集成 ESLint 进行规范检查
ESLint 能帮助发现代码中的潜在问题并强制执行编码规范，尤其适合 JavaScript/TypeScript 项目。
安装 ESLint 扩展：
- 在扩展中搜索 “ESLint” 并安装由 Microsoft 提供的版本
npm init @eslint/config
按照提示选择环境、模块系统、框架等，生成 .eslintrc.js 或 .eslintrc.json 文件。
常见 ESLint 配置示例：
{
"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，实现“保存即修复”体验。
推荐 settings.json 配置：{
"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 能在你写代码时默默帮你保持风格统一，减少低级错误，提升整体开发体验。
