|
codelyzer – readme
Zurück[](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