如何在 Angular 2 中使用 codelyzer

Question

我想在我的项目中使用 codelyzer，我使用 systemjs 而没有 webpack。 我在我的项目中添加了一个this tslint 并使用 npm start 运行该项目，但是即使我没有在我的项目中使用正确的样式指南，它也没有从我的项目中得到任何错误 如何使用 codelyzer？

Answer 1

Codelyzer 已在 http://codelyzer.com 在线提供，因此您可以在浏览器中试一试！

你也可以用在：

Angular CLI

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

ng new codelyzer
ng lint

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

角种子

另一个与 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

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

自定义设置

您可以通过自定义设置轻松使用 codelyzer：

安装

npm i codelyzer tslint typescript @angular/core@2.0.2 @angular/compiler@2.0.2 rxjs@5.0.0-beta.12 zone.js@0.6.21

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

{
  "rulesDirectory": [
    "node_modules/codelyzer"
  ],
  "rules":{
    "directive-selector-name": [true, "camelCase"],
    "component-selector-name": [true, "kebab-case"],
    "directive-selector-type": [true, "attribute"],
    "component-selector-type": [true, "element"],
    "directive-selector-prefix": [true, "sg"],
    "component-selector-prefix": [true, "sg"],
    "use-input-property-decorator": true,
    "use-output-property-decorator": true,
    "use-host-property-decorator": true,
    "no-attribute-parameter-decorator": true,
    "no-input-rename": true,
    "no-output-rename": true,
    "no-forward-ref": true,
    "use-life-cycle-interface": true,
    "use-pipe-transform-interface": true,
    "pipe-naming": [true, "camelCase", "sg"],
    "component-class-suffix": true,
    "directive-class-suffix": true,
    "import-destructuring-spacing": true,
    "templates-use-public": true,
    "no-access-missing-member": true,
    "invoke-injectable": true
  }
}

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

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

@Component({
  selector: 'codelyzer',
  template: `
    <h1>Hello {{ nme }}!</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"
component.ts[12, 3]: Implement lifecycle hook interface OnInit for method ngOnInit in class Codelyzer
component.ts[9, 7]: The name of the class Codelyzer should end with the suffix Component
component.ts[6, 18]: The property "nme" that you're trying to access does not exist in the class declaration. Probably you mean: "name".

编辑器配置

请注意，您需要在编辑器上安装 tslint 插件。

Codelyzer 应该可以与 Atom 一起使用，但对于 VSCode，您必须打开 Code > Preferences > User Settings，然后输入以下配置：

{
  "tslint.rulesDirectory": "./node_modules/codelyzer",
  "typescript.tsdk": "node_modules/typescript/lib"
}

现在你应该有以下结果：

_{（来源：gifyu.com）}