style(prettier): adding automatic formatting and linting

Author: edoparearyee

.prettierignore

@@ -0,0 +1,2 @@
+package.json
+package-lock.json

.prettierrc

@@ -0,0 +1,15 @@
+{
+  "singleQuote": true,
+  "useTabs": false,
+  "tabWidth": 2,
+  "semi": true,
+  "bracketSpacing": true,
+  "overrides": [
+    {
+      "files": "src/**/*.scss",
+      "options": {
+        "singleQuote": false
+      }
+    }
+  ]
+}

.stylelintrc

@@ -0,0 +1,29 @@
+{
+  "extends": ["stylelint-config-standard", "stylelint-config-recommended-scss"],
+  "rules": {
+    "order/order": [
+      "custom-properties",
+      "declarations"
+    ],
+    "order/properties-alphabetical-order": true,
+    "no-empty-source": null,
+    "selector-type-no-unknown": [
+      true,
+      {
+        "ignore": ["custom-elements", "default-namespace"]
+      }
+    ],
+    "selector-pseudo-element-no-unknown": [
+      true,
+      {
+        "ignorePseudoElements": ["ng-deep"]
+      }
+    ],
+    "declaration-colon-newline-after": null,
+    "at-rule-empty-line-before": null,
+    "block-closing-brace-newline-after": null
+  },
+  "plugins": [
+    "stylelint-order"
+  ]
+}

README.md

@@ -3,6 +3,7 @@
 [![Build Status][travis-badge]][travis]
 [![Coverage Status][coveralls-badge]][coveralls]
 [![Commitizen friendly][commitizen-badge]][commitizen]
+[![code style: prettier][prettier-badge]][prettier-badge-url]
 
 This project was generated with [Angular CLI][angular-cli] version 1.6.6.
 
@@ -21,6 +22,7 @@ This is a simple library for [Angular][angular], implemented in the [Angular Pac
 `yarn add @thisissoon/angular-masonry masonry-layout`
 
 `app.module.ts`
+
 ```ts
 import { MasonryModule } from '@thisissoon/angular-masonry';
 
@@ -29,24 +31,25 @@ const masonryProviders = [
 ];
 
 @NgModule({
-  imports: [
-    MasonryModule.forRoot(masonryProviders)
-  ]
+  imports: [MasonryModule.forRoot(masonryProviders)]
 })
-export class AppModule { }
+export class AppModule {}
 ```
 
 `angular.json`
 
 Add the Masonry library javascript to your angular cli config
+
 ```ts
 "scripts": [
   "../node_modules/masonry-layout/dist/masonry.pkgd.js"
 ],
 ```
 
 #### Universal app (only needed if using platform-server)
+
 `app.server.module.ts`
+
 ```ts
 import { MasonryModule } from '@thisissoon/angular-masonry';
 
@@ -57,7 +60,7 @@ import { MasonryModule } from '@thisissoon/angular-masonry';
     MasonryModule.forRoot()
   ]
 })
-export class AppServerModule { }
+export class AppServerModule {}
 ```
 
 ## Example
@@ -68,15 +71,13 @@ A full working example can be found in the [src/app](https://github.com/thisisso
 
 ```ts
 export class AppComponent implements AfterViewInit, OnDestroy {
-
-  @ViewChild('grid')
-  public grid: ElementRef;
+  @ViewChild('grid') public grid: ElementRef;
 
   public masonryInstance: MasonryInstance;
 
   public cards = cards;
 
-  constructor(@Inject(Masonry) public masonry) { }
+  constructor(@Inject(Masonry) public masonry) {}
 
   ngAfterViewInit() {
     const options: MasonryOptions = {
@@ -99,7 +100,9 @@ export class AppComponent implements AfterViewInit, OnDestroy {
 ```
 
 ### `app.component.css`
+
 Styling is just an example
+
 ```css
 :host {
   display: block;
@@ -118,6 +121,7 @@ Styling is just an example
 ```
 
 ### `app.component.html`
+
 ```html
 <div class="grid" #grid>
   <div class="card" *ngFor="let card of cards">
@@ -164,15 +168,17 @@ To get more help on the Angular CLI use `ng help` or go check out the [Angular C
 
 [travis]: https://travis-ci.org/thisissoon/angular-masonry
 [travis-badge]: https://travis-ci.org/thisissoon/angular-masonry.svg?branch=master
-[coveralls]:https://coveralls.io/github/thisissoon/angular-masonry?branch=master
-[coveralls-badge]:https://coveralls.io/repos/github/thisissoon/angular-masonry/badge.svg?branch=master
-[commitizen]:http://commitizen.github.io/cz-cli/
-[commitizen-badge]:https://img.shields.io/badge/commitizen-friendly-brightgreen.svg
-[conventional-changelog]:https://github.com/conventional-changelog/conventional-changelog
-[standard-version]:https://github.com/conventional-changelog/standard-version
-[Karma]:https://karma-runner.github.io
-[Protractor]:http://www.protractortest.org/
+[coveralls]: https://coveralls.io/github/thisissoon/angular-masonry?branch=master
+[coveralls-badge]: https://coveralls.io/repos/github/thisissoon/angular-masonry/badge.svg?branch=master
+[commitizen]: http://commitizen.github.io/cz-cli/
+[commitizen-badge]: https://img.shields.io/badge/commitizen-friendly-brightgreen.svg
+[prettier-badge]: https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=shield
+[prettier-badge-url]: https://github.com/prettier/prettier
+[conventional-changelog]: https://github.com/conventional-changelog/conventional-changelog
+[standard-version]: https://github.com/conventional-changelog/standard-version
+[karma]: https://karma-runner.github.io
+[protractor]: http://www.protractortest.org/
 [angular]: https://angular.io/
-[angular-cli]:https://github.com/angular/angular-cli
-[angular-cli-readme]:https://github.com/angular/angular-cli/blob/master/README.md
-[masonry]:https://masonry.desandro.com/
+[angular-cli]: https://github.com/angular/angular-cli
+[angular-cli-readme]: https://github.com/angular/angular-cli/blob/master/README.md
+[masonry]: https://masonry.desandro.com/

angular.json

@@ -16,16 +16,9 @@
             "main": "src/main.ts",
             "tsConfig": "src/tsconfig.app.json",
             "polyfills": "src/polyfills.ts",
-            "assets": [
-              "src/assets",
-              "src/favicon.ico"
-            ],
-            "styles": [
-              "src/styles.scss"
-            ],
-            "scripts": [
-              "node_modules/masonry-layout/dist/masonry.pkgd.js"
-            ],
+            "assets": ["src/assets", "src/favicon.ico"],
+            "styles": ["src/styles.scss"],
+            "scripts": ["node_modules/masonry-layout/dist/masonry.pkgd.js"],
             "progress": false
           },
           "configurations": {
@@ -73,31 +66,17 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "src/tsconfig.spec.json",
             "progress": false,
-            "codeCoverageExclude": [
-              "src/app/masonry/masonry-ref.ts"
-            ],
-            "scripts": [
-              "node_modules/masonry-layout/dist/masonry.pkgd.js"
-            ],
-            "styles": [
-              "src/styles.scss"
-            ],
-            "assets": [
-              "src/assets",
-              "src/favicon.ico"
-            ]
+            "codeCoverageExclude": ["src/app/masonry/masonry-ref.ts"],
+            "scripts": ["node_modules/masonry-layout/dist/masonry.pkgd.js"],
+            "styles": ["src/styles.scss"],
+            "assets": ["src/assets", "src/favicon.ico"]
           }
         },
         "lint": {
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
-            "tsConfig": [
-              "src/tsconfig.app.json",
-              "src/tsconfig.spec.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
+            "tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
+            "exclude": ["**/node_modules/**"]
           }
         }
       }
@@ -117,12 +96,8 @@
         "lint": {
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
-            "tsConfig": [
-              "e2e/tsconfig.e2e.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
+            "tsConfig": ["e2e/tsconfig.e2e.json"],
+            "exclude": ["**/node_modules/**"]
           }
         }
       }

karma.conf.js

@@ -1,7 +1,7 @@
 // Karma configuration file, see link for more information
 // https://karma-runner.github.io/1.0/config/configuration-file.html
 
-module.exports = function (config) {
+module.exports = function(config) {
   config.set({
     basePath: '',
     frameworks: ['jasmine', '@angular-devkit/build-angular'],
@@ -13,19 +13,21 @@ module.exports = function (config) {
       require('@angular-devkit/build-angular/plugins/karma'),
       require('karma-spec-reporter')
     ],
-    client:{
+    client: {
       clearContext: false // leave Jasmine Spec Runner output visible in browser
     },
     coverageIstanbulReporter: {
-      dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly', 'text-summary' ],
+      dir: require('path').join(__dirname, 'coverage'),
+      reports: ['html', 'lcovonly', 'text-summary'],
       fixWebpackSourcePaths: true
     },
     angularCli: {
       environment: 'dev'
     },
-    reporters: config.angularCli && config.angularCli.codeCoverage ?
-      ['spec', 'kjhtml', 'coverage-istanbul'] :
-      ['spec', 'kjhtml'],
+    reporters:
+      config.angularCli && config.angularCli.codeCoverage
+        ? ['spec', 'kjhtml', 'coverage-istanbul']
+        : ['spec', 'kjhtml'],
     port: 9876,
     colors: true,
     logLevel: config.LOG_INFO,