Feature(eslint): remove tslint and use eslint instead

.eslintignore

@@ -0,0 +1,2 @@
+dist/*.js
+src/assets

.eslintrc.js

@@ -0,0 +1,40 @@
+module.exports = {
+  root: true,
+
+  env: {
+    browser: true,
+    node: true,
+    es6: true
+  },
+
+  parserOptions: {
+    parser: '@typescript-eslint/parser',
+    sourceType: 'module'
+  },
+
+  plugins: [
+    'vue'
+  ],
+
+  rules: {
+    'space-before-function-paren': [2, 'never'],
+    'vue/array-bracket-spacing': 'error',
+    'vue/arrow-spacing': 'error',
+    'vue/block-spacing': 'error',
+    'vue/brace-style': 'error',
+    'vue/camelcase': 'error',
+    'vue/comma-dangle': 'error',
+    'vue/component-name-in-template-casing': 'error',
+    'vue/eqeqeq': 'error',
+    'vue/key-spacing': 'error',
+    'vue/match-component-file-name': 'error',
+    'vue/object-curly-spacing': 'error'
+  },
+
+  'extends': [
+    'eslint:recommended',
+    'plugin:vue/recommended',
+    '@vue/standard',
+    '@vue/typescript'
+  ]
+}

babel.config.js

@@ -1,5 +1,8 @@
 module.exports = {
   presets: [
-    '@vue/app'
+    ['@vue/app', {
+      'useBuiltIns': 'usage',
+      'corejs': 2
+    }]
   ]
 }

jest.config.js

@@ -21,6 +21,18 @@ module.exports = {
   testMatch: [
     '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
   ],
+  collectCoverage: true,
+  collectCoverageFrom: [
+    'src/utils/**/*.{ts,vue}',
+    '!src/utils/auth.ts',
+    '!src/utils/request.ts',
+    'src/components/**/*.{ts,vue}'
+  ],
+  coverageDirectory: '<rootDir>/tests/unit/coverage',
+  coverageReporters: [
+    'lcov',
+    'text-summary'
+  ],
   testURL: 'http://localhost/',
   globals: {
     'ts-jest': {

mock/index.ts

@@ -4,7 +4,7 @@ import tableAPI from './table';
 
 // User
 Mock.mock(/\/user\/login/, 'post', userAPI.login);
-Mock.mock(/\/user\/info/, 'get', userAPI.getInfo);
+Mock.mock(/\/user\/info/, 'get', userAPI.getUserInfo);
 Mock.mock(/\/user\/logout/, 'post', userAPI.logout);
 
 // Table

mock/user.ts

@@ -42,7 +42,7 @@ export default {
     };
   },
 
-  getInfo: (res: any) => {
+  getUserInfo: (res: any) => {
     const { token } = param2Obj(res.url);
     const info = users[token];
 

package.json

@@ -10,45 +10,51 @@
     "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
-    "@types/js-cookie": "^2.2.1",
-    "@types/mockjs": "^1.0.2",
-    "@types/nprogress": "^0.0.29",
-    "@types/webpack-env": "^1.13.9",
     "axios": "^0.18.0",
-    "element-ui": "^2.6.1",
+    "element-ui": "^2.6.3",
     "js-cookie": "^2.2.0",
     "mockjs": "^1.0.1-beta3",
     "normalize.css": "^8.0.1",
     "nprogress": "^0.2.0",
     "path-to-regexp": "^3.0.0",
     "register-service-worker": "^1.6.2",
-    "vue": "^2.6.8",
+    "vue": "^2.6.10",
     "vue-class-component": "^7.0.1",
-    "vue-property-decorator": "^8.0.0",
+    "vue-property-decorator": "^8.1.0",
     "vue-router": "^3.0.2",
-    "vue-svgicon": "^3.2.2",
+    "vue-svgicon": "^3.2.4",
     "vuex": "^3.1.0",
-    "vuex-class": "^0.3.1",
-    "vuex-module-decorators": "^0.9.8",
-    "webpack": "^4.29.6"
+    "vuex-class": "^0.3.2",
+    "vuex-module-decorators": "^0.9.8"
   },
   "devDependencies": {
     "@types/jest": "^24.0.11",
-    "@vue/cli-plugin-babel": "^3.5.0",
-    "@vue/cli-plugin-e2e-cypress": "^3.5.0",
-    "@vue/cli-plugin-pwa": "^3.5.0",
-    "@vue/cli-plugin-typescript": "^3.5.0",
-    "@vue/cli-plugin-unit-jest": "^3.5.0",
-    "@vue/cli-service": "^3.5.0",
+    "@types/js-cookie": "^2.2.1",
+    "@types/mockjs": "^1.0.2",
+    "@types/nprogress": "^0.0.29",
+    "@types/webpack-env": "^1.13.9",
+    "@vue/cli-plugin-babel": "^3.5.1",
+    "@vue/cli-plugin-e2e-cypress": "^3.5.1",
+    "@vue/cli-plugin-eslint": "^3.5.1",
+    "@vue/cli-plugin-pwa": "^3.5.1",
+    "@vue/cli-plugin-typescript": "^3.5.1",
+    "@vue/cli-plugin-unit-jest": "^3.5.1",
+    "@vue/cli-service": "^3.5.1",
+    "@vue/eslint-config-standard": "^4.0.0",
+    "@vue/eslint-config-typescript": "^4.0.0",
     "@vue/test-utils": "^1.0.0-beta.29",
-    "babel-core": "7.0.0-bridge.0",
+    "babel-core": "^7.0.0-bridge.0",
+    "babel-eslint": "^10.0.1",
+    "eslint": "^5.15.3",
+    "eslint-plugin-vue": "^5.2.2",
     "fibers": "^3.1.1",
-    "jest": "^24.3.1",
-    "sass": "^1.17.2",
+    "jest": "^24.5.0",
+    "sass": "^1.17.3",
     "sass-loader": "^7.1.0",
     "ts-jest": "^24.0.0",
-    "typescript": "3.3.3333",
+    "typescript": "3.3.4000",
     "vue-cli-plugin-element": "^1.0.1",
-    "vue-template-compiler": "^2.6.8"
+    "vue-template-compiler": "^2.6.10",
+    "webpack": "^4.29.6"
   }
 }

src/api/login.ts

@@ -10,7 +10,7 @@ export const login = (username: string, password: string) =>
     },
   });
 
-export const getInfo = (token: string) =>
+export const getUserInfo = (token: string) =>
   request({
     url: '/user/info',
     method: 'get',

src/permission.ts

@@ -18,7 +18,7 @@ router.beforeEach((to: Route, from: Route, next: any) => {
       NProgress.done(); // If current page is dashboard will not trigger afterEach hook, so manually handle it
     } else {
       if (UserModule.roles.length === 0) {
-        UserModule.GetInfo().then(() => {
+        UserModule.GetUserInfo().then(() => {
           next();
         }).catch((err) => {
           UserModule.FedLogOut().then(() => {

src/registerServiceWorker.ts

@@ -1,4 +1,4 @@
-/* tslint:disable:no-console */
+/* eslint-disable */
 
 import { register } from 'register-service-worker';
 

src/router.ts

@@ -32,7 +32,7 @@ export default new Router({
     },
     {
       path: '/404',
-      component: () => import(/* webpackChunkName: "404" */ '@/views/404.vue') ,
+      component: () => import(/* webpackChunkName: "404" */ '@/views/404.vue'),
       meta: { hidden: true },
     },
     {

src/store/modules/user.ts

@@ -1,5 +1,5 @@
 import { VuexModule, Module, MutationAction, Mutation, Action, getModule } from 'vuex-module-decorators';
-import { login, logout, getInfo } from '@/api/login';
+import { login, logout, getUserInfo } from '@/api/login';
 import { getToken, setToken, removeToken } from '@/utils/auth';
 import store from '@/store';
 
@@ -31,25 +31,25 @@ class User extends VuexModule implements IUserState {
     return '';
   }
 
-  @MutationAction({ mutate: [ 'roles', 'name', 'avatar' ] })
-  public async GetInfo() {
+  @MutationAction({ mutate: ['roles', 'name', 'avatar'] })
+  public async GetUserInfo() {
     const token = getToken();
     if (token === undefined) {
-      throw Error('GetInfo: token is undefined!');
+      throw Error('GetUserInfo: token is undefined!');
     }
-    const { data } = await getInfo(token);
+    const { data } = await getUserInfo(token);
     if (data.roles && data.roles.length > 0) {
       return {
         roles: data.roles,
         name: data.name,
         avatar: data.avatar,
       };
     } else {
-      throw Error('GetInfo: roles must be a non-null array!');
+      throw Error('GetUserInfo: roles must be a non-null array!');
     }
   }
 
-  @MutationAction({ mutate: [ 'token', 'roles' ] })
+  @MutationAction({ mutate: ['token', 'roles'] })
   public async LogOut() {
     if (getToken() === undefined) {
       throw Error('LogOut: token is undefined!');

src/utils/request.ts

@@ -54,7 +54,7 @@ service.interceptors.response.use(
           });
         });
       }
-      return Promise.reject('error with code: ' + res.code);
+      return Promise.reject(new Error('error with code: ' + res.code));
     } else {
       return response.data;
     }

src/views/layout/Layout.vue

@@ -12,7 +12,7 @@
 <script lang="ts">
 import { Navbar, AppMain, Sidebar } from './components';
 import ResizeMixin from './mixin/ResizeHandler';
-import { Component, Vue } from 'vue-property-decorator';
+import { Component } from 'vue-property-decorator';
 import { mixins } from 'vue-class-component';
 import { DeviceType, AppModule } from '@/store/modules/app';
 

src/views/login/index.vue

@@ -41,7 +41,7 @@ import { isValidUsername } from '@/utils/validate';
 import { Component, Vue, Watch } from 'vue-property-decorator';
 import { UserModule } from '@/store/modules/user';
 import { Route } from 'vue-router';
-import { ElForm } from 'element-ui/types/form';
+import { Form as ElForm } from 'element-ui';
 
 const validateUsername = (rule: any, value: string, callback: any) => {
   if (!isValidUsername(value)) {

src/views/tree/index.vue

@@ -14,7 +14,8 @@
 
 <script lang="ts">
 import { Component, Vue, Watch } from 'vue-property-decorator';
-import { TreeData, ElTree } from 'element-ui/types/tree';
+import { Tree as ElTree } from 'element-ui';
+import { TreeData } from 'element-ui/types/tree';
 
 @Component
 export default class Tree extends Vue {

tests/unit/.eslintrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  env: {
+    jest: true
+  }
+}

vue.config.js

@@ -1,6 +1,9 @@
 module.exports = {
   publicPath: process.env.NODE_ENV === 'production' ? '/vue-typescript-admin-template/' : '/',
+
   pwa: {
     name: 'vue-typescript-admin-template'
-  }
+  },
+
+  lintOnSave: process.env.NODE_ENV !== 'production'
 }