Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mgechev/codelyzer
Static analysis for Angular projects.
https://github.com/mgechev/codelyzer
angular angular-cli codelyzer linting static-code-analysis style-guide tslint
Last synced: 4 days ago
JSON representation
Static analysis for Angular projects.
- Host: GitHub
- URL: https://github.com/mgechev/codelyzer
- Owner: mgechev
- License: mit
- Created: 2016-02-10T17:22:40.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2024-12-02T08:33:54.000Z (11 days ago)
- Last Synced: 2024-12-07T21:42:27.624Z (6 days ago)
- Topics: angular, angular-cli, codelyzer, linting, static-code-analysis, style-guide, tslint
- Language: TypeScript
- Homepage: http://codelyzer.com/
- Size: 17.7 MB
- Stars: 2,454
- Watchers: 46
- Forks: 235
- Open Issues: 83
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-angular-components - codelyzer - Linting for Angular projects. (Uncategorized / Uncategorized)
- awesome-angular-components - codelyzer - Linting for Angular projects. (Uncategorized / Uncategorized)
- awesome-list - codelyzer
- angular-awesome - codelyzer
README
[](https://badge.fury.io/js/codelyzer)
[](https://img.shields.io/npm/dt/codelyzer.svg)
[](https://travis-ci.org/mgechev/codelyzer)
[](https://github.com/prettier/prettier)
[](https://conventionalcommits.org)
[](https://gitter.im/mgechev/codelyzer)
# codelyzer
A set of tslint rules for static code analysis of Angular TypeScript projects.
(If you are using [ESLint](https://github.com/eslint/eslint) check out the new [`angular-eslint`](https://github.com/angular-eslint/angular-eslint) repository.)
You can run the static code analyzer over web apps, NativeScript, Ionic, etc.
**Vote for your favorite feature [here](https://github.com/mgechev/codelyzer/issues?utf8=%E2%9C%93&q=label%3A%22votes+needed%22+sort%3Areactions-%2B1-desc+). For more details about the feature request process see [this document](https://github.com/mgechev/codelyzer/blob/master/CONTRIBUTING.md#-missing-a-feature)**
[](https://youtu.be/bci-Z6nURgE)
## How to use?
### Angular CLI
[Angular CLI](https://cli.angular.io) has support for codelyzer. In order to validate your code with CLI and the custom Angular specific rules just use:
```shell
ng new codelyzer
ng lint
```
Note that by default all components are aligned with the style guide so you won't see any errors in the console.
### Angular Seed
Another project which has out of the box integration with codelyzer is [angular-seed](https://github.com/mgechev/angular-seed). In order to run the linter you should:
```shell
# 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
```
Note that by default all components are aligned with the style guide so you won't see any errors in the console.
### Custom Setup
#### Preset
You can use the [`tslint-angular`](https://github.com/mgechev/tslint-angular) preset. All you need is:
```shell
npm i tslint-angular
```
After that create a `tslint.json` file with the following configuration:
```json
{
"extends": ["tslint-angular"]
}
```
Run the linter with:
```bash
./node_modules/.bin/tslint -c tslint.json
```
TSLint will now complain that there are rules which require type checking. In order to fix this, use the `-p` config option:
```bash
./node_modules/.bin/tslint -p tsconfig.json -c tslint.json
```
#### Custom Installation
You can easily use codelyzer with your custom setup:
```shell
npm i codelyzer tslint @angular/compiler @angular/core
```
A. Using codelyzer package in PATH
Create the following `tslint.json` file like:
```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
}
}
```
To run TSLint with this setup you can use one of the following alternatives:
1. Install codelyzer globally `npm install -g codelyzer`
2. Run TSLint from a package.json script by adding a script like `tslint .` to your package.json, similar to:
```json
"scripts": {
...
"lint": "tslint .",
...
},
```
Then run `npm run lint`
B. Using codelyzer from node_modules directory
Now create the following `tslint.json` file where your `node_modules` directory is:
```json
{
"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
}
}
```
Next you can create a component file in the same directory with name `component.ts` and the following content:
```ts
import { Component } from '@angular/core';
@Component({
selector: 'codelyzer',
template: `
Hello {{ name }}!
`,
})
class Codelyzer {
name: string = 'World';
ngOnInit() {
console.log('Initialized');
}
}
```
As last step you can execute all the rules against your code with tslint:
```shell
./node_modules/.bin/tslint -c tslint.json component.ts
```
You should see the following output:
```text
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)
```
### Editor Configuration
**Note that you need to have tslint plugin install on your editor**.
Codelyzer should work out of the box with Atom but for VSCode you will have to open `Code > Preferences > User Settings`, and enter the following config:
```json
{
"tslint.rulesDirectory": "./node_modules/codelyzer",
"typescript.tsdk": "node_modules/typescript/lib"
}
```
Now you should have the following result:
Enjoy!
## Changelog
You can find it [here](https://github.com/mgechev/codelyzer/blob/master/CHANGELOG.md).
## Recommended configuration
Below you can find a recommended configuration which is based on the [Angular Style Guide](https://angular.io/styleguide).
```js
{
// The rules component-selector and directive-selector have the following arguments:
// [ENABLED, "attribute" | "element", "prefix" | ["listOfPrefixes"], "camelCase" | "kebab-case"]
"component-selector": [true, "element", ["cmp-prefix1", "cmp-prefix2"], "kebab-case"],
"directive-selector": [true, "attribute", ["dir-prefix1", "dir-prefix2"], "camelCase"],
"component-max-inline-declarations": true,
"contextual-lifecycle": true,
"no-conflicting-lifecycle": true,
"no-host-metadata-property": true,
"no-input-rename": true,
"no-inputs-metadata-property": true,
"no-output-native": true,
"no-output-on-prefix": true,
"no-output-rename": true,
"no-outputs-metadata-property": true,
"no-queries-metadata-property": true,
"prefer-inline-decorator": true,
"template-banana-in-box": true,
"template-no-negated-async": true,
"use-lifecycle-interface": true,
"use-pipe-transform-interface": true,
// The rules component-class-suffix and directive-class-suffix have the following arguments:
// [ENABLED, "suffix" | ["listOfSuffixes"]]
// Where "suffix" is/are your custom(s) suffix(es), for instance "Page" for Ionic components.
"component-class-suffix": [true, "Component"],
"directive-class-suffix": [true, "Directive"]
}
```
## Rules Status
| Rule | Status |
| --------------------------------------------- | :------------: |
| `component-class-suffix` | Stable |
| `component-max-inline-declarations` | Stable |
| `component-selector` | Stable |
| `contextual-decorator` | Stable |
| `contextual-lifecycle` | Stable |
| `directive-class-suffix` | Stable |
| `directive-selector` | Stable |
| `import-destructuring-spacing` | Stable |
| `no-attribute-decorator` | Stable |
| `no-forward-ref` | Stable |
| `no-host-metadata-property` | Stable |
| `no-input-prefix` | Stable |
| `no-input-rename` | Stable |
| `no-inputs-metadata-property` | Stable |
| `no-lifecycle-call` | Stable |
| `no-output-native` | Stable |
| `no-output-on-prefix` | Stable |
| `no-output-rename` | Stable |
| `no-outputs-metadata-property` | Stable |
| `no-pipe-impure` | Stable |
| `no-queries-metadata-property` | Stable |
| `prefer-inline-decorator` | Stable |
| `prefer-output-readonly` | Stable |
| `template-banana-in-box` | Stable |
| `template-cyclomatic-complexity` | Stable |
| `template-no-call-expression` | Stable |
| `template-no-negated-async` | Stable |
| `template-use-track-by-function` | Stable |
| `use-component-selector` | Stable |
| `use-component-view-encapsulation` | Stable |
| `use-lifecycle-interface` | Stable |
| `use-pipe-decorator` | Stable |
| `use-pipe-transform-interface` | Stable |
| `prefer-on-push-component-change-detection` | _Experimental_ |
| `no-conflicting-lifecycle` | _Experimental_ |
| `no-unused-css` | _Experimental_ |
| `pipe-prefix` | _Experimental_ |
| `relative-url-prefix` | _Experimental_ |
| `template-accessibility-alt-text` | _Experimental_ |
| `template-accessibility-elements-content` | _Experimental_ |
| `template-accessibility-label-for` | _Experimental_ |
| `template-accessibility-tabindex-no-positive` | _Experimental_ |
| `template-accessibility-table-scope` | _Experimental_ |
| `template-accessibility-valid-aria` | _Experimental_ |
| `template-click-events-have-key-events` | _Experimental_ |
| `template-conditional-complexity` | _Experimental_ |
| `template-i18n` | _Experimental_ |
| `template-mouse-events-have-key-events` | _Experimental_ |
| `template-no-any` | _Experimental_ |
| `template-no-autofocus` | _Experimental_ |
| `template-no-distracting-elements` | _Experimental_ |
| `angular-whitespace` | _Deprecated_ |
## Disable a rule that validates Template or Styles
Lint rules can be disabled by adding a marker in TypeScript files. More information [here](https://palantir.github.io/tslint/usage/rule-flags/).
To disable rules that validate templates or styles you'd need to add a marker in the TypeScript file referencing them.
```ts
import { Component } from '@angular/core';
/* tslint:disable:template-use-track-by-function */
@Component({
selector: 'codelyzer',
templateUrl: './codelyzer.component.html',
})
class Codelyzer {}
```
## Advanced configuration
Codelyzer supports any template and style language by custom hooks. If you're using Sass for instance, you can allow codelyzer to analyze your styles by creating a file `.codelyzer.js` in the root of your project (where the `node_modules` directory is). In the configuration file can implement custom pre-processing and template resolution logic:
```js
// Demo of transforming Sass styles
var sass = require('node-sass');
module.exports = {
// Definition of custom interpolation strings
interpolation: ['{{', '}}'],
// You can transform the urls of your external styles and templates
resolveUrl(url, decorator) {
return url;
},
// Transformation of the templates. This hooks is quite useful
// if you're using any other templating language, for instance
// jade, markdown, haml, etc.
//
// NOTE that this method WILL NOT throw an error in case of invalid template.
//
transformTemplate(code, url, decorator) {
return { code: code, url: url };
},
// Transformation of styles. This hook is useful is you're using
// any other style language, for instance Sass, Less, etc.
//
// NOTE that this method WILL NOT throw an error in case of invalid style.
//
transformStyle(code, url, decorator) {
var result = { code: code, url: url };
if (url && /\.scss$/.test(url)) {
var transformed = sass.renderSync({ data: code, sourceMap: true, outFile: '/dev/null' });
result.source = code;
result.code = transformed.css.toString();
result.map = transformed.map.toString();
}
return result;
},
// Custom predefined directives in case you get error for
// missing property and you are using a template reference
predefinedDirectives: [{ selector: 'form', exportAs: 'ngForm' }],
// None = 0b000, Error = 0b001, Info = 0b011, Debug = 0b111
logLevel: 0b111,
};
```
## Contributors
| [
](https://github.com/mgechev) | [
](https://github.com/wKoza) | [
](https://github.com/rafaelss95) | [
](https://github.com/preslavsh) | [
](https://github.com/mohammedzamakhan) | [
](https://github.com/rokerkony) |
| :---------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------: |
| [mgechev](https://github.com/mgechev) | [wKoza](https://github.com/wKoza) | [rafaelss95](https://github.com/rafaelss95) | [preslavsh](https://github.com/preslavsh) | [mohammedzamakhan](https://github.com/mohammedzamakhan) | [rokerkony](https://github.com/rokerkony) |
| [
](https://github.com/GregOnNet) | [
](https://github.com/alan-agius4) | [
](https://github.com/kevinphelps) | [
](https://github.com/eppsilon) | [
](https://github.com/csvn) | [
](https://github.com/ghsyeung) |
| :-------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------: |
| [GregOnNet](https://github.com/GregOnNet) | [alan-agius4](https://github.com/alan-agius4) | [kevinphelps](https://github.com/kevinphelps) | [eppsilon](https://github.com/eppsilon) | [csvn](https://github.com/csvn) | [ghsyeung](https://github.com/ghsyeung) |
| [
](https://github.com/Kobzol) | [
](https://github.com/mattlewis92) | [
](https://github.com/lazarljubenovic) | [
](https://github.com/sagittarius-rev) | [
](https://github.com/connor4312) | [
](https://github.com/Foxandxss) |
| :--------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------: |
| [Kobzol](https://github.com/Kobzol) | [mattlewis92](https://github.com/mattlewis92) | [lazarljubenovic](https://github.com/lazarljubenovic) | [sagittarius-rev](https://github.com/sagittarius-rev) | [connor4312](https://github.com/connor4312) | [Foxandxss](https://github.com/Foxandxss) |
| [
](https://github.com/gbilodeau) | [
](https://github.com/NagRock) | [
](https://github.com/Hotell) | [
](https://github.com/Martin-Wegner) | [
](https://github.com/comfroels) | [
](https://github.com/plantain-00) |
| :-------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------: |
| [gbilodeau](https://github.com/gbilodeau) | [NagRock](https://github.com/NagRock) | [Hotell](https://github.com/Hotell) | [Martin-Wegner](https://github.com/Martin-Wegner) | [comfroels](https://github.com/comfroels) | [plantain-00](https://github.com/plantain-00) |
| [
](https://github.com/nexus-uw) | [
](https://github.com/alexkpek) | [
](https://github.com/loktionov129) | [
](https://github.com/alisd23) | [
](https://github.com/aboyton) | [
](https://github.com/bmvantunes) |
| :------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------: |
| [nexus-uw](https://github.com/nexus-uw) | [alexkpek](https://github.com/alexkpek) | [loktionov129](https://github.com/loktionov129) | [alisd23](https://github.com/alisd23) | [aboyton](https://github.com/aboyton) | [bmvantunes](https://github.com/bmvantunes) |
| [
](https://github.com/Moeriki) | [
](https://github.com/sneas) | [
](https://github.com/EmmanuelDemey) | [
](https://github.com/eromano) | [
](https://github.com/Manduro) | [
](https://github.com/karol-depka) |
| :--------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------: |
| [Moeriki](https://github.com/Moeriki) | [sneas](https://github.com/sneas) | [EmmanuelDemey](https://github.com/EmmanuelDemey) | [eromano](https://github.com/eromano) | [Manduro](https://github.com/Manduro) | [karol-depka](https://github.com/karol-depka) |
| [
](https://github.com/leosvelperez) | [
](https://github.com/muhammadghazali) | [
](https://github.com/PapsOu) | [
](https://github.com/rwlogel) | [
](https://github.com/robzenn92) | [
](https://github.com/rtfpessoa) |
| :---------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------: |
| [leosvelperez](https://github.com/leosvelperez) | [muhammadghazali](https://github.com/muhammadghazali) | [PapsOu](https://github.com/PapsOu) | [rwlogel](https://github.com/rwlogel) | [robzenn92](https://github.com/robzenn92) | [rtfpessoa](https://github.com/rtfpessoa) |
| [
](https://github.com/santoshyadav198613) | [
](https://github.com/scttcper) | [
](https://github.com/stschake) | [
](https://github.com/tmair) | [
](https://github.com/YogliB) | [
](https://github.com/cexbrayat) |
| :---------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------: |
| [santoshyadav198613](https://github.com/santoshyadav198613) | [scttcper](https://github.com/scttcper) | [stschake](https://github.com/stschake) | [tmair](https://github.com/tmair) | [YogliB](https://github.com/YogliB) | [cexbrayat](https://github.com/cexbrayat) |
| [
](https://github.com/clydin) | [
](https://github.com/reduckted) | [
](https://github.com/someblue) |
| :---------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------: |
| [clydin](https://github.com/clydin) | [reduckted](https://github.com/reduckted) | [someblue](https://github.com/someblue) |
## License
MIT