CodelyzerAngular 項目的靜態(tài)分析規(guī)則
Codelyzer 是一組用于 Angular TypeScript 項目靜態(tài)代碼分析的 tslint 規(guī)則。你可以在 Web 應用程序、NativeScript、Ionic 等上運行靜態(tài)代碼分析器。
如何使用？
Angular CLI
Angular CLI 支持 codelyzer。為了使用 CLI 和自定義 Angular 特定規(guī)則驗證你的代碼，只需使用：
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
之后創(chuàng)建一個具有以下配置的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包
創(chuàng)建以下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目錄所在的位置創(chuàng)建以下文件：
{
"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
}
}
接下來你可以在同一個目錄下創(chuàng)建一個組件文件，名稱為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 針對代碼執(zhí)行所有規(guī)則：
./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)
評論
圖片
表情