配置VSCode中ESLint与Prettier实现代码自动检查与格式化：1. 安装ESLint、Prettier扩展及项目依赖；2. 创建.eslintrc.cjs和.prettierrc文件配置规则；3. 设置.vscode/settings.json启用保存时自动修复；4. 添加.eslintignore和.prettierignore忽略无关文件。
在现代前端和后端开发中，代码质量至关重要。VSCode 作为最受欢迎的编辑器之一，结合 ESLint、Prettier 等工具，可以实现代码的实时检测与自动修复。以下是配置一个高效、自动化代码检查工作流的完整步骤。
1. 安装核心扩展与依赖
要实现代码检查和格式化，需先安装必要的 VSCode 扩展和项目依赖。
推荐安装以下扩展：- ESLint：提供 JavaScript/TypeScript 的静态代码分析
- Prettier - Code formatter：统一代码格式风格
在项目根目录初始化并安装依赖：
npm init -y npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier
若使用 TypeScript，还需添加：
npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin
2. 配置 ESLint 与 Prettier 规则
创建 .eslintrc.cjs 文件定义代码检查规则：
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:prettier/recommended', // 启用 Prettier 并避免冲突
],
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
},
plugins: ['@typescript-eslint'],
rules: {
'no-console': 'warn',
'no-unused-vars': 'error',
},
};创建 .prettierrc 文件定义格式化样式：
{
"semi": true,
"trailingComma": "es5",
"singleQuote": true,
"printWidth": 80,
"tabWidth": 2
}3. 设置 VSCode 编辑器行为
修改项目根目录下的 .vscode/settings.json，确保保存时自动修复问题：
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"files.autoSave": "onFocusChange"
}说明：
- formatOnSave：保存文件时自动格式化
- codeActionsOnSave：调用 ESLint 自动修复可修复的问题（如缩进、引号）
- defaultFormatter：指定默认格式化工具为 Prettier
4. 忽略不需要检查的文件
在项目根目录创建 .eslintignore 和 .prettierignore 文件，避免对生成文件或依赖进行检查：
node_modules dist build *.min.js coverage
这样可以提升性能，避免误报。
基本上就这些。完成上述配置后，你在编辑代码时就能看到实时错误提示，保存时自动修复格式和常见问题，大幅提升编码效率和项目一致性。
