VSCode写JS用什么代码检查最严格_VSCode配置ESLint【探讨】

轻伟大大_9033

轻伟大大_9033

2026-05-20

281人浏览

原创

eslint最严格源于可定制的parser与插件链:默认配置宽松,需手动配置@babel/eslint-parser等解析器支持现代语法,并通过extends引入eslint:recommended、plugin:react、plugin:import等插件组合规则,vscode需对齐本地版本并使用commonjs格式配置文件。

vscode写js用什么代码检查最严格_vscode配置eslint【探讨】

ESLint 是目前 VSCode 中 JavaScript 代码检查最严格、可定制性最强的选择,但它“严格”不来自开箱即用,而取决于你如何配 parser、extends 和 rules —— 默认配置其实很宽松。

为什么 ESLint 能做到最严格?关键在 parser 和插件链

ESLint 本身只做规则校验,真正决定“能不能解析 JSX/TS/Top-level await”的是 parser。默认用 @babel/eslint-parser 或 @typescript-eslint/parser 才能覆盖现代语法;否则遇到 const Foo = () => <div></div> 就直接报 Parse error: Unexpected token,连规则都不跑。

严格性还来自插件组合:

  • eslint:recommended 只开 20 条基础规则(如 no-unused-vars),远不够
  • 加 plugin:react/recommended + plugin:react-hooks/recommended 才会检查 useEffect 依赖项
  • 加 plugin:jsx-a11y/recommended 才校验无障碍属性(alt 缺失、role 拼错)
  • 加 plugin:import/recommended 才报 import/no-unresolved 或循环引用

这些不是“开关”,是独立 npm 包,必须显式安装并写进 extends 数组里。

VSCode 不报错但命令行 eslint 正常?90% 是没走本地版本

VSCode 默认找全局 eslint,而项目里装的是 node_modules/.bin/eslint —— 两者版本、插件、解析器路径全不同。典型表现:右下角 ESLint 图标显示 Using globally installed ESLint。

必须手动对齐:

  • 在工作区 .vscode/settings.json 里加:"eslint.packageManager": "npm"(或 "pnpm",和你项目一致)
  • 确认根目录有 package.json 且已运行 npm install
  • 删掉 eslint.nodePath 字段(它已被弃用,新版插件不认)
  • 重启窗口,或执行 Developer: Reload Window

别信“已安装插件就自动生效”——VSCode 的 ESLint 扩展不会主动扫描 node_modules,它只按设置去调用可执行文件。

Browser Js
Browser Js

轻量级CDP浏览器控制,适用于AI代理。相较于内置浏览器工具,token消耗降低3‑10倍,仅在浏览时使用。

下载

.eslintrc.js 里 module.exports = {} 和 export default 都不行?

VSCode 的 ESLint 插件(截至 2026 年 5 月)仍基于 Node.js 的 CommonJS 加载机制,export default 是 ESM 语法,直接报 Cannot use import statement outside a module。

正确写法只有两种:

  • module.exports = { rules: { 'no-console': 'warn' } }(.eslintrc.js)
  • module.exports = { ...require('@rushstack/eslint-patch/modern-module-resolution') }(需额外 patch 才支持 modern import)

如果用了 eslint.config.js(ESLint v8.22+ 新格式),必须在设置里显式指定:"eslint.options": { "configFile": "./eslint.config.js" },否则插件直接跳过。

保存时 auto-fix 把代码改崩了?别开 source.fixAll

"editor.codeActionsOnSave": { "source.fixAll.eslint": true } 看似方便,实则危险:它会触发所有注册的修复器,包括 Prettier(如果你装了 Prettier 扩展)、TypeScript 的自动导入、甚至某些插件的重命名逻辑。

更安全的做法是只放 ESLint 自己能 fix 的规则:

  • 用 "source.fixAll.eslint": true(确保其他扩展没注册同名 action)
  • 或更细粒度:"source.fixAll.eslint": ["semi", "quotes", "no-trailing-spaces"]
  • 绝对不要开 "source.fixAll": true —— 它会混入非 ESLint 的修复器,顺序不可控

React 项目里尤其明显:source.fixAll 可能强行加 import React from 'react' 到 .js 文件,而你的 Babel config 明确关掉了自动注入。

最易被忽略的一点:ESLint 的严格性永远受限于 parser 能否成功解析。JSX 报错、TS 类型不提示、import.meta.env 标红……八成不是规则没开,而是 parserOptions.project 没指向 tsconfig.json,或 ecmaVersion 还卡在 2018。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

vscode js

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
vscode是什么_vscode怎么安装配置
vscode是什么_vscode怎么安装配置

VS Code(Visual Studio Code)是一款免费、开源的跨平台代码编辑器,由微软开发和维护。它被广泛用于软件开发和编程,支持多种编程语言和框架。VS Code 同时提供了丰富的功能和扩展性,使开发者可以高效地编写、编辑和调试代码。

2023.06.30

1315

18

vscode怎么运行代码
vscode怎么运行代码

vscode是一个运行于MacOS X、Windows和Linux之上的,针对于编写现代Web和云应用的跨平台源代码编辑器;vscode免费而且功能强大,对JavaScript和NodeJS的支持非常好,自带很多功能,例如代码格式化,代码智能提示补全、Emmet插件等。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

2023.07.21

2752

3

vscode使用的框架介绍
vscode使用的框架介绍

VSCode是一款跨平台代码编辑器,它基于Electron框架和Monaco Editor构建。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.14

1929

12

vscode一般用来写什么语言
vscode一般用来写什么语言

VSCode是一款功能强大的代码编辑器,支持多种编程语言和文件格式。它内置对 JavaScript、Python、Java、C++、TypeScript、HTML/CSS、Go 等语言的支持。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.14

1727

8

vscode可以写什么语言
vscode可以写什么语言

vscode是一款强大的代码编辑器,支持多种编程语言的开发。通过安装扩展,可以为 JavaScript/TypeScript、Python、Java、C#、PHP、Go、Ruby、Rust、HTML/CSS 等语言提供智能代码补全、调试和格式化等功能。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.15

2587

12

vscode中文设置方法
vscode中文设置方法

方法一:在设置页面中,搜索“locale”,并选择“zh-cn”。方法二:按“Ctrl Shift P”快捷键,输入“Configure Display Language”,将语言修改为“zh-cn”。如果上述方法无效,可考虑安装中文插件。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.15

1818

14

vscode用途介绍
vscode用途介绍

Visual Studio Code(VSCode)是一款由 Microsoft 开发的多功能文本编辑器,适用于各种编程语言。作为一款开源软件,VSCode 拥有代码高亮、自动补全、调试、Git 集成等强大功能,成为程序员不可或缺的工具。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.15

1242

10

vscode和visualstudio的区别
vscode和visualstudio的区别

Visual Studio是一款功能强大的集成开发环境(IDE),适用于专业开发人员进行复杂项目的构建。而VSCode则是一款轻量级的代码编辑器,更适合各种规模的项目开发。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.15

1116

8

vscode设置中文界面不生效解决方法
vscode设置中文界面不生效解决方法

vscode设置中文界面不生效解决方法:安装中文语言包、通过命令面板设置语言、检查 locale.json 设置、重新安装中文语言包、检查 VSCode 版本和更新、排除插件冲突、检查系统语言设置、查看 VSCode 日志和错误消息、重置 VSCode 设置、查看官方文档和社区支持。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.15

474

5

热门下载

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

精品课程

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