配置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-plugin2. 配置 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这样可以提升性能，避免误报。
基本上就这些。完成上述配置后，你在编辑代码时就能看到实时错误提示，保存时自动修复格式和常见问题，大幅提升编码效率和项目一致性。