vue&react质检工具(eslint)安装使用总结

1 、ESLint

ESLint工具主要类似java中的checkStyle和findbugs,是检查代码样式和逻辑规范的工具。

1.1 、ESLint安装流程

打开VSCode软件,打开扩展中心,下载ESLint插件

图1.1

点击后面的install按进行安装,如图1.2所示:

图1.2

在详情页启用插件服务,如图1.3所示:

图1.3

打开默认配置,准备在后面加上ESLint配置信息:

图1.4

点击此按钮打开默认配置文件

图1.5

注意在原文件最后加逗号,换行紧跟ESLint配置信息,如图1.6所示:

图1.6

接配置好后,如果想要看中文检查结果信息,调整如图所示:

图1.7

重启VSCode,重启后打开任意文件,查看软件右下方是否存在ESLint

图1.8

1.2 、ESLint使用流程

点击某个文件后,再点击右下方的ESLint插件,打开PROBLEMS选项,看有哪些问题需优化

如果右下方没有出来ESLint,可以尝试打开扩展中心后按如下三步操作进行后重启VSCode:

相关推荐
guangzan6 天前
VS Code 操作 “Delete unused imports” 时,不删除 React 导入
vscode·typescript·eslint
大虾写代码7 天前
vue3+TS项目配置Eslint+prettier+husky语法校验
前端·vue·eslint
@八度余温9 天前
eslint 和 prettier 的相同点和区别
vue·eslint
草梅友仁18 天前
草梅 Auth 1.5.0 发布与自动化发包经验 | 2025 年第 35 周草梅周报
github·自动化运维·eslint
前端工作日常1 个月前
以 Vue 项目为例串联eslint整个流程
前端·eslint
前端工作日常1 个月前
我对eslint的进一步学习
前端·eslint
尖椒土豆sss1 个月前
关于vue3 项目中使用 eslint-plugin-vue 报错踩坑记录
vue.js·代码规范·eslint
前端工作日常2 个月前
我理解的eslint配置
前端·eslint
若梦plus2 个月前
Eslint中微内核&插件化思想的应用
前端·eslint
前端工作日常2 个月前
ESLint 配置深度解析:parserOptions、env 和 flowtype 的核心作用与实战指南
typescript·eslint