18-Vite中集成ESLint原创

从现在开始，我们来介绍V的高级应用。首先呢，我们来看一下在wait中如何集成ES Li。为了使我们的代码具备可预测性，易于浏览并易于理解，在构建一个大型规模的应用的时候，我们需要在wait中集成ES Li来改善咱们开发人员的体验。特别是与一个团队的合作，我们更需要设置一些自动化的代码提示和格式化。首先呢，我们来看一看在wait中如何继承e Li。返回Vs code，我们打算在v basics vanilla这个项目里边去使用yes。在没使用之前，我们先来看一下我们这些文件的表现，我们先看一下man.JS这个文件，很显然好像没有什么问题，包括man.jason.js也是没有问题的，但事实上呢，我们这些代码如果在一个团队里边按照统一的规范的话，可能不规范。那么接下来呢，我们首先在Vs code里面去安装一个扩展，点击这个按钮，我们输入一下ES link。

这样的话，我们就搜到了关于ES linkt这样的一个扩展，我们点击安装就好了，这里呢，很下然我们已经安装好了，它的版本是2.2.2，安装好了以后呢，我们回到我们代码里边，很显然这一步还不够，我们得需要去安装ES lit相关的一些插件。首先我们在这个目录下面点击右键，在集成终端中打开我们这个目录，我们去安装ES lit相关的一些插件，我们执行PN PM install ES Li-config-standard我们安装一个标准的ES Li的配置，然后我们再安装一个e Li in一个插件叫做import，然后我们再去安装e Li拉。

我们再安装一些个pro这样的插件，我们再去安装一下EST-plug in-node最后我们再安装一下ES lit杠大D。稍等片刻以后呢，我们这些包就都安装好了，这里头有一个warning，就是他说我们这里边需要依赖ES lit的7.12.1的版本，但是我们装的是8.1.0版本，这个无大碍，所以我们暂时不用去关注它，那安装完了以后呢，我们现在来看一下曼点Jason的JS，还是没有任何的反馈，那么接下来我们在当前的目录下面创建一个新的文件，取名为叫做点 ES link rz.GS我们来去通过module.xports来做一个配置，在配置里边呢，我们去定义一个extends这样的一个属性，它的值呢，我们可以定义成standard，就是刚才我们安装好那个标准的ES的配置好了，现在呢，我们看到这个ES lit RC的JS已经有关于ES Li语法的问题了，那我们看一下problems，它告诉我们string必须要用一个单引号。很显然，我们这个。

字符串呢，用的是双引号，另外呢，它告诉我们新行必须要求我们在这个末尾上添加一下，那很显然我们需要手工的去做一些调整，我们可以把这个给改一下，改完了以后，我们看到这个文件就没有任何的关于ES lit语法的问题了，那接下来我们再来看一下mango jain.js，我发现这个文件貌似没有什么问题，再去打开一个文件，再去打开一个文件，再去打开一个文件，我们看到呢，这里头貌似好像都满足了我们所谓的e link的一些语法要求，那如果我们的代码里边有一些不满足的要求会怎么样呢？比方说我们再打开一个。Glo下面的M1.gs，好，我们看到这个代码呢，给我们的提示说新行要求我们在末尾需要添加一下，很显然我没有添加，那大家想一想，如果我们每一个这样的JS文件都手工的进行这样的修改，一来费时间，二来呢，可能我们也改不全，会漏改一些内容，那怎么办呢？诶我们能不能有个工具来帮助我们来去自动的进行这样的问题的发现并且修改呢？我们可以采用比方说保存文件以后格式化就帮助我们自动实现了呢。

这是可以的，我们得需要借助于另外的一个工具，这个工具呢，就是我们要介绍的prettier，它可以帮助我们实现这个功能。这个功能的添加，我们首先得做几个工作，第一步我们先得在Vs code里面去安装一个prete的这样的一个所谓的扩展，我们输入一个pre。好，发现呢，这里头就有一个这样的pre的插件，我们的安装好就可以了，这里我们已经安装好了，它的版本是9.3.0，安装好这个插件以后，还没有完成彻底的任务，我们得需要在我们项目的根目录下面去做一个pre的一个配置，我们这里边呢，再去创建一个新的文件，这个配置文件我们可以取名为叫做pretier。

RC，注意，这是一个类似于Jason的一个文件。我们呢，不要在这里面去编写GS的语法，我们先写个划括号，然后在里头呢，我们去写一个叫做C名，也就是所谓的分号，我们要不要加分号呢？我们可以定义为false，不让我们所有的语句加分号，第二呢，就是我们在在后面要加一个所谓的single cute，也就是我们语法里面的字符串的双引号，要不要加呢？这头我们可以写个true，也就是我们的双引号要变成一个单引号。好，这就是定义了我们一个pre的规则，那以后呢，我们在检查的时候可以按照我们这个规则来继续的定义，关于pre的其他规则，大家可以参照官方网站去看一下，保存一下，好配置完了以后呢，那我们来再去看一下M1.gs，很显然这里头它并没有帮助我们做相关的修改，我们保存一下文件也没有完成，那怎么办呢？我们还得需要借助于Vs code的一些功能，首先呢，我们打开一个配置，在配置里边呢，我们去搜索一下format on sale，好，我们看到这里头有一个format on save的配置，我们要把它勾掉，等于我们在保存这个文件的时候呢，去做一些格式化，另外呢，我们还得需要在这后面再去搜索一个叫做form matter，这头有一个default form matter，我们选择哪一个格式化的工具呢？啊，我们选择这个pre就可以了。

好，这个完成了以后，接下来我们打开这个文件，按一下CTRLS，好，发现呢，它会自动的帮助我们产生一个新行，以此类推，M2CTRLS一样的，那么所有的这些文件呢，我们都可以CTRLS，它会帮助我们做符合ES lit的这样的一些语法，那P呢，会帮助我们完成这个工作。

说到这儿，感觉我们的工作呢，貌似已经完成了，但事实上如果是我们手工的需要去把每一个文件都进行保存也是一个问题，我们也会漏保存一些东西，那能不能让e lit帮助我们自动的进行检测，看看还有哪些文件有问题呢？这个也是没有问题的，我们可以在package的Jason里。去配置一个ES lit的脚本，我们可以取名为lit或者是ES lint都可以，后边的命令呢，就是ES lit，然后杠刚EST，我们要去检查GS文件，检查哪个目录呢？就是当前目录下，如果将来我们可以把我们的JS文件放在S2C这个目录下面，那你就可以写个当前目录下的S2C，目前呢，我们没有S2C目录，所以呢，我们就检查当前目录下面的JS文件就好了，保存一下，然后在我们的终端上面，我们清一下屏，执行一下PN PM run linknt。

好，大家看到还有一个漏改了，就是worker的GS，这里边告诉我们的错误是，呃，关于空格方面，以及关于post message没有定义方面，那我们来看打开这个worker文件，它是在当前我们这个项目的根目录下面，我们打开这个worker叫JS，我们发现呢，这里果然有一些问题，我们先去保存一下。保存完了以后呢，我们发现还是有很多问题的，希望我们要想哇，改为cost，第二呢，他希望我们在这个方式呢，后面加一个空格，另外呢，Post message并不是我们当前这个文件里头具有的一个方法，它应该是一个window对象上面带的一个全局的函数。

我们现在呢，可以执行一下CTRLS保存，发现呢这些问题并没有直接的解决，很显然我们的那些配置呢可能不全，现在我们先不着急解决这些问题，留着这个问题以便于我们后边的测试，我们先把相关的这些文件都关闭掉。接下来呢，我们来看一下另外一个需求，我们也希望在项目打包之前来发现一些ES Li的错误，如果我们这些错误不解决，我们不希望我们的项目进行build。首先呢，我们来看一下package的Jason，在这里边有一个叫做build的命令，我们可以执行一下PN PM build。好，我们发现呢，这个build的工作已经完成了，很显然在build之前没有进行ES的检查，我们可以在这命令的前面加一个PN PM link。

And and表示build这个命令首先先进行Li的检查，然后再进行build，好保存一下，然后呢，我们再去执行一下PNPM软build。好，我们发现呢，这里头有很多问题，这里头有一大堆问题是什么呢？我们来看是这个编译后的这个GS文件，也就是我们Dis目录下面的文件，这个呢我们暂时不用管它，因为Dis目录是我们编译后的文件，我们不用检查它的ES问题，我们只关心我们这个worker的JS的这个错误。另外呢，我们也不希望我们的项目在进行代码提交的时候带着我们这些问题提交，也就是说我们希望在getate进行提交的时候，能够检查出我们ES的一些问题，当我们把这些问题都解决了以后，再进行代码提交，这个工作我们该怎么实现呢？我们得需要一个get的husy这样的一个所谓的hook。关于getate hook，大家可以参照get相关的一些文档，或者是参照一下我的we pack相关的一些视频，在那个视频里边呢，详细的介绍了一下getate hook的一个使用，我们就直接的去使用它就好了，返回我们当前的这个目录，在这个下面呢，我们来去执行一个关于gate的一些操作。

首先在我们当前的目录下面呢，去初始化一个gate环境，我们执行一下get in。好，这样的话呢，我们初始化的环境就搞定了，接下来我们在get上面去做一个远端的仓库。好，登录到我的gate，我们新建一个项目。我们来创建一个新的项目，叫做Felix courses，港港Van，好，接下来我们其他的内容按照默认点击create response就可以了，这样的话就创建了一个远端的仓库，我们可以把这句话copy下来。

好，回到我们的Vs code，我们把这个代码粘贴过来，好，这样的话没有任何反应，表示我们这个远端仓库已经创建好了，好，那接下来呢，我们执行一下get status，看到我们有很多的文件需要提交，我们执行一下get a点。好，提交完了以后呢，我们执行一下g commit-m我们来一个in。好，这样的话呢，我们就已经提交成功了，打开get ignore。我们看到这里有定义了，很多文件不需要我们提交到服务器上的，比方说list，但这个文件呢，并不能够帮助我们拦截代码里的ES link的问题，那怎么办呢？我们得需要去做一个所谓的getate的hook，我们需要去安装一下，执行一下PN PM install husk husky是一个非常好用的一个户口的工具，好安装完了以后呢，我们执行一下npx Hu install。

好，我们安装一下husky，安装完了以后呢，大家看到这里有提示说getate hooks installed，就是我们getate的这个钩子已经安装好了，那现在呢，我们来看一下点husky，下面呢，就有一个所谓的叫做husky.sh。那接下来呢，我们开始准备去编写一个hook，也就是在get提交之前去执行的一个命令，那这里呢，我们执行一下p mpm huskke，后边我们加个A下的huskke下的pre-commit pre commit，就是我们在提交之前的一个hook，后边我们去输入一个命令，叫什么PN PM run。Link好，回车大家看到现在呢，在我们的哈SY目录下面会产生一个新的目录，叫做pre-commit，这里呢就有一个PNPM软lit，也就是在G提交之前执行一下我们lit的检查，好，那接下来呢，我们执行一个gate commit-m后边呢，我们可以加一个I的huske。

好回车。好，大家看到他先去执行了一下lit，发现呢很多问题，那我们可以把这个问题解决了以后，再进行所谓的get提交，这里呢，为了不让他检查我们Dis目录里面的GS问题，我们暂时把list目录给删除掉，其实事实上呢，大家也可以把我们这些GS文件放到src的目录下面，我们只需要去检查当前目录下的SRRC就可以了，暂时呢，我们就临时的把D目录给删除掉。保存一下，那接下来我们来去看一下重新的检查，我们再去进行一次这个提交，大家看一下，只剩下这三个问题了，那我们就去改这个问题，我们把这个先关闭掉，打开worker.js。第一个呢是个warning，他希望我们不要使用Y来用light或者cost来代替，那很显然我们得需要去改成light，因为下面我们对at还做了一个操作。

可能let以后第一个问题就没有了，接着我们看第二个问题，说我们丢了一个空格，在我们的function的这个名字的后面，那我们可以在这后面加个空格，如果说我们就希望它不需要这个空格的话，那我们也可以做个配置，后边这个配置的语法呢，我们可以把它copy一下，到我们ES lit RC这个目录下面，我们去定义一个叫做rules这样的规则，在这里边呢，我们可以把我们刚才那个拷贝过来，后边我们可以定义成字符串of，表示我们要关闭掉它。

那很显然，下面呢，这里头还有一个其他的问题，一会儿我们再来看这个问题，那接下来呢，我们到work的JS里头看到，诶，这个问题果然不存在了，接着还有一个问题，就是post message没有发现，因为它是挂载到window这个对象上面的，所以呢，我们还得需要去做深度的配置，这个post message呢，是一个未定义的问题，我们可以嗯来看一下这个no and DeFine，我们可以copy一下到我们的yes Li里头，再去加一个规则叫node find，把它变为off，保存一下。好，我发现呢，这回这个问题就不存在了，那我们再次编译一下。好，我们看到这里还有两个新的问题，是ES lit RC的问题，我们打开ES lit RC，好，我们看到我们保存一下，发现呢，Pret已经不能够帮助我们解决这个问题了，我们再来看一下它的问题是什么，就是这个所谓的common，当我们可以把它copy一下，放在我们这里头进行一个配置，我们可以在这后边呢去写一个comma单，那它的规则我们可以去配一下，或者直接写个off。

保存一下好，我们看到呢，这里头这个提示就不存在了，我们再去执行一下。好，大家看到现在呢，我们这个提交就已经可以了，但是呢，它告诉我们有几个内容还没有加进来，那我们可以执行一下 geta.get commit-m然后呢，我们再去来个test huy。回车好，我发现呢，现在我们就成功的提交到我们远端的仓库里了。好，至此呢，我们就学会了如何在wait中使用ES lit，以及如何的使用pre这个工具，在我们代码保存的时候呢，能够帮助我们自动的修正问题，并且呢，我们还可以通过getate husk这个户客工具来进行get代码提交之前的一个E检查，好，这一章我们就讲到这里，大家加油。