9. 专题 - tslint

• 概念

  • 类似于JavaScript的eslint，tslint用于TypeScript。
  • 所有的tslint的配置文件都叫做tslint.json。
  • 想要检查某一级目录下的所有文件（包括子目录），就在这一级目录下放一个想要的tslint.json，工具/插件会自动用该文件处理当前目录下的所有文件（包括子目录）。
  • VS CODE一般只检查打开了的文件，并把warning放到PROBLEMS标签页下。

• 使用

  • 顶级字段

    • extends字段
      • The name of a built-in configuration preset, or a path or array of paths to other configuration files which are extended by this configuration. These values are handled using node module resolution semantics.
      • 如果某一个目录下的tslint.json想要在某个配置文件的基础上增加一些配置（如根目录的tslint.json），可以通过"extends": "../tslint.json"说明扩展自上级配置文件或其他配置文件。
    • rulesDirectory字段
      • A path to a directory or an array of paths to directories of custom rules. These values are handled using node module resolution semantics, if an index.js is placed in your rules directory.

      "rulesDirectory": [
        "node_modules/codelyzer"
      ],
    

    • rules字段
      • A map of rules that will be used to lint TypeScript files. These rules apply to .ts and .tsx files.
      • 最重要的部分，列出所有的各种规则。
    • exclude？
      • 排除某些文件夹

  • 通常放在项目根目录下的基础eslint配置

  {
    "rulesDirectory": [
      "node_modules/codelyzer"
    ],
    "rules": {
      "arrow-return-shorthand": true,
      "callable-types": true,
      "class-name": true,
      "no-implicit-dependencies": [
        true,
        "src/app"
      ],
      "comment-format": [
        true,
        "check-space"
      ],
      "curly": true,
      "deprecation": {
        "severity": "warn"
      },
      "eofline": true,
      "forin": true,
      "import-blacklist": [
        true,
        "rxjs/Rx"
      ],
      "import-spacing": true,
      "indent": [
        true,
        "spaces"
      ],
      "interface-over-type-literal": true,
      "label-position": true,
      "max-line-length": [
        true,
        150
      ],
      "member-access": false,
      "member-ordering": [
        true,
        {
          "order": [
            "static-field",
            "instance-field",
            "static-method",
            "instance-method"
          ]
        }
      ],
      "no-arg": true,
      "no-bitwise": true,
      "no-console": [
        true,
        "debug",
        "info",
        "time",
        "timeEnd",
        "trace"
      ],
      "no-construct": true,
      "no-debugger": true,
      "no-duplicate-super": true,
      "no-empty": false,
      "no-empty-interface": true,
      "no-eval": true,
      "no-inferrable-types": [
        false,
        "ignore-params"
      ],
      "no-misused-new": true,
      "no-non-null-assertion": true,
      "no-redundant-jsdoc": true,
      "no-shadowed-variable": true,
      "no-string-literal": false,
      "no-string-throw": true,
      "no-switch-case-fall-through": true,
      "no-trailing-whitespace": true,
      "no-unnecessary-initializer": true,
      "no-unused-expression": true,
      "no-use-before-declare": true,
      "no-var-keyword": true,
      "object-literal-sort-keys": false,
      "one-line": [
        true,
        "check-open-brace",
        "check-catch",
        "check-else",
        "check-whitespace"
      ],
      "prefer-const": true,
      "quotemark": [
        true,
        "single"
      ],
      "radix": true,
      "semicolon": [
        true,
        "always"
      ],
      "triple-equals": [
        true,
        "allow-null-check"
      ],
      "typedef-whitespace": [
        true,
        {
          "call-signature": "nospace",
          "index-signature": "nospace",
          "parameter": "nospace",
          "property-declaration": "nospace",
          "variable-declaration": "nospace"
        }
      ],
      "unified-signatures": true,
      "variable-name": false,
      "whitespace": [
        true,
        "check-branch",
        "check-decl",
        "check-operator",
        "check-separator",
        "check-type"
      ],
      "no-output-on-prefix": true,
      "no-inputs-metadata-property": true,
      "no-outputs-metadata-property": true,
      "no-host-metadata-property": true,
      "no-input-rename": true,
      "no-output-rename": true,
      "use-lifecycle-interface": true,
      "use-pipe-transform-interface": true,
      "component-class-suffix": [
        true,
        "Component",
        "Page"
      ],
      "directive-class-suffix": true
    }
  }
  

  • 可以src目录下的eslint配置（tslint.json）
    • 通过"extends"说明扩展自上级配置文件
    • "directive-selector"、"component-selector"指明了允许的指令或组件名的前缀。如果代码中不符合就会有warning。

  {
      "extends": "../tslint.json",
      "rules": {
          "directive-selector": [
              true,
              "attribute",
              "xxx",
              "camelCase"
          ],
          "component-selector": [
              true,
              "element",
              [
                  "xxx",
                  "yyy"
              ],
              "kebab-case"
          ]
      }
  }
  

  • 常见检查

    • 各种缩进、空格、空行
    • 使用===而不是==

        "triple-equals": [
          true,
          "allow-null-check"
        ],
    

    • 每行的最大长度

        "max-line-length": [
          true,
          150
        ],
    

    • 指令、组件名前缀限制在某几个固定的值之内："directive-selector"、"component-selector"

        "directive-selector": [
            true,
            "attribute",
            "xxx",
            "camelCase"
        ],
        "component-selector": [
            true,
            "element",
            [
                "xxx",
                "yyy"
            ],
            "kebab-case"
        ]
    

    • import项目内的文件（如类文件、mock数据文件）要使用相对路径，除非直接引自@angular

      • 或者将指定目录加入ignore中

      "no-implicit-dependencies": [
        true,
        [
          "app",
          "assets"
        ]
      ],