chore: add eslint (#282)

* chore: add eslint

* chore: lint on ci

Author: ktsn

.circleci/config.yml

@@ -39,6 +39,13 @@ jobs:
           at: ~/
       - run: yarn example
 
+  lint:
+    <<: *defaults
+    steps:
+      - attach_workspace:
+          at: ~/
+      - run: yarn lint
+
   test:
     <<: *defaults
     steps:
@@ -57,6 +64,9 @@ workflows:
       - example-build:
           requires:
             - install
+      - lint:
+          requires:
+            - install
       - test:
           requires:
             - install

.eslintignore

@@ -0,0 +1,11 @@
+/dist/
+/lib/
+node_modules/
+
+/test/test.build.js
+/example/build.js
+
+# TOOD: remove after fixed decorator indent issue
+# https://github.com/eslint/typescript-eslint-parser/issues/438
+/example
+/test

.eslintrc.js

@@ -0,0 +1,11 @@
+module.exports = {
+  root: true,
+  extends: ['plugin:vue-libs/recommended'],
+  parserOptions: {
+    parser: 'typescript-eslint-parser'
+  },
+  rules: {
+    'no-unused-vars': 'off',
+    'no-undef': 'off'
+  }
+}

build/dev-test.js

@@ -8,7 +8,7 @@ fs.watch('test/test.build.js', () => {
   run('mocha --reporter min test/test.build.js')
 })
 
-function run(command) {
+function run (command) {
   const [name, ...args] = command.split(' ')
   spawn(`node_modules/.bin/${name}`, args, {
     shell: true,

example/src/App.vue

@@ -82,7 +82,7 @@ export default class App extends AppProps {
   }
 
   // direct dispatch example
-  incrementIfOdd() {
+  incrementIfOdd () {
     this.$store.dispatch('incrementIfOdd')
   }
 }

example/src/components/Hello.vue

@@ -3,16 +3,16 @@
 </template>
 
 <script lang="ts">
-  import Vue from 'vue'
-  import Component from '../../../lib/index'
+import Vue from 'vue'
+import Component from '../../../lib/index'
 
-  @Component
-  export default class Hello extends Vue {
-    helloTimes: number = 0
+@Component
+export default class Hello extends Vue {
+  helloTimes: number = 0
 
-    sayHello () {
-      this.helloTimes++
-    }
+  sayHello () {
+    this.helloTimes++
   }
+}
 </script>
 

example/src/components/World.tsx

@@ -3,7 +3,7 @@ import Component from '../../../lib/index'
 
 @Component
 export default class World extends Vue {
-  render(h: CreateElement) {
+  render (h: CreateElement) {
     return <p>This is rendered via TSX</p>
   }
 }

example/src/shims-tsx.d.ts

@@ -1,4 +1,4 @@
-import Vue, { VNode } from "vue"
+import Vue, { VNode } from 'vue'
 
 declare global {
   namespace JSX {

example/src/store.ts

@@ -1,7 +1,7 @@
 import Vue from 'vue'
-import Vuex from "vuex"
+import Vuex from 'vuex'
 
-interface CounterState{
+interface CounterState {
   count: number
 }
 
@@ -20,4 +20,4 @@ const mutations = {
 export default new Vuex.Store({
   state,
   mutations
-})
+})

package.json

@@ -16,6 +16,7 @@
     "example": "npm run build && webpack --config example/webpack.config.js",
     "dev": "webpack --config example/webpack.config.js --watch",
     "dev:test": "node build/dev-test.js",
+    "lint": "eslint --ext js,jsx,ts,tsx,vue .",
     "test": "npm run build && webpack --config test/webpack.config.js && mocha test/test.build.js",
     "release": "bash build/release.sh"
   },
@@ -48,6 +49,8 @@
     "babel-plugin-transform-vue-jsx": "^4.0.1",
     "chai": "^4.1.2",
     "css-loader": "^1.0.0",
+    "eslint": "^5.7.0",
+    "eslint-plugin-vue-libs": "^3.0.0",
     "mocha": "^5.0.1",
     "reflect-metadata": "^0.1.12",
     "rimraf": "^2.6.2",
@@ -56,6 +59,7 @@
     "testdouble": "^3.5.0",
     "ts-loader": "^5.2.1",
     "typescript": "^3.1.1",
+    "typescript-eslint-parser": "^20.0.0",
     "uglify-js": "^3.3.10",
     "vue": "^2.5.13",
     "vue-loader": "^15.4.2",