tsLint环境配置及用法示例

1、TSlint的安装

mac:

//卸载原有的ts 因为tslint需要相匹配的版本才能下载,卸载原有的ts,直接安装最方便。

npm uninstall -g typescript

//安装ts和tslint

npm install -g tslint typescript

安装成功,如下图,

Windows:

    Wing中下载插件TSLint 启用。

     进行全局安装 npm install -g tslint

     如果typescript版本不够 安装下  npm install -g typescript

     安装完成后生成配置文件  tslint --init

     终端中输入 tslint --project 项目的目录地址         进行测试

2、Wing中TSLint插件安装

在Wing的导航栏中,选择插件栏(如图中1的位置),搜索TSLint(如图中2的位置)进行下载。

3、配置tslint.json

下载附件tslint.json,放到工程的根目录,如下图箭头指向的位置,

tslint.json

{
	"defaultSeverity": "error",
	"extends": [
		"tslint:recommended"
	],
	"rules": {
        "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":false,// 不允许修改方法输入参数
        "prefer-for-of":true,// 如果for循环中没有使用索引,建议是使用for-of

        // 功能特性
        "no-namespace":false,
        "only-arrow-functions":false, //禁止使用传统(非箭头)函数表达式
        "no-shadowed-variable": true, // 不允许子作用域与外层作用域声明同名变量
        "no-string-literal":false,
        "ban-types": false,// 禁止内置原始类型
        "await-promise":true,// 不允许没有Promise的情况下使用await
        "curly":true,// if/for/do/while强制使用大括号
        "forin":false,// 使用for in语句时,强制进行hasOwnProperty检查
        "no-arg":true,// 不允许使用arguments.callee
        "no-bitwise":false, // 不允许使用特殊运算符 &, &=, |, |=, ^, ^=, <<, <<=, >>, >>=, >>>, >>>=, ~
        "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":false,// 函数体不允许空
        "no-eval":true,// 不允许使用eval
        "no-for-in-array":true,// 不允许对Array使用for-in
        "no-invalid-template-strings":true,// 只允许在模板字符串中使用${
        // "no-invalid-this":true,// 不允许在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":false,// parseInt时,必须输入radix精度参数
        // "restrict-plus-operands":true,// 不允许自动类型转换,如果已设置不允许使用关键字var该设置无效
        "triple-equals":false,// 必须使用恒等号,进行等于比较
        "use-isnan":true,// 只允许使用isNaN方法检查数字是否有效

        // 维护性功能
        "indent":[true, "spaces", 4],// 每行开始以4个空格符开始
        "max-classes-per-file":[true,1],// 每个文件中可定义类的个数
        "max-file-line-count":[true,1000],// 定义每个文件代码行数
        "max-line-length":[true,300],// 定义每行代码数
        "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":false,// 类名以大驼峰格式命名
        "comment-format":[true, "check-space"],// 定义注释格式
        "encoding":false,// 定义编码格式默认utf-8
        "import-spacing":true,// import关键字后加空格
        "interface-name":[true,"always-prefix"],// interface必须以I开头
        "jsdoc-format":false,// 注释基于jsdoc风格
        "new-parens":true,// 调用构造函数时需要用括号
        "object-literal-sort-keys":false,
        "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"]
    },
	"rulesDirectory": [],
	"linterOptions": {
		"exclude": [
			"e2e/**/*"
		]
	}
}

4、测试

打开终端,在终端中输入

tslint --project 项目的目录地址

如下图显示,

环境配置完成,图中ERROR显示的是不符合TS代码规范的地方和原因。

 

5、自动解决

系统提供的自动解决命令:  tslint --fix -c ./tslint.json 'src/**/*{.ts,.tsx}'

注意:自动解决不了的问题,会报error,需要手动解决

  • 4
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值