eslint的几种检测级别-syntax、problem、code style

news/2025/2/27 12:05:16

JS作为一门动态类型的语言,在给开发者带来便利的同时,也不可避免的引起一些潜在问题。简单来说,它需要你在编程的时候充分的了解当前对象是否有你要使用的方法或者属性。

然后人脑毕竟是有限的。所以就需要一些手段帮你找到潜在的问题。这种手段分为两种:

  • 类型检查,也即是TypeScript做的事
  • 问题(problem)检查eslint做的事

举个例子,下面的代码展示了二者对各自认为有问题的地方做出提示。

// TS 报错 This expression is not callable.
// 但eslint则认为OK
const anVar = "my var";
anVar();

// 下面的情况可能在算法中比较常见。
// 对于eslint而言,这种代码可能引起潜在的问题。
// 但对TS来说,是被允许的。
while (foo -= 2) { // no-cond-assign
  console.log(foo)
}

但其实二者没有特别明确的边界。事实上,二者对多数潜在的错误都会做出提示,比如:

javascript">// TS: Duplicate function implementation
// ESLINT: Identifier 'bar' has already been declared
function bar() {
//
}
function bar() {
//
}

只不过eslint的规则是可扩展的,且非常丰富的,对于使用了TS的项目,如果有需要也可以使用eslint

有点跑题了,在我们初始化eslint的时候,会有几个选项供我们选择。

$ npx eslint --init

在这里插入图片描述
这个意思是说,你想使用eslint做哪些事:

  • syntax 语法检查,这个eslint即使什么也不配置,也默认支持的。毕竟如果你的代码本身有语法问题,是根本跑不通的。但我们一般感受不到,因为IDE已经帮你做了这件事了。除非你使用记事本之类的去开发。最后你可能会执行npx eslint somefile.js。所以如果我们使用eslint,就不可能只选择第一个的功能。
  • syntax and find problems 该选项会帮你添加推荐的规则,如上文所示的no-cond-assign即不允许在条件判断中赋值。这些可以认为是潜在的问题
  • syntax,find problems, and enforce code style。这个选项是除了上边第二条的以外,还包括代码风格的检查。

选择代码风格
在这里插入图片描述
实际上,代码风格与潜在的问题边界也不是那么清晰,尤其是一组规则内的配置,比如airbnb的规则,可能即包含潜在的问题,也可能包括代码风格,比如:

javascript">function myfunc(params) {
  params = 'not ok in eslint'
}
// 上边的代码如果使用了airbnb有两个错误
// 1. ssignment to function parameter 'params' 不允许重新给参数赋值
// 2. Missing semicolon 缺少分号

如上,两个错误中,显然第一个是潜在的问题。第二个才是代码风格。

简单总结下:

  • TS与eslint的功能并非重合的,eslint的可扩展可能定制更多的团队规范
  • 为了保证团队代码风格的统一,有必要是用eslint
  • TS,eslint质量检查,eslint风格检查,(其实prettier更擅长风格检查)他们并非有严格的边界。我们可以同时使用。

http://www.niftyadmin.cn/n/1382685.html

相关文章

配置fileupload(文件上传组件)

<properties><commons-fileupload.version>1.3.1</commons-fileupload.version> </properties><dependencyManagement><dependencies><!-- 文件上传组件 --><dependency><groupId>commons-fileupload</groupId>&l…

Docker逻辑数据流

最近在研究Docker,一种新的轻型虚拟化技术&#xff0c;个人觉得这是以后虚拟化的方向。从目前企业级及开源社区关于虚拟化的应用及关注方向&#xff0c;大多数使用重虚拟化技术&#xff0c;即在Hypervisor上为每个应用虚拟guest OS,对于guest OS&#xff0c;除了应用程序需要使…

PHP 的 preg_match 和 preg_match_all

preg_match为仅输出一个匹配结果 preg_match_all为输出全部匹配结果 <?php $tt<img src"/GTicket/Public/kindeditor/php/../attached/image/20160510081224_31958.png" alt"" /> <img src"http://s1.dwstatic.com/group1/M00/8F/DF/923…

MS MDS系列之MDS层次结构(Hierarchy)

在Master Data Services中&#xff0c;Hierarchy的作用主要用于&#xff1a; 对同属性成员进行分组聚合成员用于分析和报告输出写在开始&#xff1a;显示层次结构&#xff08;Explicit Hierarchy&#xff09;即将在新版本中不再应用了。应该是2016。如果还在用之前的版本&#…

TypeScript-Lookup Types - Cannot access ‘xxx‘ because ‘xxx‘ is a type, but not a namespac

如果我想希望使用某种类型声明的子类型作为某个变量声明的类型… export interface Car {Name: string;Speed: number;Manufactured: number; }const Speed: Car.Speed 200;上面的写法会抛出错误 Cannot access ‘Car.Speed’ because ‘Car’ is a type, but not a namespac…

玩转Go语言之结构体

结构体//定义结构体类型 type Person struct {name stringage intheight float64 }//定义结构体变量 var student Person//给结构体属性赋值 student.name "zhangsan" student.age 20 student.height 170.0//打印结构体 Println(student)复制代码总结:1.Go语言中的…

[na]二层+tcp/udp数据包格式

标准&#xff1a;6623 17 3 思科&#xff1a;6623320 6 ip首部格式 tcp首部格式 转载于:https://www.cnblogs.com/iiiiher/p/5480947.html

AWS发布Lambda@Edge,支持在CloudFront CND的边缘服务器上执行Node.js函数

Amazon Web服务&#xff08;AWS&#xff09;发布了LambdaEdge&#xff0c;让客户可以在全球的AWS站点运行Node.js Lambda函数&#xff0c;从而以非常低的延迟动态地响应最终用户。\\开发者可以用LambdaEdge将Node.js代码上传到AWS Lambda——Amazon的“serverless”服务&#x…