如何在角度2中使用codelyzer

Question

我想在我的項目中使用codelyzer，我使用systemjs而不使用webpack。 我在我的項目中添加了一個這個tslint並使用npm start來運行項目，但是我的項目沒有出現任何錯誤，即使我在項目中沒有使用正確的樣式指南我應該怎么做才能使用codelyzer？

Answer 1

Codelyzer已在http://codelyzer.com上在線提供，因此您可以在瀏覽器中試一試！

您還可以在以下位置使用它：

角度CLI

Angular CLI支持codelyzer。 為了使用CLI和自定義Angular特定規則驗證您的代碼，只需使用：

ng new codelyzer
ng lint

請注意，默認情況下，所有組件都與樣式指南對齊，因此您不會在控制台中看到任何錯誤。

角種子

另一個與代碼分析器開箱即用的項目是角種子 。 為了運行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：

安裝

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

現在創建以下tslint.json文件，其中node_modules目錄是：

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

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

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

接下來，您可以在名稱為component.ts的同一目錄中創建一個組件文件，其中包含以下內容：

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

最后一步，您可以使用tslint執行針對您的代碼的所有規則：

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".

您應該看到以下輸出：

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

現在您應該得到以下結果：