我想在我的项目中使用 codelyzer,我使用 systemjs 而没有 webpack。 我添加了 this tslint到我的项目并使用 npm start 运行该项目,但它没有从我的项目中得到任何错误,即使我没有在我的项目中使用正确的样式指南 如何使用 codelyzer?
最佳答案
Codelyzer 已在 http://codelyzer.com 在线提供。所以你可以在浏览器中试一试!
你也可以用在:
Angular CLI
Angular CLI支持 codelyzer。为了使用 CLI 和自定义 Angular 特定规则验证您的代码,只需使用:
ng new codelyzer
ng lint
请注意,默认情况下,所有组件都与样式指南对齐,因此您不会在控制台中看到任何错误。
Angular 种子
另一个与 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)
关于node.js - 如何在 Angular 2 中使用 codelyzer,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39943403/