0

0

VSCode如何配置ESLint_代码质量检查工具设置

夜晨

夜晨

发布时间:2026-01-13 19:28:57

|

662人浏览过

|

来源于php中文网

原创

ESLint在VSCode不生效需同时满足三条件:本地安装eslint、启用官方ESLint插件、项目根目录存在有效配置文件(如.eslintrc.js或package.json含eslintConfig);TypeScript+React项目还需配置@typescript-eslint/parser及插件,并正确设置parser和plugins。

vscode如何配置eslint_代码质量检查工具设置

VSCode 里 ESLint 不生效?先确认插件和项目依赖是否齐备

ESLint 在 VSCode 中不报错、不提示,大概率不是配置问题,而是基础环境缺失。必须同时满足三个条件:eslint 包已安装、eslint 插件已启用、工作区有可识别的配置文件。

  • eslint 必须是本地安装(npm install eslint --save-dev),全局安装(npm install -g eslint)在多数 Workspace 场景下会被 VSCode 忽略
  • VSCode 扩展商店中安装官方插件 ESLint(作者:Microsoft),禁用其他非官方 ESLint 相关插件(如 “ESLint Snippets” 等)
  • 项目根目录需存在 .eslintrc.js.eslintrc.cjs.eslintrc.jsonpackage.json 中含 eslintConfig 字段——VSCode 的 ESLint 扩展默认只读取这些路径下的配置

如何让 ESLint 正确识别 TypeScript + React 项目

TypeScript 和 React 的语法扩展需要额外配置解析器和插件,否则会大量报 Parse errorsno-unused-vars 误报。

  • 确保已安装 @typescript-eslint/parser@typescript-eslint/eslint-plugin(推荐用 --save-dev
  • .eslintrc.cjs 中明确指定 parserplugins,例如:
module.exports = {
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  },
  rules: {
    'no-unused-vars': 'off',
    '@typescript-eslint/no-unused-vars': 'warn',
  },
};
  • 若使用 create-react-app,不要手动装 eslint-plugin-react;CRA v5+ 内置了 eslint-config-react-app,直接 extends: ['react-app'] 更稳妥

保存时自动修复(Fix on Save)为什么没反应

VSCode 的 eslint.autoFixOnSave 已被废弃,新版本必须改用 editor.codeActionsOnSave 配置,且仅对支持 fix 的规则生效。

Stenography
Stenography

一个AI驱动的代码库API

下载
  • 在工作区 .vscode/settings.json 中添加:
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
},
  • 注意:该设置不会修复所有错误,仅作用于规则中 meta.fixable === "code" 的项(比如 semiquotes 可修;no-consolecomplexity 不可修)
  • 如果保存后仍无反应,打开命令面板(Ctrl+Shift+P),运行 ESLint: Show Output Channel,查看输出中是否有 Failed to load configNo ESLint configuration found 提示

多根工作区(Multi-root Workspace)下 ESLint 配置容易失效

当用 code .code-workspace 打开多个文件夹时,ESLint 默认只读取第一个文件夹的配置,其余子文件夹的 .eslintrc 会被忽略。

  • 每个子文件夹必须独立安装 eslint 和对应插件(不能靠根目录的 node_modules)
  • VSCode 设置中关闭 eslint.packageManager 的自动推断(设为 "npm""yarn" 显式指定),避免跨文件夹误用包管理器路径
  • 如需统一规则,建议把共用配置抽成独立 npm 包(如 @myorg/eslint-config),各子项目通过 extends 引入,而非复制配置文件

最常被忽略的是:ESLint 配置的加载路径完全依赖当前编辑文件的磁盘位置,而不是 VSCode 窗口的打开方式。哪怕一个 JS 文件被拖进多根工作区,只要它物理路径不在任一已加载文件夹内,ESLint 就不会启动。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

411

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

532

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

309

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

74

2025.09.10

Golang channel原理
Golang channel原理

本专题整合了Golang channel通信相关介绍,阅读专题下面的文章了解更多详细内容。

244

2025.11.14

golang channel相关教程
golang channel相关教程

本专题整合了golang处理channel相关教程,阅读专题下面的文章了解更多详细内容。

342

2025.11.17

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

510

2023.06.20

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

244

2023.07.28

php与html混编教程大全
php与html混编教程大全

本专题整合了php和html混编相关教程,阅读专题下面的文章了解更多详细内容。

3

2026.01.13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 3.6万人学习

国外Web开发全栈课程全集
国外Web开发全栈课程全集

共12课时 | 1.0万人学习

React核心原理新老生命周期精讲
React核心原理新老生命周期精讲

共12课时 | 1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

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