eslint检测代码规范

eslint官网
本文纯属小白学习记录，希望大佬们多多指教

项目创建

现在流行的前端框架大多用到eslint来规范代码风格，对于熟练者来说当然大大有利于开发，但是对于我这样的小白，真是给我造成了不少困扰，于是二话不说开始学习吧

mkdir eslint-demo #新建一个项目文件夹
cd eslint-demo
npm init
npm install eslint --save-dev #安装eslint插件
npmx eslint --init #初始化

使用npmx eslint --init 的时候，
问题一：你想要如何使用eslint?

To check syntax only： 只检查语法
To check syntax and find problems：检查语法并找出问题
To check syntax, find problems, and enforce code style：检查语法、发现问题并强制执行代码样式

可以根据项目要求或个人爱好选择你喜欢的风格
这里我选择第二种，enter继续

问题2：

What type of modules does your project use？项目想要使用什么类型的模块
JavaScript modules (import/export)
CommonJS (require/exports)
None of these

按键盘向下箭头可切换你要的选项，选中之后enter即可，这里我选择JavaScript

问题3：您的项目使用哪种框架？

我这里选择none of these

问题4：是否使用TypeScript

……

大概就是这样，根据需要选中自己要的即可，建议都过一遍，知道都是些啥，看不懂英文就粘出来百度翻译吧，嘿嘿我就是这样，哈哈

创建成功之后会有一个eslintrc.js文件

测试代码

创建src目录，新建index.js文件

执行命令测试：npx eslint yourfile.js

可以看到有报错，就是“a”被分配了一个值，但从未使用过。“no-unused-vars”表示未使用的值。

可以在官网的规则中找到这条规则

点击可查看详细内容，可以详细看一下第一段：

由于重构不完全，在代码中任何地方声明并没有使用的变量很可能是错误。这样的变量会占用代码中的空间，并可能导致读者感到困惑。

这也就是eslint用来规范编写代码的好处，从编写代码是就避免一些由于编写代码不好的习惯带来的不必要的麻烦。

回到租出的问题：打印一下变量a,再进行检测，此时就不报错了

检测多个文件

如果我们有多个文件，我们需要每个文件都去检测的话太过麻烦，所以这里看看怎么检测多个文件。

再新建一个文件util.js

可以看到这个函数是报错的，我们把index.js也改成报错的文件，使用npx eslint ./src/*.js看看能否同时检测到两个报错

可以看到，两个文件都能检测到

配置eslint脚本替换npx eslint yourfile.js命令

在package.json的script中增加"eslint": "npx eslint ./src/*.js"

然后使用npm run dev就可以检测文件了
可以自己将代码改错之后执行试试，同样是可以检测到的。