代码检查工具!从 TSLint 到 ESLint
2019 年 1 月,TypeScript
官方决定全面采用 ESLint
,之后也发布 typescript-eslint
项目,以集中解决 TypeScript
和 ESLint
兼容性问题。而之前的两个 lint
解决方案都将弃用:
typescript-eslint-parser
已停止维护- 在完成
ESLint
功能后,将弃用TSLint
并帮助用户迁移到ESLint
TS 官方转向 ESLint 的原因:
- TSLint 执行规则的方式存在一些框架问题,从而影响性能,而修复这些问题会破坏现有的规则。
- ESLint 的性能更好,并且社区用户通常拥有 ESLint 的规则配置(比如 React 和 Vue 的配置),而不会拥有 TSLint 的规则配置。
已经有 TypeScript,为什么需要 ESLint ?
ts
编译器主要做类型检查和语言转换,ESLint
则可以保持代码风格的统一;两者的功能有部分重合,但也各有职责。
但是,ESLint
处理 ts
代码会遇到一些问题?因为 ts
编译器和 ESLint
在开始各自的工作之前都会将代码转换成 AST
(抽象语法树),而两种语法树是不兼容的。这时,我们可以使用 typescript-eslint
项目,它为 ESLint
提供了专门解析 ts 代码的编译器,来解决 TypeScript
和 ESLint
兼容性问题。
在 TypeScript 中使用 ESLint
安装
npm i eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin -D
@typescript-eslint/parser
为 ESLint
提供解析器。(别忘了同时安装 typescript
)
@typescript-eslint/eslint-plugin
它作为 ESLint
默认规则的补充,提供了一些额外的适用于 ts
语法的规则。
创建配置文件
ESLint
需要一个配置文件来决定对哪些规则进行检查,配置文件的名称一般是 .eslintrc.js
或 .eslintrc.json
。
// .eslintrc.json
{"parser": "@typescript-eslint/parser","plugins": ["@typescript-eslint"],"parserOptions": {"project": "./tsconfig.json"},"extends": ["plugin:@typescript-eslint/recommended"],"rules": { "@typescript-eslint/no-inferrable-types": "off" }
}
rules
的取值一般是一个数组,其中第一项是 off
、warn
或 error
中的一个,表示关闭、警告和报错。后面的项都是该规则的其他配置。
如果没有其他配置的话,则可以将规则的取值简写为数组中的第一项(上例中的 @typescript-eslint/no-inferrable-types
)。
off
、warn
和 error
的含义如下:
off
:禁用此规则warn
:代码检查时输出错误信息,但是不会影响到exit code
error
:发现错误时,不仅会输出错误信息,而且exit code
将被设为1
(一般exit code
不为0
则表示执行出现错误)
检查整个项目的 ts/js 文件
// package.json
{..."script": {..."lint": "eslint src --ext .js,.ts"}
}
npm run lint
在 VSCode 中集成 ESLint 检查
安装 ESLint
插件,点击「扩展」按钮,搜索 ESLint
,然后安装即可。
VSCode
中的 ESLint
插件默认是不会检查 .ts
后缀的,需要在「文件 => 首选项 => 设置 => 工作区」中(也可以在项目根目录下创建一个配置文件 .vscode/settings.json
),添加以下配置:
{..."eslint.validate": ["javascript","javascriptreact","vue","html","typescript"]
}
比较 babel-eslint 和 typescript-eslint
- babel-eslint: 支持
TypeScript
没有的额外的语法检查,抛弃TypeScript
,不支持类型检查。 - typescript-eslint: 基于
TypeScript
的AST
,支持创建基于类型信息的规则(tsconfig.json
)
两者底层机制不一样,不要一起用。Babel
体系建议用 babel-eslint
,否则可以用 typescript-eslint
。
代码检查工具!从 TSLint 到 ESLint相关推荐
- eslint代码检查工具
what?什么是eslint? Eslint是一个 ECMAScript/JavaScript代码检查工具,使用node.js编写.可以使用eslint默认规则,也可以创建自己的检测规则. why?为 ...
- 前端代码检查工具之stylelint使用指南
作为前端开发leader你必须要对组员开发的代码制定适合项目的开发规范,并且要做到跟踪检查,传统的做法是制定军规,比如命名方式,代码结构,注释模版,缩紧换行等等,然后通过代码review检查,但这样耗 ...
- JavaScript代码检查工具——JSLintMate
JSLintMate是一款快速.简洁.易于使用JSLint(Douglas Crockford强大的JS代码检查工具)或者JSHint来检查JavaScript代码的扩展工具. JSLintMate是 ...
- CSS代码检查工具stylelint
前面的话 CSS不能算是严格意义的编程语言,但是在前端体系中却不能小觑. CSS 是以描述为主的样式表,如果描述得混乱.没有规则,对于其他开发者一定是一个定时炸弹,特别是有强迫症的人群.CSS 看似简 ...
- 静态代码检查工具简介
静态代码检查工具简介 在 Java 软件开发过程中,开发团队往往要花费大量的时间和精力发现并修改代码缺陷.传统的代码复审.同行评审,通过人工方式来检查缺陷仍然是一件耗时耗力的事情.Java 静态代码分 ...
- 静态代码检查工具 cppcheck 的使用
CppCheck是一个C/C++代码缺陷静态检查工具.不同于C/C++编译器及其它分析工具,CppCheck只检查编译器检查不出来的bug,不检查语法错误.所谓静态代码检查就是使用一个工具检查我们写的 ...
- cppcheck代码检查工具安装与使用技巧
cppcheck代码检查工具安装与使用技巧 Cppcheck 是一种 C/C++ 代码缺陷静态检查工具.不同于 C/C++ 编译器及很多其它分析工具,它不检查代码中的语法错误. Cppcheck 可以 ...
- 代码检查工具Sonar
sonar介绍 Sonar 是一个用于代码质量管理的开放平台.通过插件机制,Sonar 可以集成不同的测试工具,代码分析工具,以及持续集成工具.与持续集成工具(例如 Hudson/Jenkins 等) ...
- 最近开始研究PMD(一款采用BSD协议发布的Java程序代码检查工具)
PMD是一款采用BSD协议发布的Java程序代码检查工具.该工具可以做到检查Java代码中是否含有未使用的变量.是否含有空的抓取块.是否含有不必要的对象等.该软件功能强大,扫描效率高,是Java程序员 ...
- vscode中对flake8(python静态代码检查工具)和yapf(python代码格式化工具)的设置
在命令行下安装好flake8和yapf后在vscode中的用户设置(settings.json)中添加以下两行即可: "python.linting.flake8Enabled": ...
最新文章
- python调用什么函数实现对文件内容的读取_如何使用python语言中的方法对文件进行读写操作...
- ICLR2021 | 利用数据扩充提高蛋白质序列模型的通用性
- 用python画烟花-python实现浪漫的烟花秀
- VTK:线性单元用法实战
- vue_组件_非prop特性
- Python 程序 运行过程
- plsql查询乱码问题解决
- linux中级之keepalived概念
- CSS权威指南(1)
- Android Activity 硬件加速
- 如何用ps将图片修改成指定大小
- Windows 10环境下TensorFlow(gpu版本)配置教程——[图解] [详细版][零基础]
- matlab聚类分析实例的博客,基于Matlab的模糊聚类分析及其应用 含实例应用.pptx
- 虚拟机中使linux系统分辨率变大,能够在虚拟机全屏显示
- 远程分支已经不存在的解决办法
- 抖音如何能快速涨粉?
- 解决win10系统网络连接正常,但是网页打不开的问题
- 文本两端对齐及将表单打印在A4上
- 开发人员常用工具最全锦集(持续更新)
- 机器学习面试题1~60
热门文章
- 全能程序员系列(十二)--开发人员该怎么做PPT?
- pandas学习之excel重复项判断显示与去重
- 人机交互-3-评估的基础知识
- ubuntu18.04 桌面不定时crash重置问题
- C++函数参数的缺省值
- eda交通灯控制器波形输入_(EDA)基于FPGA的十字路口交通灯控制器设计说明书.doc...
- Unity Shader数学基础 -- Shader入门精要学习(3)
- 建无根树+无根树转有根树
- CPU线程与超线程技术
- w10如何共享计算机硬盘,Win10如何设置局域网磁盘共享?操作方法分享