feat: use eslint-plugin-vue

clarkdo · Apr 12, 2019 · cdf9ae8 · cdf9ae8
1 parent 00eec76
commit cdf9ae8
Show file tree

Hide file tree

Showing 42 changed files with 656 additions and 646 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,16 +1,20 @@
 module.exports = {
   root: true,
-  parser: 'babel-eslint',
   env: {
     browser: true,
     node: true
   },
-  extends: 'standard',
-  // required to lint *.vue files
-  plugins: [
-    'html'
+  parserOptions: {
+    parser: 'babel-eslint',
+    ecmaFeatures: {
+      legacyDecorators: true
+    }
+  },
+  extends: [
+    '@nuxtjs',
+    'plugin:nuxt/recommended'
   ],
-  // add your custom rules here
-  rules: {},
-  globals: {}
+  rules: {
+    'nuxt/no-cjs-in-config': 'off'
+  }
 }
diff --git a/client/components/Footer.vue b/client/components/Footer.vue
@@ -2,7 +2,9 @@
   <footer class="footer">
     <div class="container">
       <div class="footer-main">
-        <p class="footer-main-title">Hare 2.0</p>
+        <p class="footer-main-title">
+          Hare 2.0
+        </p>
         <a href="//github.com/clarkdo/hare/issues" class="footer-main-link" target="_blank">Feedback</a>
         <a href="//github.com/clarkdo/hare/graphs/contributors" class="footer-main-link" target="_blank">Contributors</a>
       </div>
@@ -12,12 +14,15 @@
           placement="top"
           width="120"
           popper-class="footer-popover"
-          trigger="hover">
-          <div class="footer-popover-title">CFC</div>
+          trigger="hover"
+        >
+          <div class="footer-popover-title">
+            CFC
+          </div>
         </el-popover>
-        <i class="icon-wechat element-icons" v-popover:wechat></i>
+        <i v-popover:wechat class="icon-wechat element-icons" />
         <a href="//github.com/clarkdo/hare" target="_blank">
-          <i class="icon-github element-icons"></i>
+          <i class="icon-github element-icons" />
         </a>
       </div>
     </div>

diff --git a/client/components/Headbar.vue b/client/components/Headbar.vue
@@ -1,35 +1,35 @@
 <template>
   <div class="headbar">
-    <header class="header" ref="header">
+    <header ref="header" class="header">
       <el-row>
         <el-col :span="5">
           <div class="nav-icon" :class="{hide: !isMenuHidden}" @click="toggleMenu">
-            <span></span>
-            <span></span>
-            <span></span>
-            <span></span>
+            <span />
+            <span />
+            <span />
+            <span />
           </div>
         </el-col>
         <el-col :offset="11" :span="3">
           <p v-if="!!displayName">
             <el-tooltip :content="displayName">
-              <img src="~/assets/img/avatar.svg" />
+              <img src="~/assets/img/avatar.svg">
             </el-tooltip>
-            <span> {{displayName}}</span>
+            <span> {{ displayName }}</span>
           </p>
         </el-col>
         <el-col :span="3">
           <p @click="$router.push('/account/token')">
             <el-tooltip :content="$t('head.pwd')">
               <img src="~/assets/img/pwd.svg"></img>
             </el-tooltip>
-            <span> {{$t("head.pwd")}}</span>
+            <span> {{ $t("head.pwd") }}</span>
           </p>
         </el-col>
         <el-col :span="2">
           <p @click="logout">
             <img src="~/assets/img/exit.svg"></img>
-            <span> {{$t("head.exit")}}</span>
+            <span> {{ $t("head.exit") }}</span>
           </p>
         </el-col>
       </el-row>
@@ -51,7 +51,7 @@ export default class Headbar extends Vue {
   @Getter isMenuHidden
   @Getter authUser
   @Getter displayName
-  async logout () {
+  async logout() {
     await this.$store.dispatch('logout', async () => {
       await this.$router.push('/login')
     })

diff --git a/client/components/Navbar.vue b/client/components/Navbar.vue
@@ -1,35 +1,41 @@
 <template>
   <div class="navbar">
-    <el-menu class="el-menu-demo" :default-active="$route.path"
-      background-color="#324157" text-color="#bfcbd9">
+    <el-menu
+      class="el-menu-demo"
+      :default-active="$route.path"
+      background-color="#324157"
+      text-color="#bfcbd9"
+    >
       <header>
-          <el-row>
-            <el-col :span="20">
-              <img src="~/assets/img/logo.svg" alt="Element">
-            </el-col>
-            <el-col :span="4">
-              <div class="nav-icon open" :class="{hide: isMenuHidden}" @click="toggleMenu">
-                <span></span>
-                <span></span>
-                <span></span>
-                <span></span>
-              </div>
-            </el-col>
-          </el-row>
+        <el-row>
+          <el-col :span="20">
+            <img src="~/assets/img/logo.svg" alt="Element">
+          </el-col>
+          <el-col :span="4">
+            <div class="nav-icon open" :class="{hide: isMenuHidden}" @click="toggleMenu">
+              <span />
+              <span />
+              <span />
+              <span />
+            </div>
+          </el-col>
+        </el-row>
       </header>
       <div v-for="menu in menus" :key="menu.id">
         <el-submenu v-if="menu.children && menu.children.length" :index="menu.url || menu.name">
-          <template slot="title"><i v-if="menu.icon" :class="menu.icon"></i>{{menu.name}}</template>
+          <template slot="title">
+            <i v-if="menu.icon" :class="menu.icon" />{{ menu.name }}
+          </template>
           <nuxt-link v-for="subMenu in menu.children" :key="subMenu.id" :to="subMenu.url" exact>
             <el-menu-item :index="subMenu.url || subMenu.name">
-              <i v-if="subMenu.icon" :class="subMenu.icon"></i>{{subMenu.name}}
+              <i v-if="subMenu.icon" :class="subMenu.icon" />{{ subMenu.name }}
             </el-menu-item>
           </nuxt-link>
         </el-submenu>
         <nuxt-link v-else :to="menu.url" exact>
           <el-menu-item :index="menu.url || menu.name">
-            <i v-if="menu.icon" :class="menu.icon"></i>{{menu.name}}
-            </el-menu-item>
+            <i v-if="menu.icon" :class="menu.icon" />{{ menu.name }}
+          </el-menu-item>
         </nuxt-link>
       </div>
     </el-menu>
@@ -53,14 +59,14 @@ export default class Navbar extends Vue {
   @Getter isMenuHidden
   @MenuGetter menus
 
-  async beforeMount () {
-    let {data: menus} = await axios.get('/hpi/ui/menu')
+  async beforeMount() {
+    const { data: menus } = await axios.get('/hpi/ui/menu')
     if (Array.isArray(menus) && menus.length) {
       this.$store.dispatch('menu/addAll', this.translateMenus(menus))
     }
   }
 
-  translateMenus (menus) {
+  translateMenus(menus) {
     return menus.map((menu) => {
       const subMenus = menu.children
       if (Array.isArray(subMenus) && subMenus.length) {

diff --git a/client/components/examples/activity/NewActivity.vue b/client/components/examples/activity/NewActivity.vue
@@ -1,18 +1,17 @@
 <template>
   <div class="new-activity">
-    <el-form :model="formData" :rules="formRules" ref="newActivity" label-width="100px" class="activity-form">
+    <el-form ref="newActivity" :model="formData" :rules="formRules" label-width="100px" class="activity-form">
       <el-row type="flex" justify="flex-start">
         <el-col :xs="24" :sm="10">
           <el-form-item :label="$t('activity.account')" prop="account">
-            <el-input v-model="formData.account"></el-input>
+            <el-input v-model="formData.account" />
           </el-form-item>
         </el-col>
         <el-col :xs="24" :sm="{span: 10, offset: 2}">
           <el-form-item :label="$t('activity.area')" prop="region">
             <el-select v-model="formData.region" filterable allow-create :placeholder="$t('activity.holder.area')">
               <el-option
-                v-for="item in cities"
-                v-if="!item.disabled"
+                v-for="item in activeCities"
                 :key="item.label"
                 :label="$t(item.label)"
                 :value="item.value"
@@ -29,46 +28,49 @@
                 v-for="item in labels"
                 :key="item.label"
                 :label="$t(item.label)"
-                :value="item.value">
-              </el-option>
+                :value="item.value"
+              />
             </el-select>
           </el-form-item>
         </el-col>
         <el-col :xs="24" :sm="{span: 3, offset: 2}">
           <el-form-item :label="$t('activity.instDist')" prop="delivery">
-            <el-switch active-text="" inactive-text="" v-model="formData.delivery"></el-switch>
+            <el-switch v-model="formData.delivery" active-text="" inactive-text="" />
           </el-form-item>
         </el-col>
       </el-row>
       <el-row type="flex" justify="flex-start">
         <el-col :xs="24" :sm="10">
           <el-form-item :label="$t('activity.type')" prop="type">
             <el-checkbox-group v-model="formData.type">
-              <el-checkbox :label="$t('activity.price')"></el-checkbox>
-              <el-checkbox :label="$t('activity.rights')"></el-checkbox>
+              <el-checkbox :label="$t('activity.price')" />
+              <el-checkbox :label="$t('activity.rights')" />
             </el-checkbox-group>
           </el-form-item>
         </el-col>
         <el-col :xs="24" :sm="{span: 10, offset: 2}">
           <el-form-item :label="$t('activity.priority')" prop="priority">
             <el-radio-group v-model="formData.priority">
-              <el-radio :label="$t('activity.medium')"></el-radio>
-              <el-radio :label="$t('activity.high')"></el-radio>
+              <el-radio :label="$t('activity.medium')" />
+              <el-radio :label="$t('activity.high')" />
             </el-radio-group>
           </el-form-item>
         </el-col>
       </el-row>
       <el-row type="flex" justify="flex-start">
         <el-col :xs="24" :sm="10">
           <el-form-item :label="$t('activity.rate')" prop="rate">
-            <el-rate v-model="formData.rate" :colors="['#99A9BF', '#F7BA2A', '#FF9900']"></el-rate>
+            <el-rate v-model="formData.rate" :colors="['#99A9BF', '#F7BA2A', '#FF9900']" />
           </el-form-item>
         </el-col>
         <el-col :xs="24" :sm="{span: 10, offset: 2}">
           <el-form-item :label="$t('activity.organizer')" prop="organizer">
-            <el-cascader :options="organizers" v-model="formData.organizer"
-              :placeholder="$t('example.selPh')" change-on-select>
-            </el-cascader>
+            <el-cascader
+              v-model="formData.organizer"
+              :options="organizers"
+              :placeholder="$t('example.selPh')"
+              change-on-select
+            />
           </el-form-item>
         </el-col>
       </el-row>
@@ -77,13 +79,15 @@
           <el-form-item :label="$t('activity.date')" required>
             <el-col :span="11">
               <el-form-item prop="date1">
-                <el-date-picker :placeholder="$t('activity.holder.date')" v-model="formData.date1" style="width: 100%;"></el-date-picker>
+                <el-date-picker v-model="formData.date1" :placeholder="$t('activity.holder.date')" style="width: 100%;" />
               </el-form-item>
             </el-col>
-            <el-col class="line" :span="1" :offset="1">-</el-col>
+            <el-col class="line" :span="1" :offset="1">
+              -
+            </el-col>
             <el-col :span="11">
               <el-form-item prop="date2">
-                <el-time-picker :placeholder="$t('activity.holder.time')" v-model="formData.date2" style="width: 100%;"></el-time-picker>
+                <el-time-picker v-model="formData.date2" :placeholder="$t('activity.holder.time')" style="width: 100%;" />
               </el-form-item>
             </el-col>
           </el-form-item>
@@ -92,13 +96,17 @@
       <el-row type="flex" justify="flex-start">
         <el-col :xs="24" :sm="22">
           <el-form-item :label="$t('activity.desc')" prop="desc">
-            <el-input type="textarea" v-model="formData.desc"></el-input>
+            <el-input v-model="formData.desc" type="textarea" />
           </el-form-item>
         </el-col>
       </el-row>
       <el-row type="flex" justify="center">
-        <el-button type="primary" @click="submit('newActivity')">{{$t('activity.create')}}</el-button>
-        <el-button @click="reset('newActivity')">{{$t('activity.reset')}}</el-button>
+        <el-button type="primary" @click="submit('newActivity')">
+          {{ $t('activity.create') }}
+        </el-button>
+        <el-button @click="reset('newActivity')">
+          {{ $t('activity.reset') }}
+        </el-button>
       </el-row>
     </el-form>
   </div>
@@ -114,7 +122,7 @@ const ExampleGetter = namespace('examples/index', Getter)
   props: {
     formData: {
       type: Object,
-      default () {
+      default() {
         return {
           account: '',
           region: 'activity.city.ly',
@@ -131,7 +139,7 @@ const ExampleGetter = namespace('examples/index', Getter)
       }
     }
   },
-  data () {
+  data() {
     return {
       formRules: {
         account: [
@@ -168,14 +176,19 @@ export default class NewActivity extends Vue {
   @ExampleGetter organizers
   @ExampleGetter cities
 
-  submit (formName) {
+  get activeCities() {
+    return this.cities.filter(city => !city.disable)
+  }
+
+  submit(formName) {
     /**
      * Example of how we can see each field value
      */
-    let formData = {}
+    const formData = {}
     for (const v of Object.keys(this.formData)) {
       formData[v] = this.formData[v]
     }
+    // eslint-disable-next-line no-console
     console.log('NewActivity submit formData', formData)
 
     this.$refs[formName].validate((valid) => {
@@ -192,7 +205,7 @@ export default class NewActivity extends Vue {
       }
     })
   }
-  reset (formName) {
+  reset(formName) {
     this.$refs[formName].resetFields()
   }
 }

diff --git a/client/components/examples/charts/BarDemo.vue b/client/components/examples/charts/BarDemo.vue
@@ -6,7 +6,7 @@ import { Bar } from 'vue-chartjs'
   extends: Bar
 })
 export default class BarDemo {
-  mounted () {
+  mounted() {
     this.renderChart({
       labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
       datasets: [

diff --git a/client/components/examples/charts/DoughnutDemo.vue b/client/components/examples/charts/DoughnutDemo.vue
@@ -6,7 +6,7 @@ import { Doughnut } from 'vue-chartjs'
   extends: Doughnut
 })
 export default class DoughnutDemo {
-  mounted () {
+  mounted() {
     this.renderChart({
       labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
       datasets: [

diff --git a/client/components/examples/charts/LineDemo.vue b/client/components/examples/charts/LineDemo.vue
@@ -30,7 +30,7 @@ export default class LineDemo extends Vue {
       }
     ]
   }
-  mounted () {
+  mounted() {
     this.renderChart(this.chartData, {
       tooltips: {
         callbacks: {