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:

相关推荐
先吃饱再说1 天前
代码写得好不好,谁说了算?ESLint 如何让团队代码风格“自动统一”
代码规范·eslint
Darling噜啦啦1 天前
别再写"烂代码"了!ESLint v10 完整实战,用 Flat Config 治好团队的代码洁癖
eslint
烬羽1 天前
ESLint 10 把 .eslintrc 删了:flat config 到底怎么配,我帮你踩完了
代码规范·eslint·前端工程化
Asize2 天前
ESLint 到底在帮我们守住什么?从规则配置到工程实践
代码规范·eslint
嘟嘟07172 天前
ESLint 入门:从 npm run lint 到 --fix 与规则级别一次讲清
javascript·代码规范·eslint
Flynt17 天前
我用Biome替换ESLint+Prettier在项目上踩了不少坑
rust·eslint·前端工程化
任磊abc1 个月前
react native项目配置eslint+prettier
react native·eslint·prettier
任磊abc2 个月前
nextjs16配置eslint+prettier
前端·eslint·nextjs·prettier
梵得儿SHI3 个月前
Vue 项目实战与性能优化:工程化与协作全指南(规范 + 配置 + 协作 + 文档)
前端·vue.js·代码规范·eslint·团队协作·前端工程化·前端架构
LIO4 个月前
ESLint 极简指南:让代码既规范又一致
前端·eslint