style: setup up automatic formatting and linting rules

.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

@@ -1,29 +1,28 @@
 # Angular Infinite Scroll
+
 [![Build Status][travis-badge]][travis-badge-url]
 [![Coverage Status][coveralls-badge]][coveralls-badge-url]
+[![code style: prettier][prettier-badge]][prettier-badge-url]
 
 A simple, lightweight infinite scrolling directive for [Angular][angular] which emits an event when an element has been scrolled to the bottom.
 
 This is a simple library for [Angular][angular], implemented in the [Angular Package Format v5.0](https://docs.google.com/document/d/1CZC2rcpxffTDfRDs6p1cfbmKNLA6x5O-NtkJglDaBVs/edit#heading=h.k0mh3o8u5hx).
 
-
 ## Install
 
 `npm i @thisissoon/angular-infinite-scroll --save`
 
 `app.module.ts`
+
 ```ts
 import { InfiniteScrollModule } from '@thisissoon/angular-infinite-scroll';
 
 @NgModule({
-  imports: [
-    InfiniteScrollModule
-  ]
+  imports: [InfiniteScrollModule]
 })
-export class AppModule { }
+export class AppModule {}
 ```
 
-
 ## Example
 
 A working example can be found inside [/src](https://github.com/thisissoon/angular-infinite-scroll/tree/master/src) folder
@@ -48,15 +47,13 @@ export class AppComponent {
     // Do something here
   }
 }
-
 ```
 
 ## Options
 
 * `offset` (number): distance in px from bottom of element to trigger `scrollEnd` event (default: 0)
 * `disabled` (boolean): If true directive will not trigger `scrollEnd` event
 
-
 ## Development server
 
 Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
@@ -81,10 +78,11 @@ Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protrac
 
 To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
 
-
 [travis-badge]: https://travis-ci.org/thisissoon/angular-infinite-scroll.svg?branch=master
 [travis-badge-url]: https://travis-ci.org/thisissoon/angular-infinite-scroll
 [coveralls-badge]: https://coveralls.io/repos/github/thisissoon/angular-infinite-scroll/badge.svg?branch=master
 [coveralls-badge-url]: https://coveralls.io/github/thisissoon/angular-infinite-scroll?branch=master
 [angular]: https://angular.io/
 [angular-inviewport]: https://github.com/thisissoon/angular-inviewport
+[prettier-badge]: https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=shield
+[prettier-badge-url]: https://github.com/prettier/prettier

angular.json

@@ -16,13 +16,8 @@
             "main": "src/main.ts",
             "tsConfig": "src/tsconfig.app.json",
             "polyfills": "src/polyfills.ts",
-            "assets": [
-              "src/assets",
-              "src/favicon.ico"
-            ],
-            "styles": [
-              "src/styles.scss"
-            ],
+            "assets": ["src/assets", "src/favicon.ico"],
+            "styles": ["src/styles.scss"],
             "scripts": []
           },
           "configurations": {
@@ -70,25 +65,15 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "src/tsconfig.spec.json",
             "scripts": [],
-            "styles": [
-              "src/styles.scss"
-            ],
-            "assets": [
-              "src/assets",
-              "src/favicon.ico"
-            ]
+            "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/**"]
           }
         }
       }
@@ -108,12 +93,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/**"]
           }
         }
       }
@@ -129,4 +110,4 @@
       "prefix": "sn"
     }
   }
-}
+}

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,