webstrom TsLint配置

tslint.json 文件解释

安装tslint

package.json文件中添加如下配置后执行npm install
“tslint”: “~5.15.0”,
“tslint-eslint-rules”: “^5.4.0”,

WebStrom tslint配置

1.开启tslint检查

settings >> Language >> TypeScript >> TSLint, 勾选 Automatic TSLint configuration

（1）Automatic TSLint configuration(自动配置方式)

2.使用Fix TSLint Problems修复代码错误

3.使用命令批量修复(eg)
tslint --fix -c ./tslint.json ‘src/app/**/*{.ts}’

tslint.json

{
  "extends": [ // 内设配置项名称
    "tslint:recommended",
    "tslint-eslint-rules" // 使用缺少的ESLint规则来改善TSLint-源码
  ],
  "rules": { // 检验规则
    "array-bracket-spacing": [
      true,
      "never"// 不允许数组括号内的空格 [ ] 括号左右两边内部不能有空格
    ],
    /**
    * ts中有两种定义数组的方式
    * 1、let list1: number[] = [1 ,2, 3]
    * 2、let list2: Array<number> = [1 ,2, 3]
    * 如果需要使用联合类型比如let list1: number|string[] = [1 ,2, '3'],就需要在配置"array-type": false,关闭
    */
    "array-type": false,
    "arrow-parens": false, // 箭头函数只有一个参数时，可以省略括号
    "arrow-return-shorthand": [ // 将()=>{return x}转换为()=>x;
      true,
      /**
      * const calc = (x: number, y: number) => { return { add: x + y, sub: x - y, mul: x * y } };
      * 这个箭头函数体可以通过省略大括号和关键字“return”并将对象文本括在括号中来简化,⬇
      * const calc = (x: number, y: number) => ({ add: x + y, sub: x - y, mul: x * y });
      */
      "multiline"
    ],
    "ban-ts-ignore": true, // 不要使用“//@ts ignore”注释，因为它们会抑制编译错误
    /** ESLint
     * 大括号风格 1tbs
     * if (foo) {
     * fun1();
     * } else {
     * fun2();
     * }
     */
    "brace-style": [
      true,
      "1tbs",
      {
        "allowSingleLine": true // 允许一个块打开和关闭括号在同一行上
      }
    ],
    "class-name": true, // TSLint 类名、接口名 采用 帕斯卡命名法(PascalCase) 大驼峰式命名法
    /** TSLint
     * 注释格式校验
     */
    "comment-format": [
      true,
      "check-space", // 要求所有单行注释必须以空格开头 // comment
      {
        "ignore-words": [ // 特殊注释
          "TODO", // 在标识处有功能代码待编写
          "HACK" // 标识处代码我们需要根据自己的需求去调整程序代码
        ]
      }
    ],
    "component-class-suffix": true, // codelyzer 组件类名必须是写驼峰命名法来命名，且必须使用 Component后缀
    "component-selector": [ // codelyzer 组件的selector 选择器属性值的风格，默认必须是 app\pencil开头
      true,
      "element",
      [
        "app",
        "pencil"
      ],
      "kebab-case" // 短横线隔开式命名 app-header
    ],
    "contextual-lifecycle": true, // 确保类在其主体中使用允许的生命周期方法。
    "deprecation": {
      "severity": "warning"
    },
    "directive-class-suffix": true, // codelyzer 指令类名必须是写驼峰命名法来命名，且必须使用Directive 后缀
    "directive-selector": [
      false,
      "attribute",
      "app",
      "camelCase" // 驼峰命名
    ],
    "encoding": true, // ts 强制UTF-8文件编码
    "eofline": true, // ts 确保文件以换行结束。
    "import-blacklist": [
      true,
      "rxjs/Rx"
    ],
    "import-spacing": true, // ts 导入语句关键字之间的间距正确,有一个空格（import {}）
    "interface-name": false, // ts interface 接口名称不需要一定用大写“I"开头
    "max-classes-per-file": false, // ts 文件可以包含任意多个类;  [true, 1]:只能包含一个类
    "max-line-length": [ // ts 文件一行不超过400字符
      true,
      400
    ],
    "member-access": false, // ts 类成员可见性声明（private\public\protected) 不开启
    "member-ordering": [ // ts 类成员排序: 静态成员->实例成员->静态方法->实例方法
      true,
      {
        "order": [
          "static-field",
          "instance-field",
          "static-method",
          "instance-method"
        ]
      }
    ],
    "no-arg": true, // ts callee是arguments对象的属性。在函数体内，它指向当前正在执行的函数。禁止使用arguments.callee()。https://blog.csdn.net/chiyitu7904/article/details/100731219
    "no-bitwise": true, // ts 禁止使用按位运算符 会降低可维护性
    "no-conditional-assignment": true, // ts 禁止在条件中进行赋值
    "no-conflicting-lifecycle": true, // codelyzer 禁止指令使用互相冲突的声明周期接口（DoCheck和OnChanges）
    "no-consecutive-blank-lines": true, // ts 最多一个空行 不能有连续的空行
    "no-console": [ // ts 不允许使用控制台打印方法 不适合出现在生产环境
      true,
      "log",
      "debug",
      "info",
      "time",
      "timeEnd",
      "trace"
    ],
    "no-debugger": true, // ts 不允许调试器代码（在代码中打断点）；调试器语句不适合于生产代码。
    "no-duplicate-super": true, // ts constructor 中只能有一个super()
    "no-duplicate-switch-case": true, // ts switch语句中不能出现重复的case
    "no-duplicate-variable": [  // ts 不允许在同一块作用域中使用重复的变量声明。
      true,
      "check-parameters" // 检查与参数同名的变量
    ],
    "no-empty": false, // ts 允许空的块
    "no-empty-interface": true, // ts 不允许空的interface 接口
    "no-host-metadata-property": false, // codelyzer 允许使用宿主元素属性 @HostBinding、@HostListener
    "no-inferrable-types": [ // ts 不允许对初始化为数字、字符串或布尔值的变量或参数进行显式类型声明(编译器可以很容易地推断出显式类型)。 let cc: number = 0; ×
      true,
      "ignore-params" // 允许为函数params指定可推断类型注释
    ],
    "no-input-rename": true, // codelyzer 不允许通过向装饰器提供字符串来重命名指令输入。 @Input('labelAttribute') label: string;
    "no-inputs-metadata-property": true, // codelyzer 不允许使用inputs元数据属性,使用@Input
    "no-irregular-whitespace": true, // ts 不允许在文件中使用不规则的空格，包括字符串和注释。捕获无效的不是正常的tab和空格的空白
    "no-multi-spaces": [ // es 禁止出现多个空格;目的在于禁止在逻辑表达式、条件表达式、声明、数组元素、对象属性、序列和函数参数周围使用多个空格。
      true,
      {
        "exceptions": { // 忽略特定的节点
          "PropertyAssignment": false,
          "OtherException": "true|false"
        }
      }
    ],
    "indent": [true, "spaces", 2], // ts 强制2个空格缩进
    "no-non-null-assertion": true, // ts 不允许使用非空断言操作符 let b = tt!（非空断言操作符会从变量中移除 undefined 和 null。）
    "no-output-native": true, // codelyzer 不允许将指令输出命名为标准DOM事件。@Output() click
    "no-output-on-prefix": true,  // codelyzer 输出属性前缀on 可加可不加
    "no-output-rename": true,  // codelyzer 不允许通过向装饰器提供字符串来重命名指令输出。 @Output('cancel') onCancel;
    "no-outputs-metadata-property": true, // codelyzer 不允许使用outputs元数据属性,使用@Output
    "no-redundant-jsdoc": true, // ts 禁止JSDoc复制TypeScript功能
    "no-string-literal": true, // ts 禁止不必要的字符串文字属性访问。允许obj[“property”]（不能是常规属性访问）。不允许obj[“property”]（应为obj.property）
    "no-switch-case-fall-through": false, // ts switch 可以从一个case掉入另一个case；不需要强制每个case语句以throw，return，break或comment结尾，
    "no-trailing-whitespace": [ // ts 不允许在行尾有空格
      true,
      "ignore-jsdoc", // 允许在JSDoc注释中使用尾随空格。
      "ignore-template-strings" // 允许在模板字符串中使用尾随空格
    ],
    "no-var-keyword": true, // ts 不允许使用var关键字来声明变量（使用let \ const）
    "no-var-requires": false, // ts 允许使用var module = require("module") 来导入模块
    "object-curly-spacing": [ // es 强制在花括号中使用一致的空格
      false, // 不强制
      "always" // 要求花括号内有空格
    ],
    "object-literal-key-quotes": [ // 对象的key不需要加引号
      true,
      "as-needed" // 如果key文本中有空格或其他特殊字符的话可以加引号
    ],
    "object-literal-sort-keys": false, // ts 不检查对象key的顺序
    "ordered-imports": [ // ts 要求导入语句按字母顺序排列并分组
      true,
      {
        "import-sources-order": "lowercase-last",  // 设置“导入源顺序”选项来控制源导入的顺序
        "named-imports-order": "lowercase-last", // 设置“命名导入顺序”选项来控制命名导入的顺序 小写的放在最后
        "grouped-imports": true // 分组
      }
    ],
    "prefer-const": [ // ts 如果可能的话，要求变量声明使用const而不是let和var。
      true,
      {
        "destructuring": "all" // 如果解构中的所有变量应该是const，则此规则会警告变量。否则，忽略它们。
      }
    ],
    "prefer-for-of": false, // ts 不限制使用for of 还是 for in
    "quotemark": [ // ts 对字符串文字强制使用引号字符。
      true,
      "single" // 单引号
    ],
    "radix": false, // ts 不要求在调用parseInt时指定基数参数。
    "semicolon": [ // ts 在每条语句的末尾强制使用一致的分号。
      true,
      "always",
      "ignore-bound-class-methods" // 不检查类方法
    ],
    "space-before-function-paren": [ // ts 函数括号前需要一个空格
      true,
      {
        "anonymous": "always", // 在匿名函数中打开括号之前进行检查
        "named": "never", // 在命名函数中打开括号之前进行检查
        "asyncArrow": "always" // 在异步函数中打开参数之前进行检查
      }
    ],
    "template-banana-in-box": true, // codelyzer 确保双向数据绑定语法正确。
    "template-no-negated-async": true, // codelyzer 确保在对异步管道输出求反时使用严格相等。
    "ter-computed-property-spacing": [ // es 不允许计算属性括号内的空格; 错误示例：obj[foo ]、obj[ 'foo']、var x = {[ b ]: a}
      true,
      "never" // 不允许计算属性括号内的空格
    ],
    "ter-func-call-spacing": [ // es 函数名称和调用它的左括号之间的空格
      true,
      "never", // 不允许在函数名称和左括号之间留出空格。
      {
        "allowNewlines": true // 允许换行符
      }
    ],
    "ter-no-mixed-spaces-and-tabs": { // es 不允许使用混合空格和制表符进行缩进
      "type": "tabs"
    },
    "ter-no-proto": true, // 禁止使用__proto__ （使用Object.getPrototypeOf(obj)）
    "ter-no-script-url": true, // es 禁用script URL
    "ter-no-self-compare": true, // 禁止变量与自身比较
    "trailing-comma": [ // ts 禁止数组、对象的尾随逗号
      true,
      {
        "singleline": {
          "objects": "never",
          "arrays": "never",
          "functions": "never",
          "typeLiterals": "never"
        },
        "multiline": {
          "objects": "ignore", // 多行时忽略
          "arrays": "ignore",
          "functions": "never",
          "typeLiterals": "ignore"
        },
        "esSpecCompliant": true
      }
    ],
    "typedef-whitespace": [ // ts 类型说明符中冒号之前是否需要空格 (冒号前面不要空格，冒号后面一个空格)
      true,
      {
        "call-signature": "nospace",
        "index-signature": "nospace",
        "parameter": "nospace",
        "property-declaration": "nospace",
        "variable-declaration": "nospace"
      },
      {
        "call-signature": "onespace",
        "index-signature": "onespace",
        "parameter": "onespace",
        "property-declaration": "onespace",
        "variable-declaration": "onespace"
      }
    ],
    "unnecessary-constructor": [ // ts 禁止空的构造函数 constructor() {}  JS 会隐式的添加一个空的构造函数，不需要手动添加
      true,
      {
        "check-super-calls": true
      }
    ],
    "use-lifecycle-interface": true, // codelyzer 类实现 与 声明的生命周期相对应的生命周期接口
    "use-pipe-transform-interface": true, // codelyzer 确保用@Pipe修饰的类实现PipeTransform接口。
    "variable-name": false, // ts 不检查变量名
    "whitespace": [ // ts
      true,
      "check-branch", // 分支语句（if/else/for/while）后跟空格
      "check-operator", // 运算符周围跟空格 + - * /
      "check-typecast",
      "check-module", // 检查导入和导出语句中的空格。
      "check-decl", // 变量声明 等于号周围有空格 let a = 1
      "check-preblock" // 一个块的左大括号之前要有空格
    ],
    "no-constant-condition": true,  // 禁止在条件判断中使用常量表达式
     "no-sparse-arrays": true, //  不使用稀疏数组（如 let arr = [1, , 3]）
     "valid-typeof": true //  强制将typeof表达式与有效的字符串文字进行比较
  },
  "rulesDirectory": [
    "codelyzer"
  ]
}