Codelyzer 正在参加 2021 年度 OSC 中国开源项目评选,请投票支持!
Codelyzer 在 2021 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
2021 年度 OSC 中国开源项目评选 正在火热进行中,快来投票支持你喜欢的开源项目!
2021 年度 OSC 中国开源项目评选 >>> 中场回顾
Codelyzer 获得 2021 年度 OSC 中国开源项目评选「最佳人气项目」 !

软件简介

Codelyzer 是一组用于 Angular TypeScript 项目静态代码分析的 tslint 规则。你可以在 Web 应用程序、NativeScript、Ionic 等上运行静态代码分析器。

如何使用?

Angular CLI

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

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

之后创建一个具有以下配置的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包

创建以下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,可以使用以下替代方法之一:

  1. 全局安装 codelyzer npm install -g codelyzer

  2. 通过向 package.json 添加类似的脚本,从 package.json 脚本运行 TSLint 

"scripts": {
  ...
  "lint": "tslint .",
  ...
},

然后运行 npm run lint

B. 使用 node_modules 目录中的 codelyzer

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

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

接下来你可以在同一个目录下创建一个组件文件,名称为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 针对代码执行所有规则:

./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)

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (0)

加载中
更多评论
暂无内容
发表了博客
2019/03/04 14:49

TSLint-Angular 配置

代码风格和语义的检查工具,帮助规范 TS 和 Angular 代码书写; 安装: => cnpm install // 安装相关依赖 全局安装 cnpm install -g tslint typescript 安装编辑器插件 https://palantir.github.io/tslint/usage/third-party-tools/ (VSCode, Atom, WebStorm) { "rulesDirectory": ["codelyzer"], "rules": { // 箭头函数简化:Suggests to convert () => { return x; } to () => x. "arrow-return-shorthand": true, // An int...

0
0
发表了博客
2019/10/04 12:25

angular 中配置跨域

1. 新建一个 proxy.conf.json { "/search": { "target": "https://wenku.baidu.com/search", "secure": false, "changeOrigin": true }, "/getnotice": { "target": "https://wenku.baidu.com/message/getnotice", "secure": false, "changeOrigin": true }, "/api": { "target": "https://wenku.baidu.com", "secure": false, "changeOrigin": true } } 2. 在 package.json 中 { "name": "angular-demo", "version": "0.0.0", ...

0
0
2020/11/15 07:20

【行业资讯】前端框架 Angular 11.0.0 正式发布,不再支持 IE 9 、10

前端框架 Angular 11.0.0 正式发布。 Angular 11.0.0 将 TypeScript 升级到 4.0, 对 TypeScript 3.9 不再支持。 放弃了对 IE 9 、10 的支持。 根据其官方博客介绍,主要更新如下: (1) 更新 Operation Byelog 解决了 router 和 forms 的热门问题(issues),并关闭一些其他第三方的热门问题。 保证对新提出的 issues 两周之内做出处理,并积极接受社区的贡献。 (2) 自动内联字体(Automatic Inlining of Fonts) Angular CLI 在编...

0
0
发表了博客
2018/06/29 09:57

使用腾讯tslint-config-alloy轻松搞定ionic项目中TSLint配置

TSLint核心规则及相关库 TSLint已经提供了一些核心规则,但是还不够,于是有人用TSLint提供的自定义接口又自定义了许多规则。如: tslint-eslint-rules——ionic项目默认使用这个 codelyzer——angular项目默认使用这个 还有很多 腾讯团队开源项目tslint-config-alloy 现在有了大量校验规则,如何使用如何配置呢。我们使用了腾讯团队的开源项目tslint-config-alloy,它的配置原则: 能够帮助发现代码错误的规则,全部开启 配置不...

0
0
发表了博客
2018/05/17 17:53

Angular CLI 使用教程指南参考

Angular CLI 现在虽然可以正常使用但仍然处于测试阶段. Angular CLI 依赖 Node 4 和 NPM 3 或更高版本. 安装 要安装Angular CLI你需要先安装node和npm,然后运行以下命令来安装最新的Angular CLI: 注意:Angular CLI 需要Node 4.X 和 NPM 3.X 以上的版本支持。 npm install -g angular-cli 在 Mac 或 Linux 平台上,你可能需要添加sudo前缀提权进行全局安装: sudo npm install -g angular-cli 基本用法 你可以通过 Angula...

0
0
发表了博客
2018/07/17 16:25

Angular CLI 使用教程指南参考

Angular CLI 使用教程指南参考 Angular CLI 现在虽然可以正常使用但仍然处于测试阶段. Angular CLI 依赖 Node 4 和 NPM 3 或更高版本. 安装 要安装Angular CLI你需要先安装node和npm,然后运行以下命令来安装最新的Angular CLI: 注意:Angular CLI 需要Node 4.X 和 NPM 3.X 以上的版本支持。 npm install -g angular-cli 在 Mac 或 Linux 平台上,你可能需要添加sudo前缀提权进行全局安装: sudo npm install -g angular-cl...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
0 评论
1 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部