codelyzer - npm Package Compare versions

Comparing version 1.0.0-beta.1 to 1.0.0-beta.2

angular/ng2Walker.js

@@ -106,7 +106,8 @@ "use strict";
         var name = getDecoratorName(decorator);
+        if (!decorator.expression.arguments ||
+            !decorator.expression.arguments.length ||
+            !decorator.expression.arguments[0].properties) {
+            return;
+        }
         if (name === 'Component') {
-            if (!decorator.expression.arguments.length ||
-                !decorator.expression.arguments[0].properties) {
-                return;
-            }
             this.visitNg2Component(decorator.parent, decorator);
@@ -135,2 +136,5 @@ var inlineTemplate = decorator.expression.arguments[0]
         }
+        else if (name === 'Pipe') {
+            this.visitNg2Pipe(decorator.parent, decorator);
+        }
     };
@@ -167,2 +171,3 @@ Ng2Walker.prototype.visitNg2TemplateAST = function (ast, context, templateStart) {
     Ng2Walker.prototype.visitNg2Directive = function (controller, decorator) { };
+    Ng2Walker.prototype.visitNg2Pipe = function (controller, decorator) { };
     Ng2Walker.prototype.visitNg2Input = function (property, input, args) { };
@@ -169,0 +174,0 @@ Ng2Walker.prototype.visitNg2Output = function (property, output, args) { };

angular/recursiveAngularExpressionVisitor.js

@@ -8,4 +8,2 @@ "use strict";
 var Lint = require('tslint/lib/lint');
-var config_1 = require('./config');
-var escapeString = require('escape-string-regexp');
 var RecursiveAngularExpressionVisitor = (function (_super) {
@@ -47,13 +45,3 @@ __extends(RecursiveAngularExpressionVisitor, _super);
         var _this = this;
-        var oldDisplacement = this.basePosition;
-        var regexp = new RegExp(escapeString(config_1.INTERPOLATION[0]) + '|' + escapeString(config_1.INTERPOLATION[1]), 'g');
-        var parts = ast.interpolateExpression.split(regexp).map(function (s) {
-            return s.replace(config_1.INTERPOLATION[1], '');
-        }).filter(function (e, i) { return (i % 2); });
-        ast.expressions.forEach(function (e, i) {
-            _this.basePosition += ast.strings[i].length + 2;
-            _this.visit(e, context);
-            _this.basePosition += 2 + parts[i].length;
-        });
-        this.basePosition = oldDisplacement;
+        ast.expressions.forEach(function (e, i) { return _this.visit(e, context); });
         return null;
@@ -60,0 +48,0 @@ };

package.json

 {
   "name": "codelyzer",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.2",
   "description": "Linting for Angular 2 applications, following https:/angular.io/styleguide.",
@@ -34,9 +34,8 @@ "contributors": [
     "tslint": "^3.9.0",
-    "@angular/compiler": "^2.0.2",
-    "@angular/core": "^2.0.2"
+    "@angular/compiler": "~2.1.0",
+    "@angular/core": "~2.1.0"
   },
   "dependencies": {
-    "escape-string-regexp": "^1.0.5",
     "sprintf-js": "^1.0.3"
   }
 }

pipeImpureRule.js

@@ -9,2 +9,3 @@ "use strict";
 var sprintf_js_1 = require('sprintf-js');
+var ng2Walker_1 = require('./angular/ng2Walker');
 var SyntaxKind = require('./util/syntaxKind');
@@ -29,10 +30,4 @@ var Rule = (function (_super) {
     }
-    ClassMetadataWalker.prototype.visitClassDeclaration = function (node) {
-        var className = node.name.text;
-        var decorators = node.decorators || [];
-        decorators.filter(function (d) {
-            var baseExpr = d.expression || {};
-            return baseExpr.expression.text === 'Pipe';
-        }).forEach(this.validateProperties.bind(this, className));
-        _super.prototype.visitClassDeclaration.call(this, node);
+    ClassMetadataWalker.prototype.visitNg2Pipe = function (controller, decorator) {
+        this.validateProperties(controller.name.text, decorator);
     };
@@ -61,3 +56,3 @@ ClassMetadataWalker.prototype.validateProperties = function (className, pipe) {
     return ClassMetadataWalker;
-}(Lint.RuleWalker));
+}(ng2Walker_1.Ng2Walker));
 exports.ClassMetadataWalker = ClassMetadataWalker;

pipeNamingRule.js

@@ -10,2 +10,3 @@ "use strict";
 var SyntaxKind = require('./util/syntaxKind');
+var ng2Walker_1 = require('./angular/ng2Walker');
 var selectorValidator_1 = require('./util/selectorValidator');
@@ -48,10 +49,5 @@ var Rule = (function (_super) {
     }
-    ClassMetadataWalker.prototype.visitClassDeclaration = function (node) {
-        var className = node.name.text;
-        var decorators = node.decorators || [];
-        decorators.filter(function (d) {
-            var baseExpr = d.expression || {};
-            return baseExpr.expression.text === 'Pipe';
-        }).forEach(this.validateProperties.bind(this, className));
-        _super.prototype.visitClassDeclaration.call(this, node);
+    ClassMetadataWalker.prototype.visitNg2Pipe = function (controller, decorator) {
+        var className = controller.name.text;
+        this.validateProperties(className, decorator);
     };
@@ -85,3 +81,3 @@ ClassMetadataWalker.prototype.validateProperties = function (className, pipe) {
     return ClassMetadataWalker;
-}(Lint.RuleWalker));
+}(ng2Walker_1.Ng2Walker));
 exports.ClassMetadataWalker = ClassMetadataWalker;

README.md

@@ -8,11 +8,48 @@ [![Build Status](https://travis-ci.org/mgechev/codelyzer.svg?branch=master)](https://travis-ci.org/mgechev/codelyzer)
 
-A set of tslint rules for static code analysis of Angular 2 TypeScript projects.
+A set of tslint rules for static code analysis of Angular TypeScript projects.
 
 You can run the static code analyzer over web apps, NativeScript, Ionic, etc.
 
-## Install
+## How to use?
 
-`npm install --save-dev codelyzer`
+### Angular CLI
 
-Then hop to your `tslint.json` and add rulesDirectory which points to codelyzer, like this:
+[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:
+
+```
+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
+
+You can easily use codelyzer with your custom setup:
+
+#### Installation
+
+```shell
+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
+```
+
+Now create the following `tslint.json` file where your `node_modules` directory is:
+
 ```json
@@ -24,2 +61,24 @@ {
   "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
   }
@@ -29,10 +88,54 @@ }
 
-Now you can apply codelyzer rules to your tslint config.
+Next you can create a component file in the same directory with name `component.ts` and the following content:
 
-In order to run the rules through tslint use:
+```ts
+import { Component } from '@angular/core';
 
-```bash
-tslint -c tslint.json **/*.ts
+@Component({
+  selector: 'codelyzer',
+  template: `
+    <h1>Hello {{ nme }}!</h1>
+  `
+})
+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:
+
+```
+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)
+component.ts[6, 18]: The property "nme" that you're trying to access does not exist in the class declaration. Probably you mean: "name".
+```
+
+### 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:
+
+![VSCode Codelyzer](http://gifyu.com/images/cd.gif)
+
 Enjoy!
@@ -39,0 +142,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

141016

increased by1.75%

Dependency count

4

decreased by-20%

Number of lines in readme file

175

increased by143.06%

Worsened metrics

Lines of code

3745

decreased by-0.43%

Dependency changes

• + Added@angular/compiler@2.1.2(transitive)

• + Added@angular/core@2.1.2(transitive)

• + Addedrxjs@5.0.0-beta.12(transitive)

• + Addedsymbol-observable@1.2.0(transitive)

• + Addedzone.js@0.6.26(transitive)

• - Removedescape-string-regexp@^1.0.5

• - Removed@angular/compiler@2.4.10(transitive)

• - Removed@angular/core@2.4.10(transitive)

• - Removedescape-string-regexp@1.0.5(transitive)

• - Removedrxjs@5.5.12(transitive)

• - Removedsymbol-observable@1.0.1(transitive)

• - Removedzone.js@0.7.8(transitive)