eslint和tslint使用指南

2019 / 03 / 26

eslint,prettier,tslint其实都是用来约束代码的,也是赋予新的能力的

首先eslint具备一部分格式化代码的能力,但是eslint格式化代码是为了约束风格,而prettier是纯粹的为了美化代码,tslint可以用来约束类型,但也能约束风格,但是除了约束类型以外和eslint还是有一定差距的,所以很多人会要求tslint增强代码约束能力。

目前tslint已经可以和eslint结合用了,准确的来说是作为eslint的一部分,为eslint增加了约束类型,所以需要先配置好eslint,然后再增加约束类型的tslint的配置。

eslint介绍

extends

写eslint总是比较伤脑筋的,直接用第三方的该多好,所以可以安装package然后通过extends来拿过来用,当然eslint官方也自己做了一个叫做eslint:recommand的拓展,直接用就好了,不需要安装package。强推使用这个。

env

如果想要用node的api,比如process.env,或者想用es6的API,新的数据类型Map Set,eslint怎么知道这些东西是不是全局变量呢,env就是做这个的,通过添加常用的添加常见的环境来增加全局变量。

当然eslint官方支持的env已经可以满足各种需求了,包括单元测试,node,broswer,es6等等。

具体参见 http://eslint.cn/docs/user-guide/configuring#specifying-environments

rules

eslint提供了大量的配置代码约束的规则,包括缩进,引号,什么时候应该换行,应该用var还是let const,是否允许用console,也可以通过plugin拓展规则。rules也可以修改报错为警告,也可以允许通过

indent: ['error', 2],
'linebreak-style': ['error', 'unix'],
quotes: ['error', 'single'],
semi: ['error', 'never'],

具体参见 http://eslint.cn/docs/rules/

plugins

当eslint的规则不够用的时候,就需要用plugin了,比如说eslint就没专门给react定义规则,拓展rules或者引入一系列新的rules可以使用。

比如需要配置react和兼容prettier,然后也可以定义拓展的rules。还有插件的一些列的配置也需要extends。

extends: ['eslint:recommended', 'plugin:react/recommended'],
plugins: ['react', 'prettier'],
rules: {
'react/jsx-uses-react': 'error',
'react/jsx-uses-vars': 'error',
'prettier/prettier': 'warning'
},

parser

说到eslint,babel,tslint都是做代码分析的,所以他们都有parser,但是有时候eslint不知道babel用了什么新特性,或者tslint和eslint冲突了等等,这个时候就需要eslint用其他工具的parser了。

比如babel中想用装饰器,但是eslint并不能支持这个特性,所以会报错,这个时候就可以通过babel-eslint来让eslint知道babel用了哪些新特性。


parserOptions

env中并不能支持module这个特性,因为这个特性属于代码应该如何解析这个范畴,通常需要配置的包括ecmaFeatures的版本,当env中有es6的时候会生效。

sourceType module,允许代码通过import export阻止,其他特性比如jsx

parserOptions: {
ecmaFeatures: {
jsx: true
},
ecmaVersion: 2018,
sourceType: 'module'
},

global

如果通过其他的方式,比如script直接引入了jquery,那么$就会作为全局变量在项目中使用,可以添加在global中添加这个变量。

globals: {
$: true
}

以上就是eslint的所有常用配置。

eslint可以约束代码格式,也能约束全局变量的使用但是不能约束代码的性质,但是对于弱类型的javascript仍然不够全面。

tslint介绍

不同于eslint对代码格式的约束,对API的约束,tslint可以对代码变量的类型,参数类型进行严格的约束

由于javascript的弱类型语言的特性,变量的使用,参数的传递都是可以随心所欲的,但是不严格也会导致一系列的问题,比如说下图所示的函数在调用的时候进行了错误的参数传递,从而发生意料之外的问题。

而这些问题都是可以通过约束变量的声明,函数的返回值,从而进行防范的,而且使用typescript编写代码可以在一定程度上让开发者之间更加容易沟通,减少代码的理解难度。

当然也会导致工作量的提升。

而很多时候tslint和eslint又回去做一样的事情,比如说prettier和eslint就会抢着干活,他们都能很好的格式化代码,说到这个我觉得prettier既然已经做的非常棒了,eslint和tslint就应该放一放,不要抢着搞代码格式化的事了。

当然时代在进步,大家也不希望出现不和平导致百姓们成为受害者这样的问题,这些工具的开发者们也在互相妥协,比如今年一月份typescript的官方就像eslint妥协了,推出了一个叫做typescript-eslint的工具,可以使用eslint约束ts代码,只需要安装这个插件就好了。

具体参见这里https://github.com/typescript-eslint/typescript-eslint

目前来看大家伙分工开始越来越明确了,prettier格式化代码,tslint类型检查。eslint的话,主要就是什么都做,然后集成prettier和tslint把。

集成typescript到eslint

新出来的typescript-eslint可以很好的建成typescript到eslint,具体如下

替换babel-parser为@typescript-eslint/parser,不需要担心babel的特性eslint拿不到

parser: '@typescript-eslint/parser'

这个东西需要的依赖比较多,包括@typescript-eslint/typescript-estree, typescript, tslint

@types

代码执行的时候还是会有很多变量拿不到,不只是eslint的env提供的变量,比如react-hot-loader里的module.hot是webpack对module变量的拓展,因此需要额外增加类型。@types/webpack-env

比如使用react也需要@type/react对react的代码进行类型检查

使用es6+需要通过@type/es6-shim来进行类型检查

这种类型拓展是typescript的一个特点,typescript编译的时候会优先去node_modules下查找所有的@types然后引入实现类型的拓展,所以只需要安装就好了,不需要进行额外的定义。

tsconfig.json

tslint的配置写在eslintrc中,就像typesscript是javascript的超集一样,tslint是eslint的超集,tslint支持eslint的配置,但是也需要额外的配置,需要单独建立tsconfig.json文件。

一个简单的配置主要是compilerOptions,包括装饰器,保留jsx,移除注释等等。

当然配置项非常多,具体可以参见https://www.tslang.cn/docs/handbook/tsconfig-json.html,这里有详细的配置项介绍。至于说如何检查类型,检查相关的功能是typescript天生的能力,只要使用.ts或者.tsx的文件格式就行了。

{
"compilerOptions": {
"experimentalDecorators": true,
"jsx": "preserve",
"removeComments": true,
"sourceMap": true
},
"include": ["src/**/*"],
"exclude": ["node_modules", "**/*.spec.ts"]
}

webpack

修改webpack的配置,tsx和jsx用到的loader都是一样的,只需要修改文件类型即可

{
test: /\.(jsx|tsx|ts|js)?$/,
use: ['babel-loader', { loader: 'eslint-loader', options: { fix: true } }],
exclude: /node_modules/
},

.babelrc

babel中需要加上对typescript的支持

{
"presets": ["@babel/preset-env", "@babel/preset-typescript", "@babel/preset-react"],
"plugins": [
"react-hot-loader/babel",
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-proposal-class-properties", { "loose": true }]
]
}

vscode

vscode默认eslint是不管ts文件的,所以即便webpack中增加了loader,在文件里也不会显示红色的下划线提示错误,这个时候就需要修改vscode的配置,找到vscode的setting文件,然后增加下面的配置,eslint的配置就可以在tsx文件中生效了。

"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact"
]

配置好这些之后就能使用typescript了,甚至可以同时使用两种代码也无妨。

嗨,请先 登录

加载中...
(๑>ω<๑) 又是元气满满的一天哟