如何在角度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

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

角种子

与代码解析器开箱即用的另一个项目是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

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

{
  "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"
}

现在你应该得到以下结果：