# 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)**
## 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:
```
…
```
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:
```
…
```
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).
```
…
```
## 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:
```
…
```
## 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) |