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:

相关推荐
牧野星辰6 天前
eslint你不懂的都在这里,不信你进来看嘛~
前端·eslint
这是个栗子13 天前
【问题解决】用pnpm创建的 Vue3项目找不到 .eslintrc.js文件 及 后续的eslint配置的解决办法
javascript·vue.js·pnpm·eslint
guangzan15 天前
探索 Ultracite:AI 时代零配置代码工具链的革命
eslint·prettier·biome
NicolasCage1 个月前
Eslint v9 扁平化配置学习
前端·eslint
东东2331 个月前
前端规范工具之husky与lint-staged
前端·javascript·eslint
午安~婉1 个月前
ESLint
前端·eslint·检查
啥也不会的码农1 个月前
Eslint9发布都一年了,你确定还不了解下?
前端·eslint
liuniansilence2 个月前
eslint配置实践
react.js·eslint
guangzan2 个月前
VS Code 操作 “Delete unused imports” 时,不删除 React 导入
vscode·typescript·eslint
大虾写代码2 个月前
vue3+TS项目配置Eslint+prettier+husky语法校验
前端·vue·eslint