配置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 -ynpm 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 文件定义格式化样式：
笔魂AI
笔魂AI绘画-在线AI绘画、AI画图、AI设计工具软件
403 查看详情 
{ "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_modulesdistbuild*.min.jscoverage
这样可以提升性能，避免误报。
基本上就这些。完成上述配置后，你在编辑代码时就能看到实时错误提示，保存时自动修复格式和常见问题，大幅提升编码效率和项目一致性。
以上就是VSCode代码检查：配置实时检测与自动修复的完整工作流的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/933125.html
微信扫一扫 
支付宝扫一扫 
