CodelyzerAngular 项目的静态分析规则-技术圈

Codelyzer 是一组用于 Angular TypeScript 项目静态代码分析的 tslint 规则。你可以在 Web 应用程序、NativeScript、Ionic 等上运行静态代码分析器。

如何使用？

Angular CLI

Angular CLI 支持 codelyzer。为了使用 CLI 和自定义 Angular 特定规则验证你的代码，只需使用：

ng new codelyzer
ng lint

请注意，默认情况下所有组件都与样式指南对齐，因此不会在控制台中看到任何错误。

Angular Seed

另一个与 codelyzer 开箱即用集成的项目是 angular-seed。为了运行 linter，你应该：

# Skip if you've already cloned Angular Seed
git clone https://github.com/mgechev/angular-seed

# Skip if you've already installed all the dependencies of Angular Seed
cd angular-seed && npm i

# Run all the tslint and codelyzer rules
npm run lint

请注意，默认情况下所有组件都与样式指南对齐，因此不会在控制台中看到任何错误。

自定义设置

预设

可以使用tslint-angular预设：

npm i tslint-angular

之后创建一个具有以下配置的tslint.json文件：

{
  "extends": ["tslint-angular"]
}

使用以下命令运行 linter：

./node_modules/.bin/tslint -c tslint.json

自定义安装

您可以轻松地在自定义设置中使用 codelyzer：

npm i codelyzer tslint @angular/compiler @angular/core

A.在PATH中使用codelyzer包

创建以下tslint.json文件，如：

{
  "extends": ["codelyzer"],
  "rules": {
    "component-class-suffix": true,
    "component-max-inline-declarations": true,
    "component-selector": [true, "element", "sg", "kebab-case"],
    "contextual-lifecycle": true,
    "directive-class-suffix": true,
    "directive-selector": [true, "attribute", "sg", "camelCase"],
    "no-attribute-decorator": true,
    "no-conflicting-lifecycle": true,
    "no-forward-ref": true,
    "no-host-metadata-property": true,
    "no-input-rename": true,
    "no-inputs-metadata-property": true,
    "no-lifecycle-call": true,
    "no-output-native": true,
    "no-output-on-prefix": true,
    "no-output-rename": true,
    "no-outputs-metadata-property": true,
    "no-pipe-impure": true,
    "no-queries-metadata-property": true,
    "no-unused-css": true,
    "prefer-inline-decorator": true,
    "prefer-output-readonly": true,
    "template-banana-in-box": true,
    "template-conditional-complexity": [true, 4],
    "template-cyclomatic-complexity": [true, 5],
    "template-i18n": [true, "check-id", "check-text"],
    "template-no-negated-async": true,
    "template-use-track-by-function": true,
    "use-component-selector": true,
    "use-component-view-encapsulation": true,
    "use-lifecycle-interface": true,
    "use-pipe-transform-interface": true
  }
}

要使用此设置运行 TSLint，可以使用以下替代方法之一：

全局安装 codelyzer npm install -g codelyzer
通过向 package.json 添加类似的脚本，从 package.json 脚本运行 TSLint

"scripts": {
  ...
  "lint": "tslint .",
  ...
},

然后运行 npm run lint

B. 使用 node_modules 目录中的 codelyzer

现在tslint.json在你的node_modules目录所在的位置创建以下文件：

{
  "rulesDirectory": ["node_modules/codelyzer"],
  "rules": {
    "component-class-suffix": true,
    "component-max-inline-declarations": true,
    "component-selector": [true, "element", "sg", "kebab-case"],
    "contextual-lifecycle": true,
    "directive-class-suffix": true,
    "directive-selector": [true, "attribute", "sg", "camelCase"],
    "no-attribute-decorator": true,
    "no-conflicting-lifecycle": true,
    "no-forward-ref": true,
    "no-host-metadata-property": true,
    "no-input-rename": true,
    "no-inputs-metadata-property": true,
    "no-lifecycle-call": true,
    "no-output-native": true,
    "no-output-on-prefix": true,
    "no-output-rename": true,
    "no-outputs-metadata-property": true,
    "no-pipe-impure": true,
    "no-queries-metadata-property": true,
    "no-unused-css": true,
    "prefer-inline-decorator": true,
    "prefer-output-readonly": true,
    "template-banana-in-box": true,
    "template-conditional-complexity": [true, 4],
    "template-cyclomatic-complexity": [true, 5],
    "template-i18n": [true, "check-id", "check-text"],
    "template-no-negated-async": true,
    "template-use-track-by-function": true,
    "use-component-selector": true,
    "use-component-view-encapsulation": true,
    "use-lifecycle-interface": true,
    "use-pipe-transform-interface": true
  }
}

接下来你可以在同一个目录下创建一个组件文件，名称为component.ts，内容如下：

import { Component } from '@angular/core';

@Component({
  selector: 'codelyzer',
  template: ` <h1>Hello {{ name }}!</h1> `,
})
class Codelyzer {
  name: string = 'World';

  ngOnInit() {
    console.log('Initialized');
  }
}

作为最后一步，可以使用 tslint 针对代码执行所有规则：

./node_modules/.bin/tslint -c tslint.json component.ts

应该看到以下输出：

component.ts[4, 13]: The selector of the component "Codelyzer" should have prefix "sg" (https://goo.gl/cix8BY) component.ts[12, 3]: Implement lifecycle hook interface OnInit for method ngOnInit in class Codelyzer (https://goo.gl/w1Nwk3) component.ts[9, 7]: The name of the class Codelyzer should end with the suffix Component (https://goo.gl/5X1TE7)