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:

相关推荐
光头程序员22 天前
自定义 eslint 规则
eslint
non_hana1 个月前
一些 linter & formatter 配置最佳实践
typescript·node.js·eslint
锈儿海老师1 个月前
AST 工具大PK!Biome 的 GritQL 插件 vs. ast-grep,谁是你的菜?
前端·javascript·eslint
去伪存真1 个月前
提交规范靠吼没用,看我用“shell+husky螺丝刀”,一键给40多个项目上锁
前端·eslint
wanna1 个月前
eslint使用
eslint
去伪存真2 个月前
ESLint + Husky 如何只扫描发生改动的文件?
前端·eslint
孟陬3 个月前
利用 caniuse 结合 browserslist 对 JS 做兼容性检测
typescript·eslint·trae
USER_A0013 个月前
【VUE3】Eslint 与 Prettier 的配置
vue3·eslint·prettier
去伪存真3 个月前
给接手历史项目配置ESLint+Prettier,发现还是会踩坑
前端·eslint
卡列尼娜翠花4 个月前
vscode 导入语句排序和删除未使用的导入
前端·javascript·vscode·编辑器·eslint·前端工程化·esm