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:

相关推荐
gqkmiss9 天前
React Vite 项目增加 eslint 和 prettier
javascript·react.js·ecmascript·eslint·prettier
PBitW11 天前
vue3+vite+eslint|prettier+elementplus+国际化+axios封装+pinia
vue.js·vite·eslint·prettier·vue3+vite·eslint+prettier
奇舞精选1 个月前
探索ESLint V8 到 V9
前端框架·eslint
Burt1 个月前
@antfu/eslint 支持 globals 全局变量
前端·uni-app·eslint
windroid1 个月前
Eslint V9.x 在 Vue项目的配置参考及踩坑记录
前端·vue.js·eslint
笨笨狗吞噬者2 个月前
为了解决路径问题,我写了一个eslint plugin
前端·javascript·eslint
一雨方知深秋2 个月前
VueCli自定义创建项目
前端·javascript·eslint·router·vuecli
一雨方知深秋2 个月前
ESlint代码规范,手动与自动修复
前端·javascript·vue.js·eslint
王解3 个月前
ESLint v9.0.0 新纪元:探索 eslint.config.js 的奥秘 (4)
开发语言·javascript·ecmascript·eslint
王解3 个月前
ESLint:从 JSLint 到 JSHint,探索 JavaScript Linter 的进化历程 (1)
javascript·eslint