给你的代码加点规范|ESLint

ESLint介绍

我们知道，当下采用工具去完成项目代码的校验工作是更加高效和合理的，在这里我们使用的就是ESLint。

他是目前最为主流的javascrit lint工具，专门用于监测javascript代码的质量。通过ESLint就可以很容易的去统一不同开发者的编码风格。例如缩进，换行，分号以及空格之类的使用。

不仅如此，ESLint还可以帮助我们找出代码当中一些不合理的地方，例如我们定义了一个从未使用的变量，或者说我们在一个变量使用之后才去他进行声明。再或者说我们在进行比较的时候往往总是选择==的符号。等等还有很多其他的一些操作。

而这些不合理的操作一般都是我们代码当中所存在的一些潜在问题，通过ESLint就能够有效的避免这些问题，从而去提高我们代码的质量。

另一方面我个人认为ESLint也可以去帮助开发者提升编码能力，为什么这么说呢，设想一下如果编写的代码每次在执行lint操作的时候都能够找出一堆的问题，而这些问题大都是以往编码时候的坏习惯。

慢慢的就应该记住了这些问题，正常来说当下次遇到的时候自己就会主动避免他们，那么久而久之你的编码能力自然而然的就得到了一个提升。

其实总结一下就是想要去表达，无论出于提高项目编码质量的原因还是提升自身编码水平的原因，ESLint都有很大的价值。

ESLint安装

首先使用ESLint就是为了校验项目的代码，因此我们需要先有一个项目。

他其实就是一款基于NodeJs开发的npm模块，所以想要使用ESLint也就需要先通过npm或者yarn安装这个模块。

最后完成安装之后我们就可以通过简单的命令来校验安装操作是否成功，明确了这些操作步骤之后我们就可以回到开发工具当中进行具体的实操。

在这里我们打开一个空的示例项目，我们先使用npm init --yes初始化项目的package.json文件用于管理项目的npm依赖。

npm init

有了package.json我们就可以安装ESLint模块了, 我们这里采用项目内安装依赖。

npm install eslint --save-dev

这里说个题外话，我们已经很少全局去安装某个npm 模块了，因为大多数情况下都是具体项目依赖某个模块，把模块安装到项目本地，让他跟着项目一起管理会更加合理。

而且别人在拿到你的项目过后不需要单独的去关心你这个项目依赖了哪些全局模块，直接通过npm install就可以安装必要的工具模块，这也就从侧面提高了项目的可维护性。

由于eslint提供了一个cli程序，所以安装完成eslint模块之后在node_modules的bin目录里就会多出一个eslint的可执行文件。

后续我们就可以直接通过这个cli程序去监测代码当中的问题。回到命令行，找到这个eslint的可执行文件。输入–version我们就看到了这个eslint所使用的版本。

cd node_modules
cd .bin
eslint --version

通过之前的学习我们已经知道，node_modules的bin目录下的工具可以直接使用npx或者yarn快速找到，不需要进入到具体的目录。

如果你使用的yarn可以直接执行yarn eslint，因为yarn会自动找到bin目录下的命令，npx是npm新集成的工具，你只要是安装了对应的npm版本就会拥有npx命令。

npx eslint --version // yarn eslint --version

最后我们补充一点题外话，不要纠结是使用npm还是使用yarn，他们两者之间其实没有绝对的好坏之分，各有各的优势，你就按照你所在团队或者项目的具体要求使用其中任何一款即可。

ESLint 快速上手

在项目中新建一个js文件。我们这里叫main.js.

我们这里故意调用fn的时候少些一个) 然后再去调用一个不存在的函数syy

const foo=123;

function fn() {
   
    console.log("hello");
        console.log("eslint);
}

fn(
syy();

在这个main.js中无论是代码还是格式还是合理性都存在一些问题, 接下来我们通过运行eslint，来查找这些问题，第一次运行时我们需要对eslint进行初始化。

npx eslint --init

运行之后会打印一些交互性的问题，第一个问题一般会问我们如何使用，这里会给出来三个选项，第一个是只检查语法错误，第二个是检查语法错误并且发现问题代码，第三个是检查错误语法，发现错误并且校验代码风格。很明显第三个是最全面的。

这里我们来具体说一下这三个功能的具体含义。

第一个语法错误很好理解，在我们的实例中fn函数的调用就是一个语法错误，因为我们少了一个小括号。

而问题代码就是指代码中不合理的地方，例如这里我们定义了一个未被使用的变量，或者说调用了一个不存在的函数。这些都属于问题代码。

第三个代码风格是最容易理解的。在最初的时候我们对ESLint的期望值就是，希望他能去找出代码当中子编码风格上存在的一些问题。例如我们代码当中的缩进是不统一的。

我相信你看到这里就应该能感受到ESLint带来的具体价值了。

知道了这些之后我们在这里就能去做出一些选择了，我们这里选择第三个。在实际的代码开发中我们也建议选择第三个，因为这样可以让你的代码质量得到最大的保障。

选择完成之后命令行的终端就出现了第二个问题，项目代码中的模块化采用的是哪一种，同样这里也是三个选项。

第一个是ES Modules，第二个是CommonJS也就是require函数的方式，第三个是没有用到任何的模块化。简单来说这里的效果就是决定你的代码当中是否允许去出现指定的语法或者说调用。

例如如果你选择的是CommonJS那就允许使用全局的require函数和exports对象，如果你选择是ES Modules那就可以去使用export和import语法，我们这里没有用到模块化，所以我们就选择没有任何模块化。

选择之后紧接着就出现了第三个问题，选择哪一款框架，这里有react和vue我们这里暂时先选择node，什么都没用。

然后是第四个问题，有么有使用typescript，如果用到了就输入y，默认是N。

第五个问题询问我们代码最终运行在哪个环境，默认给出的是浏览器，这里可以选择浏览器额node。这里是根据你的运行环境判断是否允许使用相应环境下的API，在这里我们默认选中了浏览器。

第六个问题是询问如何定义代码风格，这里有三个选择，第一个是使用市面上的主流风格，第二个是通过一些问题去形成一个风格，第三个是根据代码文件推断出风格。一般情况下我们都是采用市面上的主流代码风格。这样的话如果我们的项目有新的成员加入他也可以更好更快的适应我们的风格。

选择之后这里又会给出三个主流风格，分别是airbnb，standard和google，其中airbnb和google分别是这两家公司的具体编码规范，而standard是开源社区的一套规范。我个人平时采用的就是这个规范。他最大的特点就是不用在语句的末尾添加分号。这里没有标准，只需要按照团队的标准执行就好了。我们这里选择standard。

最后一个问题询问我们配置文件需要以什么样的格式存放，我习惯使用js方式，因为可以添加代码，书写更多的逻辑。

回车之后会提醒我们需要再安装几个插件，这是因为我们刚刚选择的风格需要依赖一些插件。

安装过后项目的根目录下面就会多出一个eslint的配置文件，.eslintrc.js, 有了这个配置文件过后我们执行下面的命令去校验我们这里的main.js。

执行这里需要跟上文件路径，这里也可以使用路径的通配符进行批量的检查, 运行之后eslint就能够对文件自动的进行代码检查了。

npx eslint ./main.js

执行结果表示检查出一个error语法错误，也就是函数少个小括号的错误，我们回到代码中修正这个错误，再次执行eslint。

const foo=123;

function fn() {
   
    console.log("hello");
        console.log("eslint);
}

fn()
syy();

这一次我们就看到了更多的错误，可能你会好奇为什么刚刚我们没有找出这些错误呢，其实原因非常简单，当我们代码中存在着语法错误时，eslint是没有办法去检查问题代码和代码风格的，那么这个时候你就可以自己根据提示找到具体的问题代码。然后依次的进行解决。

也可以根据–fix参数，来自动修正绝大多数代码风格上的问题。

npx eslint ./main.js --fix

那些风格上的代码就已经被自动修正了，非常的方便。

不过如果你自己还没有养成良好的编码习惯建议在开始的使用还是手动的去修改每一个不好的地方，因为这样就可以加深我们的印象。

作为一个优秀的开发人员，我们写出来的代码他本身就应该是格式良好的，而不是后来去依赖这些工具，进行格式化。这些工具他只是在最后用于确保你代码的质量。

const foo = 123;

function fn () {
   
    console.log("hello");

    console.log("eslint);
}

fn()

syy()

在最后我们会看到还有两个没有被自动fix的问题，我们需要回到代码当中自己手动的进行处理。这里foo变量是无意义的，syy函数没有定义，删除这两个内容。再次运行eslint检查，代码本身的问题就全部解决了。

以上这些就是eslint的基本作用。简单总结就是两点，第一eslint可以去找出代码当中的问题，而这个问题包括语法错误，代码不合理还有风格不统一。第二eslint可以自动去修复代码风格上的绝大多数问题。

ESLint 配置文件解析

这里来深入的去了解一下eslint的配置文件，之前我们通过eslint --int在项目根目录下创建了一个叫做.eslintrc.js的配置文件。

在这个文件中写入的配置就会影响到当前这个目录以及所有子目录的文件，正常情况下我们是不会手动去修改这个配置，但是如果我们需要去开启或者说关闭某些校验规则的时候那这个配置文件就会非常重要。

下面我们就来具体的看一下它里面的配置内容。我们打开配置文件看一下。因为这个文件最终也是运行在nodejs当中，所以可以看到这里是以CommonJS的方式导出了一个对象。

module.exports = {
   
    env: {
   
        browser: true,
        es2020: true
    },
    extends: [
        'standard'
    ],
    parserOptions: {
   
        ecamVersion: 11
    },
    rules: {
   

    }
}

在这个配置对象当中目前是有4个配置选项，其中第一个配置项叫做env, 我们都知道JavaScript在不同的运行环境中是有不同的API可以被调用，而这些API很多时候都是以全局的成员方式去提供出来，例如在浏览器环境我们可以直接去使用window和document对象，而在nodejs环境当中确不存在这些对象。

这个env的选项作用就是标记代码最终的运行环境，eslint会根据环