首页 > 开发工具 > VSCode > 正文

VSCode代码检查:配置实时检测与自动修复的完整工作流

幻影之瞳
发布: 2025-10-24 22:57:02
原创
850人浏览过
配置VSCode中ESLint与Prettier实现代码自动检查与格式化:1. 安装ESLint、Prettier扩展及项目依赖;2. 创建.eslintrc.cjs和.prettierrc文件配置规则;3. 设置.vscode/settings.json启用保存时自动修复;4. 添加.eslintignore和.prettierignore忽略无关文件。

vscode代码检查:配置实时检测与自动修复的完整工作流

在现代前端和后端开发中,代码质量至关重要。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 文件定义格式化样式:

码上飞
码上飞

码上飞(CodeFlying) 是一款AI自动化开发平台,通过自然语言描述即可自动生成完整应用程序。

码上飞 138
查看详情 码上飞
{
  "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
登录后复制

这样可以提升性能,避免误报。

基本上就这些。完成上述配置后,你在编辑代码时就能看到实时错误提示,保存时自动修复格式和常见问题,大幅提升编码效率和项目一致性。

以上就是VSCode代码检查:配置实时检测与自动修复的完整工作流的详细内容,更多请关注php中文网其它相关文章!

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号