（26）ESLint一JS代码格式校验_eslint检验js文件

一、什么是代码格式

代码格式即为代码风格，每个程序员再开发的时候，书写代码的风格都是不一样的，比如说，有的人喜欢书写字符串时用双引号，有的喜欢用单引号，有的再书写标签代码缩进时，喜欢用2个空格，有的喜欢用4个空格等一系列的代码格式，每个人都有自己喜欢的代码风格。

二、为什么要进行代码格式校验呢

• 不同的工程师，写的代码风格不同

• 项目代码提交时，需要保持统一的代码格式

• 如何实现（ 通过工具完成代码格式校验 ）,如果自己一点点看，是不是太浪费啦！不用担心，我们有工具帮助我们！

• 给工具提供编码规范

• 工具可以根据编码规范，自动检查不规范的代码出来

三、ESLint的使用步骤

• 初始化项目（ npm init --yes ）

• 安装 ESLint （ npm i eslint -g ）

• 初始化配置文件 （ eslint --init ）

• 检查 JS 代码格式

• 单个文件 （eslint path/filename.js）

• 整个目录（eslint path/dirname）

四、ESLint的使用示例

1.初始化项目（ npm init --yes ）

2.安装 ESLint （ npm i eslint -g ）

 3.初始化配置文件 （ eslint --init ）

会看到一个交互式问卷，我们选择一下即可。

1问：你想要使用ESLint做什么？

默认是：检查句法规则和发现问题，我们先使用这个。

2问：你的项目使用什么类型的模块？

第一种事JS的规范模块，我们先用第二种。

3问：你的项目使用的是什么框架？

这里有React、Vue.js，我们没有学过可以选择最后一个，表示 "没有这些" 的意思。

4问：你的项目是否使用了TypeScript？

这个TypeScript我们后续会学习到，这个属于JavaScript的超级，JavaScript只是TypeScript的一个子模块。所以我们这里暂时选择No。

5问：你的代码再哪里运行？

选择：Browser浏览器运行。

6问：您希望您的配置文件是什么格式?

我们选择JSON文件格式。 

7问：你想要现在通过npm安装它们吗？

选择Yes，开始安装。

安装报错 

如果出现如下图安装报错现象，说明我们的package.json文件是以eslint命名的，我们需要将它换个名字就好了。

名字更换

4.配置编码规范

找到.eslintrc.json文件，当中有一个"rules"字段，我们可以再该字段中定义规则，可以参考

https://eslint.org/docs/rules/  该网站是ESLint的官网，其中有规则的定义供我们使用。

5.根据设置的编码规范，自动检查不规范的错误代码

单个文件检查 （eslint path/filename.js）

整个目录检查（eslint path/filename.js）

当函数被使用后，我们这里将他导出使用，就不会报错了。

我们将检查出来的错误改正过来了，就不会报错啦！ 

注意：我们以上示例只是定义了2个规则进行演示，将来我们需要更多的规则，可以到ESLint的官网进行查看并配置即可。