1、安装node、typescript、tslint
阿里仓库下载node安装包，我使用的是8.11.0
网址：https://npm.taobao.org/mirrors/node/
安装完成后，打开CMD，输入
node -v
npm -v
上面两个命令如果均输出的版本号，证明安装成功，否则证明没有安装成功，接下来的步骤也就不能继续了。
安装typescript
npm install typescript -g
安装tslint
npm install tslint -g
2、写tslint配置文件
任意位置新建tslint.json 复制粘贴下面内容
{
"rules": {
// TS特性
"member-access": true, // 设置成员对象的访问权限（public,private,protect)
"member-ordering": [// 设置修饰符顺序
true,
{
"order": [
"public-static-field",
"public-static-method",
"protected-static-field",
"protected-static-method",
"private-static-field",
"private-static-method",
"public-instance-field",
"protected-instance-field",
"private-instance-field",
"public-constructor",
"protected-constructor",
"private-constructor",
"public-instance-method",
"protected-instance-method",
"private-instance-method"
]
}
],
"no-empty-interface":true,// 不允许空接口
"no-parameter-reassignment":true,// 不允许修改方法输入参数
"prefer-for-of":true,// 如果for循环中没有使用索引，建议是使用for-of
// 功能特性
"await-promise":true,// 不允许没有Promise的情况下使用await
"curly":true,// if/for/do/while强制使用大括号
"forin":true,// 使用for in语句时，强制进行hasOwnProperty检查
"no-arg":true,// 不允许使用arguments.callee
// "no-bitwise":true, // 不允许使用特殊运算符 &, &=, |, |=, ^, ^=, <<, <<=, >>, >>=, >>>, >>>=, ~
"no-conditional-assignment":true,// do while/for/if/while 语句中将会对例如if(a=b)进行检查
// "no-console":true,// 不允许使用console对象
"no-debugger":true,// 不允许使用debugger
"no-duplicate-super":true,// 不允许super() 两次使用在构造函数中
"no-empty":true,// 函数体不允许空
"no-eval":false,// 不允许使用eval
"no-for-in-array":true,// 不允许对Array使用for-in
"no-invalid-template-strings":true,// 只允许在模板字符串中使用${
"no-invalid-this":false,// 不允许在class之外使用this
"no-null-keyword":true,// 不允许使用null,使用undefined代替null，指代空指针对象
"no-sparse-arrays":true,// 不允许array中有空元素
"no-string-throw":true,// 不允许throw一个字符串
"no-switch-case-fall-through":true,// 不允许case段落中在没有使用breack的情况下，在新启一段case逻辑
"no-unsafe-finally":true,// 不允许在finally语句中使用return/continue/break/throw
"no-unused-expression":true,// 不允许使用未使用的表达式
"no-use-before-declare":true,// 在使用前必须声明
"no-var-keyword":true,// 不允许使用var
"radix":true,// parseInt时，必须输入radix精度参数
"restrict-plus-operands":true,// 不允许自动类型转换，如果已设置不允许使用关键字var该设置无效
"triple-equals":true,// 必须使用恒等号，进行等于比较
"use-isnan":true,// 只允许使用isNaN方法检查数字是否有效
// 维护性功能
"indent":[true, "spaces", 4],// 每行开始以4个空格符开始
"linebreak-style":["off","windows"],// 换行符格式 CR/LF可以通用使用在windows和osx
"max-classes-per-file":[true,1],// 每个文件中可定义类的个数
"max-file-line-count":[true,1000],// 定义每个文件代码行数
"max-line-length":[false,120],// 定义每行代码数
"no-default-export":true,// 禁止使用export default关键字，因为当export对象名称发生变化时，需要修改import中的对象名。https://github.com/palantir/tslint/issues/1182#issue-151780453
"no-duplicate-imports":true,// 禁止在一个文件内，多次引用同一module
// 格式
"align":[true,"parameters","arguments","statements","members","elements"],// 定义对齐风格
"array-type":[true,"array"],// 建议使用T[]方式声明一个数组对象
"class-name":true,// 类名以大驼峰格式命名
"comment-format":[true, "check-space"],// 定义注释格式
"encoding":true,// 定义编码格式默认utf-8
"import-spacing":true,// import关键字后加空格
"interface-name":[true,"always-prefix"],// interface必须以I开头
"jsdoc-format":true,// 注释基于jsdoc风格
"new-parens":true,// 调用构造函数时需要用括号
"no-consecutive-blank-lines":[true,2],// 不允许有空行
"no-trailing-whitespace": [// 不允许空格结尾
true,
"ignore-comments",
"ignore-jsdoc"
],
"no-unnecessary-initializer":true,// 不允许没有必要的初始化
"variable-name":[false,"check-format",// 定义变量命名规则
"allow-leading-underscore",
"allow-trailing-underscore",
"ban-keywords"]
}
}
我也是从网上找的，不过官网有配置说明，https://palantir.github.io/tslint/ 。
3、打开webstorm -> file -> settings -> Tools -> file wathers (如果执行上面过程的时候webstorm是打开的，那么这里要关闭重新打开一次)
并在右侧否选typescript
image.png
如果右侧没有，可以点击加号添加，信息如下：
Name:TypeScript
File Type:TypeScript
Scope:All Places
Program:C:\Users\{你的系统用户名}\AppData\Roaming\npm\tsc.cmd
Arguments:--sourcemap --target "ES5"
Output paths to refresh:$FileNameWithoutExtension$.js:$FileNameWithoutExtension$.js.map
[*]Auto-save....
[*]Trigger....
[ ]...
[ ]...
image.png
点击OK即可保存。
4、打开webstorm -> file -> settings ->Language & Frameworks -> TypeScript -> TSlint
按下图配置
image.png
保存即可。
5、编译时要保证当前目录有tsconfig.json文件，文件内容如下：
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"sourceMap": true
},
"exclude": [
"node_modules"
]
}
可根据官网说明自行配置https://www.tslang.cn/docs/handbook/tsconfig-json.html
网友评论