15-尚硅谷-webpack从入门到精通-js语法检查eslint

好，接下来我们来学习JS的语法检查。我们打开Vs code来新建个文件夹啊，叫JS语法检查。嗯。好，那么我们来看看到底什么是语法检查，我们来先写一个配置文件。我们呢，将一些准备工作呢给做好啊，来快速写一下。的一个对象对吧，这里面呢，写上我们的ENT的配置们入口文件啊，点看JS下面的啊，当然是SC下面的JS下面的JS。好，然后呢，再写一个输出output。好，是个对象，在这里面写上file name。好呢，是位于GS下面的S。好，接下来呢，还有个pass啊，Pass呢是个路径，通过方法去拼接这个路径，然后呢，是必。

OK，那么还有一个Mo啊，待会呢，我们在这里面要写上我们的相关的配置啊。啊好，那么还有插件啊，因为我们最终要在页面中看到效果啊，所以这里面我们得使用插件，就在HTML。我不排行。好，这里面呢写的参数tablelatet为为我们的典型SC下面的JS。然后呢，模式呢，我们暂且呢，先调为开发模式。好，那么这些两个库两个东西呢，需要引进了啊，一个是方法来自于核心模块pass。那么还需要引入的一个是这个HL这个插件啊，那么我们将它引入。

好，那么到这呢，我们就写完了一个非常非常基本的配置啊，那么语法检查它到底代表什么含义呢？诶，我们可以说一下。在这里。啊，所谓的语法检查啊。就是我们在团队工作的时候，我们希望呢，咱们团队的写的代码的风格是差不多的，诶这时候我们就可以用这个语法进行检查，JS的语法检查，它可以规范啊，比方说诶你应该怎么写代码，他应该怎么写代码，诶发现你如果写代码不一样，诶就会出报错，要求你呢整改。所以最终呢，可以让所有人的代码的风格是类类似的啊，语法检查，同时呢，它还能检查一些常见的一些语法错误啊，让我们呢代码呢不容易出问题，所以呢要进行语法检查。而语法检查最常用的工具呢，就是这个了啊，就是就专门用来做语法检查。同样的在我们中要想使用的话呢，使用。

好，这里要特别注意啊，Yes呢，依赖于一个这个库，所以我们要下载的东西呢，至少有两个，一个是yes，一个是。好，那么它配置的话呢，非常简单啊，也是它需要整改的啊，它暂且呢，需要整改里面配置。啊，所以呢，Louder使用的是yes is louder。Options好，具体options写什么？现在还不需要写，我们先空着啊。好，那么这里面要注意它要检测什么文件呢，那么语法检查呢，只针对于GS来做啊，所以这里面呢，我们的正则呢，得写JS代码。好，这是针对于JS进行语法检查，同时我们要注意啊，因为我们在写代码的时候呢，有很多not modus啊，比方说我们引了啊，这里面就会从not引入，这个我们引入我们在这里PA这里面使用了很多插件，那么它呢也这个呢也会对那些插件生效。

大家注意，我们语法检查要特别注意，就是指检查。只检查啊，用户自己只检查源代码。自己写的源代码。别人的代码啊，别人的第三方的。是不检查的。因为他们早就检查过了啊。啊，所以我们这里呢，要通过一个属性啊，一个属性加could啊，你错了呢，干嘛呢。排除这个no MOS里面东西啊，排除第三方的一些东西啊，千万不要检查，一旦检查呢，就会报错啊就会报错。好了，那么他呢，当你写完这儿呢，他就会进行语法检查，但是有问题就是他不知道要检查的规则是什么。所以你还得设置检查规则。而设置检查规则的话呢，在我们的也是package中。

啊叫做is con去设置。在这里面设置。好，这里面的规则啊，我们推荐大家使用的规则呢，叫做一个LB规则。为什么推荐使用这个LB规则呢？我们可以打开这个一个网站啊，叫做GI up，诶大家也知道啊，GI呢是我们全球最大的一个这个代码交流交流网站，这里面包含着我们很多的一些啊，开与的一些项目啊，一些东西。其中呢，在这里面呢，我们去探索探索啊，通过探索呢，找到一个主题，找这个主题就是我们主题。那么这里下面呢，就是我们JS这个最受欢迎的仓库了。其中第一大仓库呢，有30万的产量啊，是这个啊，代码逊零，第二个呢，是我们的框架叫view啊，第三个呢是一个。那么第四个呢，是一个，呃，也是一个UI库啊，是个。那么第五个呢，是一本书啊，你动JS啊，你不知道JS，那么第六个呢，就是我们推荐的这个L的这个风格指南。

那么在这风格指南中呢，他会详细的给你介绍，诶，你怎么去写这S代码，你不应该怎么写代码，那么大家呢，想研究这里面的里面的具体规则呢，那么一定要点开这个库去看一看啊，这12辆呢，有将近10万啊，是非常优秀的一个库。他们会告诉你很多，你该怎么，该如何去写这个JS代码。那么这个就是大家都可以详细的看看里面的规则啊，我们就给大家一个过了啊，这里面的规则。好，它这里面呢，大家打开的时候呢，会发现有中文翻译啊，会有中文翻译。那么我们要看嘛呢，我们要想办法啊，将这个规则呢，给应用到e link上啊，得应用在E上，那么得怎么用呢？诶这时候呢，我们可以打开一个仓库啊叫NPM。大开缩PM啊，在这搜关键字叫E。

那么它会出现一个插件叫yes is con。那么这个呢，就是让这个LB这个风格指南啊，在中生效啊，所以我们就可通过这个工具来去做这些相应的事情。那么这个LB这个风格呢，有一个LB和艾贝斯。其中LB呢，它会包含这个RA的一个风格建议，而我们呢，现在不写代码，所以呢，我们不用这个，我们用的是这个啊is base，那么这个库呢，就没有对的一些东西的一些介绍啊，这里说了啊，没有的一些插件。好，LB这个who呢，它其实分为两种啊，是LBBA子和LB BA legacy啊，Letacy。那么base呢，就是包含我们的YES6的一些东西啊，包含了一些的内容啊。和六以上，而e base这个东西呢，它就只包含ES5和ES5以下。所以啊，咱们开发一般是使用yesl的东西，所以我们使用的是不能是yes yes in con base。

所以要用这个东西呢，我们得下载这个插件啊，相当于是插件。那么它呢，同时这里说了啊，它需要两个库，一个是yes和yes plug I。所以这里呢，我们实际上下来三个库啊，我们说一下。为了能够使用它呢，一个这个货。一个叫。I could just imports。三货。那么yes，因为之前下待会下，但是待会儿下的时候呢，我们就刚好呢一起下啊，就不用重复下载这个yes。那么我们先去吓着它啊。我们下载库呢，有yes it load和yes it啊，为了使用我们的这个load，那为了使用air这个规则呢，我们还要下载yes it con air base，还有这个yes it这个。啊import，我把这个呢放后面去啊放后面去。

那么我只复制这两个。一。那么他就会把这些包呢，全都去下载啊，全都下载。好，然后下载过程中呢，我们来看怎么配置啊，配置的话呢，非常简单啊，就是在拍中配置这个e con就可以了啊。那么在con里面，我们要想办法去继承得到这个l be base，他这个风格指南。好，怎么做呢，来看啊。找到son在这儿呢？在最后呢，加一个字段叫yes it con值为一个对象。通过啊这个东西呢，去继承继承我们的这个LB base。啊，就OK了啊这样呢，就会继承这个LB base，这个who提供的这个yes这个规则检查。啊，当然这句话呢，大家在文档中啊，在这个文档中往下翻啊，它的最后一行呢，会介绍会给你介绍啊，添加这个instance air base to你的，诶，它到底用的是个文件啊，我们这里呢，是直接在page中配置就OK了。

好，那么到这呢，我们就配置好了啊。我们来拿过来。所以整体呢，我们要做的事就是第一点啊，第一点我们需要呢，写上一个yes。好，那么这里要特别注意，一定要排除not，否则它会对not进行检查。而我们在使用PA使用了很多no MOS里面的插件，所以一旦你检查，那么会出现非常非常的错误，要注意。所以我们一定要排除掉这个。好排除完之后呢，它的规则呢，得自己写，否则呢，没有规则他也会报错。在配中写上这个配置，诶这配置呢，我们使用的是一个比较权威的一个配置，叫做air。那么MP配置呢，需要下载这三个包啊，三个包然后呢，再加上这个配置，那么就OK了。好那么好，那么我们来看一看啊，咱们这个配置呢，到底行不行，我们写那代码。

新建文件夹啊叫SC。这里面呢，我们来快速写这个代码啊，新建文件夹叫JS，在JS下面呢，我们新建个文件JS。好，这里面呢，我们写一个基本代码，比如function。对吧，然后呢，我们故意啊写的格式啊，比较糟糕，比较糟糕X加Y。然后呢，我们打印一下这个，再用这个啊，乘个二加个四五啊。好，写完啊写完，就这样，就这样。然后我们还需要在这里新建一个文件。好，这里面呢就是PA啊，我们呢就简单写个标题吧，啊，Hello pack。OK啊，OK。那么我们这个代码呢，就非常简单啊，非常简单，那么当他去检查这个文件的时候啊，他会发现一些很不规范之处，比方说我们代码呢，正常来讲是要有空格有缩进的啊，这样呢看起来就更舒服，那我这没写，那么待会呢，它就会出现一些错误了啊，就要求啊必须改正我们的内容。

好了，那我们来看看到底行不行呢？我们来运行一下代码。好，输入ipad去运行啊回撤。好，这时候你会看到，你看他犯了一系列的错误啊，一系列错误，这样呢，就是说，哎，他会说啊，你首先。首先哎，我们可以拉长一点啊，首先这个index JS文件呢啊，构建失败了。好，他也说了是index JS下面的index JS，然后说呢，你这个第一行啊，出现了这样的一个问题啊，你的换行符呢，有问题，具体的规则呢，你可以打开yes is官网搜这个规则就可以了。然后第二行也出问题，第三行也出问题啊，那后面15呢，代表第15个字符啊，出现问题啊，说一个空格后面呢，必须跟一个在一个逗号后面逗后面呢必须跟个空格啊就这样的规则。好，那么这么多规则啊，你一个修复的话呢，那挺麻烦的啊，挺麻烦的，所以啊，我们在配置的时候呢，可以再后加一个选项啊。

要为错。那么呢叫修复啊为触的话呢，代表自动修复。它会自动修复呢，我们yes it错误，这样呢，我们就不用手动的去改了啊，那这样挺方便的，我们再运行一次再看效果。好，这时候呢，你会发现啊，它就没有这么错误了啊，那么红色的我们叫错误，黄色的呢，我们叫警告啊，警告是不会影响程序的运行的，但是呢，也是推荐啊，他说啊，我这S我们来看一下这个文件啊。你看现在这个文件，我们就看到它自动的加了这些缩筋了，就没有不需要我们再加了。他说我们代码第六行啊，第六行对应的是这一行。他说呢，诶不期待的一个cancel表达式啊，就是我们这cancel啊，他是不建议你使用的。因为如果你是开发调试用没关系，那你代码要上线了，你用cancel的话呢，就非常不好。

但是呢，我们这里是为了调试啊，所以我希望它忽略这个规则，怎么办呢？这里有个选项啊，叫yes。Disabled。啊，这个next。啥意思呢，就是啊。下一行。这个所有规则，所有的规则失效。就是对下一行的不行检查不检查啊。下一行。不进行稽查。好，所以我们再运行一次再看啊。哎，他就没有这个警告了啊，没有了，所以啊，当然我们如果有些代码呢，是为了调试的的确确是要保留的，哎，那我们可以这样开着。那这样写的话呢，一定要注意啊，就是这个代码呢，上线的时候呢，千万不要加啊，千万不要加，所以你写的时候呢，一定要注意一点，就是你确保这东西呢，哎，是你的确是需要这样做的啊，才这样加。

好，如果不要这样做的话呢，那最好还是不要这样加啊，哎，只是告诉大家，有这种方式可以忽略检查这个yes。好，那么整体呢，就是这样的过程，我们看一下配置啊，我们首先呢，需要使用yes it加上yes it这个库来对我们JS呢进行语法检查。那么检查的文件呢？只有JS文件，那么记得一定要排除no MOS，否则会报错的。那么你写完这里呢，还不够啊，你yesis，不知道要检查什么东西，所以呢我们得写规则，而规则的话呢，咱们有个著名的风格指南叫做LB，所以呢，推荐大家使用这个。而使用这个的话呢，得使用个who叫做yes con air base这个库来对这个进行语法检查。好，那么这个库呢，它又依赖于这些插件这些库啊，所以呢，我们都得把它下载好，都得下载好。好全下载好了，那么我们呢，这样就是在咱们page中配置好这个yes一个。

啊，继承我们刚刚下载这个库呢，LBBA那么就OK了。那么它里面呢，会自动加载这个里面的所有的配置，从而对我们GS代码呢进行检查。一旦发现错误，就会在运行的时候呢，给我们提示出来这种错误。那么我们最后呢，就是当我们发现有些文有些代码呢，的确的确是不用稽查，那么我们可以通过这种方式把它给禁用掉，禁用掉。那么这呢，就是我们的JS语法检查啊，能够检查一些常见的语法错误，同时呢，通通。统一咱们程序员之间的一些代码的一些差异啊，习惯差异。好，那么我们yes it呢，就结束到这。