【JavaScript】ESlint & Prettier & Flow组合，得此三神助，混沌归太清
<h2 class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="2frvf-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="2frvf-0-0">Flow</span></h2><div class="Editable-unstyled" data-block="true" data-editor="bc267" data-offset-key="aibut-0-0">
<h3 class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="aibut-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="aibut-0-0">Flow的意义</span></h3>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="bc267" data-offset-key="17njp-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="17njp-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="17njp-0-0">Flow是faceBook开源的一个JavaScript静态类型检查工具，作用类似TypeScript，但是它不像TS那样是一门独立的语言，而是作为一个babel-plugin,借助babel的编译切入JavaScript的编码当中，同时，与ts不同的是，Flow.js的类型检查不是强制的，可以通过//@flow手动开启，意味着，你可以自由选择某个文件是否开启类型检查。</span></div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="17njp-0-0"> </div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="bc267" data-offset-key="qruf-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="qruf-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="qruf-0-0">Flow真是眼前一亮，我就想，TypeScript挺好的，但或许也给人带来了一些烦恼，一旦用了TS，就意味着任何时候都要强制类型检查，我觉得，选择JavaScript还是TypeScript就变成了这样一个问题：我们手头1000元，我们到底是买一件一万元的比较喜欢的还耐用的衣服呢？还是买一件很便宜但是又不耐用的地摊货呢？（耐用指的是维护性），但Flow帮我们找到了折中方案：类型检查这东西，我们在想用和需要用的时候用，同时不想用也可以不用，就好比就是手里有1000块，那我们就刚好去买1000块钱的衣服</span></div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="bc267" data-offset-key="eckbp-0-0">
<h3 class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="eckbp-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="eckbp-0-0">Flow的使用</span></h3>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="eckbp-0-0">
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">@flow</span><span style="color: rgba(0, 128, 0, 1)">
//</span><span style="color: rgba(0, 128, 0, 1)">数字</span>
<span style="color: rgba(0, 0, 0, 1)">functionflow1(x:number){
console.log(x);
}
flow1(</span>2<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">字符串</span>
<span style="color: rgba(0, 0, 0, 1)">functionflow2(x:string){
console.log(x);
}
flow2(</span>"xxx"<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">可选参数</span>
functionflow3(x:?<span style="color: rgba(0, 0, 0, 1)">string){
console.log(x);
}
flow3();
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">多个值</span>
functionflow4(x:"a"|"b"|"c"<span style="color: rgba(0, 0, 0, 1)">){
console.log(x);
}
flow3(</span>"a"<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">任意值</span>
<span style="color: rgba(0, 0, 0, 1)">functionflow5(y:any){
console.log(y);
}
flow3(</span>"a"<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">数组</span>
let arr:Array<<span style="color: rgba(0, 0, 255, 1)">boolean</span>>=[<span style="color: rgba(0, 0, 255, 1)">true</span>,<span style="color: rgba(0, 0, 255, 1)">false</span>,<span style="color: rgba(0, 0, 255, 1)">true</span>];</pre>
</div>
<p> </p>
</div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="bc267" data-offset-key="doubn-0-0">
<h3 class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="doubn-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="doubn-0-0">Flow的优点</span></h3>
</div>
<ul class="public-DraftStyleDefault-ul" data-offset-key="cqidl-0-0">
<li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="bc267" data-offset-key="cqidl-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="cqidl-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="cqidl-0-0">自由和[可选]的类型检查风格</span></div>
</li>
<li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="bc267" data-offset-key="2a3ei-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="2a3ei-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="2a3ei-0-0">轻量化的类型检查，满足一些基本要求，同时容易学习上手</span></div>
</li>
<li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="bc267" data-offset-key="5m1ch-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="5m1ch-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="5m1ch-0-0">借助babel，webpack集成到JS代码中，在当今前端社区中，这种方式非常容易被大家所理解和接受，同时也容易集成到已有的项目中</span></div>
</li>
</ul>
<div class="Editable-unstyled" data-block="true" data-editor="bc267" data-offset-key="fvqij-0-0">
<h3 class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="fvqij-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="fvqij-0-0">Flow的缺点</span></h3>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="bc267" data-offset-key="f1jts-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="f1jts-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="f1jts-0-0">这家伙简直和JS一毛一样，既有有好用的优点，同时呢，却也有一些明显的缺点。</span></div>
</div>
<ul class="public-DraftStyleDefault-ul" data-offset-key="a41kt-0-0">
<li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="bc267" data-offset-key="a41kt-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="a41kt-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="a41kt-0-0">编辑器或IDE集成度低,比如，比如基本的变量提示功能</span></div>
</li>
<li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="bc267" data-offset-key="fa7fd-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="fa7fd-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="fa7fd-0-0">社区力量较弱，库的数量较少</span></div>
</li>
<li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="bc267" data-offset-key="ad1ev-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="ad1ev-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="ad1ev-0-0">库的类型定义质量不高，无法完全满足开发需求</span></div>
</li>
<li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="bc267" data-offset-key="fbv6j-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="fbv6j-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="fbv6j-0-0">FacebookFlow团队的roadmap也并不是很清楚</span></div>
</li>
</ul>
<div class="Editable-unstyled" data-block="true" data-editor="bc267" data-offset-key="14uno-0-0">
<h3 class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="14uno-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="14uno-0-0">Flow的安装（Webpack集成）</span></h3>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="bc267" data-offset-key="cfs2k-0-0">
<p class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="cfs2k-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="cfs2k-0-0">(注意⚠️：你需要确保你有一个可运行的webpack配置，同时在module.rules配置项中引入了<span data-offset-key="cfs2k-0-1">babel-loader解析所有js文件<span data-offset-key="cfs2k-0-2">)</span></span></span></p>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="bc267" data-offset-key="26otk-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="26otk-0-0"><strong><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="26otk-0-0">过程</span></strong></div>
</div>
<ol class="public-DraftStyleDefault-ol" data-offset-key="84h2a-0-0">
<li class="Editable-styled public-DraftStyleDefault-orderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="bc267" data-offset-key="84h2a-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="84h2a-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="84h2a-0-0">下载VScode扩展插件：<span data-offset-key="84h2a-0-1">FlowLanguageSupport，<span data-offset-key="84h2a-0-2">以在IDE中支持</span></span></span></div>
</li>
<li class="Editable-styled public-DraftStyleDefault-orderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="bc267" data-offset-key="84h2a-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="84h2a-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="6lr81-0-0">安装plugin-transform-flow-strip-types插件，运行以下命令</span></div>
</li>
</ol>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="u3dd-0-0">
<div class="cnblogs_code">
<pre>npm install @babel/plugin-transform-flow-strip-types</pre>
</div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="bc267" data-offset-key="6mjrs-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="6mjrs-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="6mjrs-0-0">4. 创建.babelrc文件，写入以下配置</span></div>
</div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="52u26-0-0">
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">{
</span>"plugins"<span style="color: rgba(0, 0, 0, 1)">:[
</span>"transform-flow-strip-types"<span style="color: rgba(0, 0, 0, 1)">
]
}</span></pre>
</div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="bc267" data-offset-key="6do5m-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="6do5m-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="6do5m-0-0">5. 运行以下命令，安装flow命令行</span></div>
</div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="3pde8-0-0">
<div class="cnblogs_code">
<pre>npm install -g flow-bin</pre>
</div>
<p> </p>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="bc267" data-offset-key="3hc5q-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="3hc5q-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="3hc5q-0-0">6. 在每次启动项目前都检查Flow是否有报错，例如我就在在启动脚本中添加如下语句，它每次会先检查flow有没有报错，然后才用Node启动项目</span></div>
</div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="h6iq-0-0">
<div class="cnblogs_code">
<pre>"scripts"<span style="color: rgba(0, 0, 0, 1)">:{
</span>"start":"flow check src && node ./server.js"<span style="color: rgba(0, 0, 0, 1)">,
}</span></pre>
</div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="bc267" data-offset-key="4ag62-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="4ag62-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="4ag62-0-0">7. 编写flow代码吧！！但是你需要给当前文件加上//@flow，如果不加，那么flowcheck将不做检查</span></div>
</div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="en1vl-0-0">
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">@flow</span>
<span style="color: rgba(0, 0, 0, 1)">functionflow1(x:number){
console.log(x);
}
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">flow函数</span>
flow1(2<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">普通函数</span>
<span style="color: rgba(0, 0, 0, 1)">functioncommon(a){
console.log(a);
}
common(</span>1);</pre>
</div>
<p> </p>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="bc267" data-offset-key="dso78-0-0">
<h3 class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="dso78-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="dso78-0-0">运行示例</span></h3>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="bc267" data-offset-key="9d7q9-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="9d7q9-0-0"><strong><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="9d7q9-0-0">运行 flow check src检测src下的执行情况</span></strong></div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="9d7q9-0-0"> </div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="bc267" data-offset-key="acdip-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="acdip-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="acdip-0-0">类型匹配，无错误</span></div>
</div>
<div class="Image-resizerContainer" data-size="normal">
<div>
<div class="Image-captionContainer" data-size="normal">
<div><span style="font-family: "Microsoft YaHei"; font-size: 16px"><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic1.zhimg.com/v2-e8749333202334fee6221958ad3351e4_b.png" alt="" data-size="normal" data-rawwidth="704" data-rawheight="92"></span></div>
</div>
</div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="bc267" data-offset-key="3kpe9-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="3kpe9-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="3kpe9-0-0"><span data-text="true">类型不匹配，报错（要求数字但传入了字符串）</span></span></div>
</div>
<div class="Image-resizerContainer" data-size="normal">
<div>
<div class="Image-captionContainer" data-size="normal">
<div><span style="font-family: "Microsoft YaHei"; font-size: 16px"><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic3.zhimg.com/v2-fc3803379626a0ca0ee2933a87d0750e_b.png" alt="" data-size="normal" data-rawwidth="1128" data-rawheight="484" data-watermark="watermark" data-original-src="https://pic3.zhimg.com/v2-fc3803379626a0ca0ee2933a87d0750e_b.jpg" data-watermark-src="https://pic3.zhimg.com/v2-66d5c007b5828915d3a615196756fc52_b.jpg"></span></div>
<div> </div>
<div> </div>
</div>
</div>
</div>
<h2 class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="a5lue-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="a5lue-0-0"><span data-text="true">Prettier</span></span></h2>
<div class="Editable-unstyled" data-block="true" data-editor="bc267" data-offset-key="dh4kt-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="dh4kt-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="dh4kt-0-0"><span data-text="true">prettier的意思是漂亮的，但其实我觉得，“美化代码”并不是它的核心功能，它的核心功能是“统一代码规范”（当然了，是用漂亮的规范去统一哈哈）。长久以来，团队建设的一个重点要求就是”让几十个人写的代码看上去是一个人写的“。倘若如此，团队协作，代码维护能力便大大增强。Prettier是完成这一丰功伟绩的功臣。</span></span></div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="dh4kt-0-0"> </div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="bc267" data-offset-key="ftqih-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="ftqih-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="ftqih-0-0"><span data-text="true">Prettier是用来规范代码风格的，一些IDE比如VScode可以给我们提供代码格式化的功能，但是这种功能仍然有限。Prettier则提供了相当完善的代码风格规范。</span></span></div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="ftqih-0-0"> </div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="bc267" data-offset-key="7p08i-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="7p08i-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="7p08i-0-0"><span data-text="true">试看——</span></span></div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="bc267" data-offset-key="5g2bn-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="5g2bn-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="5g2bn-0-0"><span data-text="true">A<span data-offset-key="5g2bn-0-1"><span data-text="true">：我就喜欢这样写！！</span></span></span></span></div>
</div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="92g3l-0-0">
<div class="cnblogs_code">
<pre>import {A,B,C,D,E} from‘lib’</pre>
</div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="bc267" data-offset-key="cnuq8-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="cnuq8-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="cnuq8-0-0"><span data-text="true">B<span data-offset-key="cnuq8-0-1"><span data-text="true">: 我建议啊，应该这样写</span></span></span></span></div>
</div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="dmmul-0-0">
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">import{
A,
B,
C,
D,
E
} from ‘lib’</span></pre>
</div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="bc267" data-offset-key="5nuis-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="5nuis-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="5nuis-0-0"><span data-text="true">A<span data-offset-key="5nuis-0-1"><span data-text="true">：你写的不够大气！</span></span></span></span></div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="bc267" data-offset-key="bflnq-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="bflnq-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="bflnq-0-0"><span data-text="true">B<span data-offset-key="bflnq-0-1"><span data-text="true">：你写的不够简洁！</span></span></span></span></div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="bc267" data-offset-key="7coi5-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="7coi5-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="7coi5-0-0"><span data-text="true">(互怼时刻即将开启）</span></span></div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="7coi5-0-0"> </div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="bc267" data-offset-key="cjk6m-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="cjk6m-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="cjk6m-0-0"><span data-text="true"><strong>Prettier和事佬</strong><span data-offset-key="cjk6m-0-1"><span data-text="true">：好了好了，两位英雄莫相争执，且听我的！你们都写成我这样就得了！</span></span></span></span></div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="bc267" data-offset-key="6pupp-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="6pupp-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="6pupp-0-0"><span data-text="true">A,B<span data-offset-key="6pupp-0-1"><span data-text="true">:好，那咱就这么办</span></span></span></span></div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="bc267" data-offset-key="cc9j8-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="cc9j8-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="cc9j8-0-0"> </span></div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="bc267" data-offset-key="85ft6-0-0">
<h3 class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="85ft6-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="85ft6-0-0"><span data-text="true">如何使用Prettier</span></span></h3>
</div>
<ol class="public-DraftStyleDefault-ol" data-offset-key="c9igh-0-0">
<li class="Editable-styled public-DraftStyleDefault-orderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="bc267" data-offset-key="c9igh-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="c9igh-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="c9igh-0-0"><span data-text="true">在VScode上下载Prettier扩展插件，最好把编辑器重启一下。然后保存时就可以自动格式化了</span></span></div>
</li>
<li class="Editable-styled public-DraftStyleDefault-orderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="bc267" data-offset-key="c4gov-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="c4gov-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="c4gov-0-0"><span data-text="true">根据官网上的指示进行操作，下面这个讲的是如何从Eslint上集成Prettier <span data-offset-key="c4gov-1-0"><span data-text="true">Integrating with Linters · Prettier</span></span></span></span></div>
</li>
<li class="Editable-styled public-DraftStyleDefault-orderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="bc267" data-offset-key="sq82-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="sq82-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="sq82-0-0"><span data-text="true">其实一般情况下，有VScode的Prettier插件就足够指导开发了，如果你想一次性把全部JS/JSX文件全部格式化一遍，可以这样，在根目录下运行：</span></span></div>
</li>
</ol>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="c7u2o-0-0">
<div class="cnblogs_code">
<pre>yarn prettier --write './src/**/*.js' './src/**/*.jsx’</pre>
</div>
</div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="8t0d8-0-0"> </div>
<h3 class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="8t0d8-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="8t0d8-0-0"><span data-text="true">运行示例</span></span></h3>
<div class="Editable-unstyled" data-block="true" data-editor="bc267" data-offset-key="eu3ed-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="eu3ed-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="eu3ed-0-0"><span data-text="true">右边是格式化后的</span></span></div>
</div>
<div class="Image-resizerContainer" data-size="normal">
<div>
<div class="Image-captionContainer" data-size="normal">
<div><span style="font-family: "Microsoft YaHei"; font-size: 16px"><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic2.zhimg.com/v2-b959b0e00d86736e723eac79e2150c71_b.png" alt="" data-size="normal" data-rawwidth="2112" data-rawheight="1106" data-watermark="watermark" data-original-src="https://pic2.zhimg.com/v2-b959b0e00d86736e723eac79e2150c71_b.jpg" data-watermark-src="https://pic2.zhimg.com/v2-6cf16a98a14c901989480e59064aeb75_b.jpg"></span></div>
</div>
</div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="bc267" data-offset-key="5ciuj-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="5ciuj-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="5ciuj-0-0"> </span></div>
</div>
<h2 class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="a6r91-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="a6r91-0-0"><span data-text="true">ESlint</span></span></h2>
<div class="Editable-unstyled" data-block="true" data-editor="bc267" data-offset-key="8ivmk-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="8ivmk-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="8ivmk-0-0"><span data-text="true">ESlint这种和我们朝夕相处的伙伴就不必过多解释了吧，它的作用是做一些静态检查，对于一些可能在JS运行时候才会报的错误立即检测出来。</span></span></div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="bc267" data-offset-key="8mist-0-0">
<h3 class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="8mist-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="8mist-0-0"><span data-text="true">ESlint的使用</span></span></h3>
</div>
<ol class="public-DraftStyleDefault-ol" data-offset-key="1qo3q-0-0">
<li class="Editable-styled public-DraftStyleDefault-orderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="bc267" data-offset-key="1qo3q-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="1qo3q-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="1qo3q-0-0"><span data-text="true">在VScode上下载Eslint扩展插件，最好把编辑器重启一下</span></span></div>
</li>
<li class="Editable-styled public-DraftStyleDefault-orderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="bc267" data-offset-key="2e7bn-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="2e7bn-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="2e7bn-0-0"><span data-text="true">设置<span data-offset-key="2e7bn-0-1"><span data-text="true">Eslint<span data-offset-key="2e7bn-0-2"><span data-text="true">这个<span data-offset-key="2e7bn-0-3"><span data-text="true">VScode<span data-offset-key="2e7bn-0-4"><span data-text="true">扩展插件的<span data-offset-key="2e7bn-0-5"><span data-text="true">AutoFix<span data-offset-key="2e7bn-0-6"><span data-text="true">功能，如图所示</span></span></span></span></span></span></span></span></span></span></span></span></span></span></div>
</li>
<li class="Editable-styled public-DraftStyleDefault-orderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="bc267" data-offset-key="d16gd-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="d16gd-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="d16gd-0-0"><span data-text="true">在项目下安装eslint命令行并进行初始化 </span></span></div>
</li>
</ol>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="d6com-0-0">
<div class="cnblogs_code">
<pre>3.1<span style="color: rgba(0, 0, 0, 1)"> 运行 npm init: 先初始化下npm空间
</span>3.2<span style="color: rgba(0, 0, 0, 1)"> 运行 npm i eslint, 安装eslint
</span>3.3 运行 eslint --init：初始化eslint</pre>
</div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="bc267" data-offset-key="9s91d-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="9s91d-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="9s91d-0-0"><span data-text="true"> 当你敲出init后，<span data-offset-key="9s91d-0-1"><span data-text="true">eslint的命令行会自动询问你一大堆选择题，而你只要通过箭头选择选项并回车就好了<span data-offset-key="9s91d-0-2"><span data-text="true">，很方便啊！</span></span></span></span></span></span></div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="bc267" data-offset-key="9go6f-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="9go6f-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="9go6f-0-0"><span data-text="true">这些问题包括：</span></span></div>
</div>
<ul class="public-DraftStyleDefault-ul" data-offset-key="1oc9o-0-0">
<li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="bc267" data-offset-key="1oc9o-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="1oc9o-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="1oc9o-0-0"><span data-text="true">Q1<span data-offset-key="1oc9o-0-1"><span data-text="true">. 你想如何使用eslint?1.检查语法2.检查语法并且发现问题3.检查语法，发现问题并强制约定代码风格</span></span></span></span></div>
</li>
<li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="bc267" data-offset-key="uk1l-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="uk1l-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="uk1l-0-0"><span data-text="true">Q2<span data-offset-key="uk1l-0-1"><span data-text="true">. 你的项目使用的模块化方式？1.CommonJS 2.Import/export 3.None of these</span></span></span></span></div>
</li>
<li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="bc267" data-offset-key="bskpv-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="bskpv-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="bskpv-0-0"><span data-text="true">Q3<span data-offset-key="bskpv-0-1"><span data-text="true">. 你的环境？ 1.Node 2.浏览器</span></span></span></span></div>
</li>
<li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="bc267" data-offset-key="chl7m-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="chl7m-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="chl7m-0-0"><span data-text="true">Q4<span data-offset-key="chl7m-0-1"><span data-text="true">. 你使用到的框架? 1.React 2.Vue 3. None of these</span></span></span></span></div>
</li>
<li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="bc267" data-offset-key="9gh65-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="9gh65-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="9gh65-0-0"><span data-text="true">Q5<span data-offset-key="9gh65-0-1"><span data-text="true">. 你的项目使用TypeScript? 1.Y 2.N</span></span></span></span></div>
</li>
</ul>
<div class="Editable-unstyled" data-block="true" data-editor="bc267" data-offset-key="23ng0-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="23ng0-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="23ng0-0-0"><span data-text="true">(爽！妈妈再也不用担心我的配置了)</span></span></div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="23ng0-0-0"> </div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="bc267" data-offset-key="5q4ob-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="5q4ob-0-0"><strong><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="5q4ob-0-0"><span data-text="true">你可能会问：哎呀！我不小心搞错了选项！，那我要重新来一次吗？</span></span></strong></div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="bc267" data-offset-key="ev5mb-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="ev5mb-0-0"><strong><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="ev5mb-0-0"><span data-text="true">不用的，因为其实上面的选择只是帮助生成配置文件而已，你要改随时改配置文件就可以了呀。</span></span></strong></div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="ev5mb-0-0"> </div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="bc267" data-offset-key="3rti9-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="3rti9-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="3rti9-0-0"><span data-text="true">我们来看下面的一份配置文件</span></span></div>
</div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="52rad-0-0">
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">{
</span>"env"<span style="color: rgba(0, 0, 0, 1)">:{
</span>"browser":<span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">,
</span>"es6":<span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">
},
</span>"extends"<span style="color: rgba(0, 0, 0, 1)">:[
</span>"eslint:recommended"<span style="color: rgba(0, 0, 0, 1)">,
</span>"plugin:@typescript-eslint/eslint-recommended"<span style="color: rgba(0, 0, 0, 1)">
],
</span>"globals"<span style="color: rgba(0, 0, 0, 1)">:{
</span>"Atomics":"readonly"<span style="color: rgba(0, 0, 0, 1)">,
</span>"SharedArrayBuffer":"readonly"<span style="color: rgba(0, 0, 0, 1)">
},
</span>"parser":"@typescript-eslint/parser"<span style="color: rgba(0, 0, 0, 1)">,
</span>"parserOptions"<span style="color: rgba(0, 0, 0, 1)">:{
</span>"ecmaVersion":2018<span style="color: rgba(0, 0, 0, 1)">,
</span>"sourceType":"module"<span style="color: rgba(0, 0, 0, 1)">
},
</span>"plugins":["@typescript-eslint"<span style="color: rgba(0, 0, 0, 1)">],
</span>"rules"<span style="color: rgba(0, 0, 0, 1)">:{
</span>"semi":["error","always"<span style="color: rgba(0, 0, 0, 1)">],
</span>"quotes":["error","double"<span style="color: rgba(0, 0, 0, 1)">]
}
}</span></pre>
</div>
<p> </p>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="bc267" data-offset-key="fu8lt-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="fu8lt-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="fu8lt-0-0"><span data-text="true">eslint真棒，让我们看看这些配置选项都是怎么搞的吧</span></span></div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="bc267" data-offset-key="7qqin-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="7qqin-0-0"><strong><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="7qqin-0-0"><span data-text="true">1.env配置项</span></span></strong></div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="bc267" data-offset-key="9uutg-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="9uutg-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="9uutg-0-0"><span data-text="true">常见的可配置的有</span></span></div>
</div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="514p7-0-0">
<div class="cnblogs_code">
<pre>"env"<span style="color: rgba(0, 0, 0, 1)">:{
</span>"browser":<span style="color: rgba(0, 0, 255, 1)">true</span>,<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">浏览器环境</span>
"node":<span style="color: rgba(0, 0, 255, 1)">true</span>,<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">Node环境</span>
"es6":<span style="color: rgba(0, 0, 255, 1)">true</span>,<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">es6语法</span>
"commonjs":<span style="color: rgba(0, 0, 255, 1)">true</span>,<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">commonjs</span>
"worker":<span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">webwork相关语法</span>
},</pre>
</div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="bc267" data-offset-key="2lqah-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="2lqah-0-0"><strong><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="2lqah-0-0"><span data-text="true">2.globals配置项</span></span></strong></div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="bc267" data-offset-key="eg8an-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="eg8an-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="eg8an-0-0"><span data-text="true">它配的是全局变量，一般情况下，按照eslint的规则，直接使用全局变量是会报错的，globals配置项帮你避免了这一点</span></span></div>
</div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="9r4os-0-0">
<div class="cnblogs_code">
<pre>"globals"<span style="color: rgba(0, 0, 0, 1)">:{
</span>"Atomics":"readonly"<span style="color: rgba(0, 0, 0, 1)">,
</span>"SharedArrayBuffer":"readonly"<span style="color: rgba(0, 0, 0, 1)">
},</span></pre>
</div>
<p> </p>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="bc267" data-offset-key="5tqvc-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="5tqvc-0-0"><strong><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="5tqvc-0-0"><span data-text="true">3.parser配置项</span></span></strong></div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="bc267" data-offset-key="cesaq-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="cesaq-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="cesaq-0-0"><span data-text="true">可以配置解析器，默认是用的typescript的解析器，<span data-offset-key="cesaq-0-1"><span data-text="true">比如我们项目中就改成了babel-parser</span></span></span></span></div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="cesaq-0-0">
<div class="cnblogs_code">
<pre>"parser": "@typescript-eslint/parser”,</pre>
</div>
<p> </p>
</div>
</div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="19atf-0-0"><span class="prism-token token property" style="font-family: "Microsoft YaHei"; font-size: 16px"><span data-offset-key="19atf-0-0"><span data-text="true"><strong style="font-family: "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="ceag1-0-0"><span data-text="true">4.rules</span></span></strong></span></span></span></div>
<div class="Editable-unstyled" data-block="true" data-editor="bc267" data-offset-key="889pq-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="889pq-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="889pq-0-0"><span data-text="true">配置具体的检查细节，比如下面这条配置直接干了no-console，如果使用console.log会报警告。如图所示</span></span></div>
</div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="64q15-0-0">
<div class="cnblogs_code">
<pre>"rules"<span style="color: rgba(0, 0, 0, 1)">:{
</span>"no-console":1<span style="color: rgba(0, 0, 0, 1)">
}</span></pre>
</div>
<span class="prism-token token property" style="font-family: "Microsoft YaHei"; font-size: 16px"><span data-offset-key="64q15-0-0"><span data-text="true"><br></span></span></span></div>
<div class="Editable-unstyled" data-block="true" data-editor="bc267" data-offset-key="22ri0-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="22ri0-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="22ri0-0-0"><span data-text="true">每个项目后面可以跟0，1，2三种数字</span></span></div>
</div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="5q5t6-0-0">
<div class="cnblogs_code">
<pre>0<span style="color: rgba(0, 0, 0, 1)">:不报错，不警告
</span>1<span style="color: rgba(0, 0, 0, 1)">：警告但不报错
</span>2:报错</pre>
</div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="bc267" data-offset-key="1m3a-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="1m3a-0-0"><strong><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="1m3a-0-0"><span data-text="true">5.extends</span></span></strong></div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="bc267" data-offset-key="99a9n-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="99a9n-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="99a9n-0-0"><span data-text="true">你可能会问了，哎呀！！<span data-offset-key="99a9n-0-1"><span data-text="true">这么多rules我还怎么配啊，这样eslint配置文件连起来都可以绕VScode两圈了！</span></span></span></span></div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="bc267" data-offset-key="4hocb-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="4hocb-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="4hocb-0-0"><span data-text="true">不要担心！！我们有extends配置项这个好东西，它提供的继承功能直接集成了一些默认的配置，如下</span></span></div>
</div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="622fd-0-0">
<div class="cnblogs_code">
<pre>"extends"<span style="color: rgba(0, 0, 0, 1)">:[
</span>"eslint:recommended"<span style="color: rgba(0, 0, 0, 1)">,
</span>"plugin:@typescript-eslint/eslint-recommended"<span style="color: rgba(0, 0, 0, 1)">
]</span></pre>
</div>
<p> </p>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="bc267" data-offset-key="cdcf7-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="cdcf7-0-0"><strong><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="cdcf7-0-0"><span data-text="true">6.plugins</span></span></strong></div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="bc267" data-offset-key="746t-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="746t-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="746t-0-0"><span data-text="true">加各种插件，比如你想增加React的检查怎么办？</span></span></div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="746t-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="3vtij-0-0"><span data-text="true">你需要安装eslint-plugin-react这个插件</span></span></div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="bc267" data-offset-key="97chl-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="97chl-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="97chl-0-0"><span data-text="true">然后在配置中增加以下内容</span></span></div>
</div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="2eh3j-0-0">
<div class="cnblogs_code">
<pre>"plugins":["react”]</pre>
</div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="bc267" data-offset-key="c9v5q-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="c9v5q-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="c9v5q-0-0"><span data-text="true">就OK了</span></span></div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="c9v5q-0-0"> </div>
</div>
<h3 class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="9s5uc-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="9s5uc-0-0"><span data-text="true">运行示例</span></span></h3>
<div class="Image-resizerContainer" data-size="normal">
<div>
<div class="Image-captionContainer" data-size="normal">
<div><span style="font-family: "Microsoft YaHei"; font-size: 16px"><img class="Image FocusPlugin--unfocused Image--isBlock" src="https://pic1.zhimg.com/v2-2438d2568593c35c8df42bf6c2c3322c_b.png" alt="" data-size="normal" data-rawwidth="924" data-rawheight="254" data-watermark="watermark" data-original-src="https://pic1.zhimg.com/v2-2438d2568593c35c8df42bf6c2c3322c_b.jpg" data-watermark-src="https://pic1.zhimg.com/v2-c07f94117ee5cca99f78649e33be552c_b.jpg"></span></div>
</div>
</div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="bc267" data-offset-key="7ubb7-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="7ubb7-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="7ubb7-0-0"> </span></div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="bc267" data-offset-key="5e1gg-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="5e1gg-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="5e1gg-0-0"><span data-text="true">备注：官方推荐使用局部eslint而非全局eslint</span></span></div>
</div>
<blockquote class="Editable-styled" data-block="true" data-editor="bc267" data-offset-key="bl1l9-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="bl1l9-0-0"><span style="font-family: "Microsoft YaHei"; font-size: 16px" data-offset-key="bl1l9-0-0"><span data-text="true">ESLint was installed locally. We recommend using this local copy instead of your globally-installed copy</span></span></div>
</blockquote>
</div>
<div id="MySignature" role="contentinfo">
我叫彭湖湾，请叫我胖湾<br><br>
来源：https://www.cnblogs.com/penghuwan/p/11479627.html
頁:
[1]