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:

相关推荐
LaiYoung_8 天前
🛡️ 代码质量的“埃癸斯”:为什么你的项目需要这面更懂业务的 ESLint 神盾?
前端·代码规范·eslint
CamilleZJ20 天前
eslint+prettier
前端·eslint·工程化·prettier
远山无期1 个月前
解决Tailwind任意值滥用:规范化CSS开发体验
前端·css·eslint
前端OnTheRun1 个月前
如何禁用项目中的ESLint配置?
javascript·vue.js·eslint
Irene19911 个月前
vs Code 中 ESLint 插件 和 npm install eslint 的区别
eslint
妮妮喔妮2 个月前
提交代码eslint报错解决
eslint
牧野星辰2 个月前
eslint你不懂的都在这里,不信你进来看嘛~
前端·eslint
这是个栗子3 个月前
【问题解决】用pnpm创建的 Vue3项目找不到 .eslintrc.js文件 及 后续的eslint配置的解决办法
javascript·vue.js·pnpm·eslint
guangzan3 个月前
探索 Ultracite:AI 时代零配置代码工具链的革命
eslint·prettier·biome
NicolasCage3 个月前
Eslint v9 扁平化配置学习
前端·eslint