feat: 统一eslint规范

Author: vanoneang

.eslintignore

@@ -4,3 +4,4 @@
 /script/.cache
 /*.js
 /node_modules/
+/tests/unit/LIcon.test.js

.eslintrc.js

@@ -3,13 +3,8 @@ module.exports = {
   env: {
     node: true,
   },
-  plugins: [
-    'vue',
-  ],
-  extends: [
-    'plugin:vue/essential',
-    '@vue/airbnb',
-  ],
+  plugins: ['vue'],
+  extends: ['plugin:vue/essential', '@vue/airbnb'],
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
@@ -19,6 +14,7 @@ module.exports = {
     'no-underscore-dangle': 0, // 无下划线
     camelcase: 0, // 变量可以用下划线
     semi: ['error', 'never'], // 无分号
+    'no-extra-semi': 0, // 和prettier冲突
     'no-plusplus': 0, // 禁止使用++，--
     // 'no-tabs': [o],
     'guard-for-in': 0,
@@ -28,6 +24,15 @@ module.exports = {
     'no-restricted-syntax': 0,
     'class-methods-use-this': 'off',
     'consistent-return': 'off',
+    'arrow-parens': ['error', 'as-needed'],
+    'object-curly-newline': [
+      'error',
+      {
+        ImportDeclaration: 'never',
+      },
+    ],
+    'comma-dangle': ['error', 'only-multiline'],
+    'no-param-reassign': ['error', { props: false }],
   },
   parserOptions: {
     parser: 'babel-eslint',

.prettierrc.js

@@ -1,6 +1,7 @@
 module.exports = {
   singleQuote: true, //字符串是否使用单引号，默认为false，使用双引号
   semi: false, //行位是否使用分号，默认为true
-  trailingComma: 'es5', //是否使用尾逗号，有三个可选值"<none|es5|all>"
-  arrowParens: 'always'
-};
+  trailingComma: 'all', //是否使用尾逗号，有三个可选值"<none|es5|all>"
+  printWidth: 120,
+  arrowParens: 'avoid',
+}

package.json

@@ -84,8 +84,8 @@
   },
   "lint-staged": {
     "*.{js,vue}": [
-      "vue-cli-service lint",
-      "git add"
+      "prettier --write",
+      "vue-cli-service lint"
     ]
   }
 }

src/App.vue

@@ -1,7 +1,5 @@
 <template>
-  <div id="app">
-    <router-view />
-  </div>
+  <div id="app"><router-view /></div>
 </template>
 
 <script>
@@ -31,7 +29,6 @@ export default {
 </script>
 
 <style lang="scss">
-
 #app {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

src/components/base/date-picker/lin-date-picker.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="container">
-    <el-date-picker v-model="value"
+    <el-date-picker
+      v-model="value"
       type="daterange"
       range-separator="至"
       start-placeholder="开始日期"
@@ -10,7 +11,8 @@
       popper-class="date-box"
       value-format="yyyy-MM-dd HH:mm:ss"
       :default-time="['00:00:00', '23:59:59']"
-      :picker-options="pickerOptions">
+      :picker-options="pickerOptions"
+    >
     </el-date-picker>
   </div>
 </template>

src/components/base/dialog/lin-dialog.vue

@@ -1,21 +1,17 @@
 <template>
   <div class="container">
     <el-dialog title="编辑分组" :append-to-body="true" :visible.sync="dialogFormVisible">
-      <slot name="content"></slot>
-      <slot name="footer"></slot>
+      <slot name="content"></slot> <slot name="footer"></slot>
     </el-dialog>
   </div>
 </template>
 
 <script>
 export default {
   data() {
-    return {
-
-    }
+    return {}
   },
 }
 </script>
 
-<style scoped lang="stylus">
-</style>
+<style scoped lang="stylus"></style>

src/components/base/dropdown/lin-dropdown.vue

@@ -1,14 +1,9 @@
 <template>
   <div class="container">
     <el-dropdown @command="handleCommand">
-      <el-button>
-        {{title}}
-        <i class="el-icon-arrow-down el-icon--right"></i>
-      </el-button>
+      <el-button> {{ title }} <i class="el-icon-arrow-down el-icon--right"></i> </el-button>
       <el-dropdown-menu slot="dropdown">
-        <el-dropdown-item v-for="single in list" :key="single" :command="single">
-          {{single}}
-        </el-dropdown-item>
+        <el-dropdown-item v-for="single in list" :key="single" :command="single"> {{ single }} </el-dropdown-item>
       </el-dropdown-menu>
     </el-dropdown>
   </div>

src/components/base/preview/preview.vue

@@ -2,17 +2,10 @@
   <div v-if="data.length">
     <div ref="myGallery" class="my-gallery" :data-pswp-uid="radom">
       <div v-if="slides.length">
-        <div :key="radom + '_' + index" v-for="(l ,index) in slides">
-          <img preview :src="l" alt="">
-        </div>
+        <div :key="radom + '_' + index" v-for="(l, index) in slides"><img preview :src="l" alt="" /></div>
       </div>
     </div>
-    <div
-      ref="pswpWrap"
-      class="pswp"
-      tabindex="-1"
-      role="dialog"
-      aria-hidden="true">
+    <div ref="pswpWrap" class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
       <div class="pswp__bg"></div>
       <div class="pswp__scroll-wrap">
         <div class="pswp__container">
@@ -29,22 +22,16 @@
             <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
             <div class="pswp__preloader">
               <div class="pswp__preloader__icn">
-                <div class="pswp__preloader__cut">
-                  <div class="pswp__preloader__donut"></div>
-                </div>
+                <div class="pswp__preloader__cut"><div class="pswp__preloader__donut"></div></div>
               </div>
             </div>
           </div>
           <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
             <div class="pswp__share-tooltip"></div>
           </div>
-          <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
-          </button>
-          <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
-          </button>
-          <div class="pswp__caption">
-            <div class="pswp__caption__center"></div>
-          </div>
+          <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>
+          <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>
+          <div class="pswp__caption"><div class="pswp__caption__center"></div></div>
         </div>
       </div>
     </div>
@@ -61,7 +48,9 @@ import PhotoSwipe from 'photoswipe/dist/photoswipe'
 import PhotoSwipeUIDefault from 'photoswipe/dist/photoswipe-ui-default'
 /** 生成随机字符串 */
 function createId() {
-  return Math.random().toString(36).substring(2)
+  return Math.random()
+    .toString(36)
+    .substring(2)
 }
 export default {
   name: 'PreviewImage',
@@ -127,22 +116,22 @@ export default {
       })
       const loadingInstance = Loading.service()
       const galleryElement = this.$refs.myGallery
-      this.radom = createId();
+      this.radom = createId()
       let pswpElement = this.$refs.pswpWrap
       const items = await this.transThumbnailElements()
       let photoSwipeOptions = {
         galleryUID: this.radom,
-        getThumbBoundsFn: function (index) {
+        getThumbBoundsFn: function(index) {
           let thumbnail = items[index].el
           let pageYScroll = window.pageYOffset || document.documentElement.scrollTop
           let rect = thumbnail.getBoundingClientRect()
           return {
             x: rect.left,
             y: rect.top + pageYScroll,
-            w: rect.width
+            w: rect.width,
           }
         },
-        ...options
+        ...options,
       }
       this.gallery = new PhotoSwipe(pswpElement, PhotoSwipeUIDefault, items, photoSwipeOptions)
       this.gallery.init()
@@ -159,17 +148,17 @@ export default {
     },
     async getWH(elem) {
       return new Promise((resolve, reject) => {
-        if (typeof elem.naturalWidth === "undefined") {
+        if (typeof elem.naturalWidth === 'undefined') {
           // IE 6/7/8
           let img = new window.Image()
           img.src = elem.getAttribute('src')
-          img.onload = function () {
+          img.onload = function() {
             resolve({
               w: this.width,
               h: this.height,
             })
           }
-          img.onerror = function () {
+          img.onerror = function() {
             reject({
               w: 0,
               h: 0,
@@ -182,7 +171,7 @@ export default {
               h: elem.naturalHeight,
             })
           } else {
-            elem.onload = function () {
+            elem.onload = function() {
               resolve({
                 w: this.naturalWidth,
                 h: this.naturalHeight,
@@ -217,7 +206,7 @@ export default {
     destroy() {
       // 销毁
       if (this.gallery) {
-        this.gallery.close();
+        this.gallery.close()
         this.gallery = null
       }
     },

src/components/base/search/lin-search.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="lin-search">
-    <el-input size="medium"  :placeholder="placeholder" clearable v-model="keyword" class="input-with-select">
+    <el-input size="medium" :placeholder="placeholder" clearable v-model="keyword" class="input-with-select">
       <el-button slot="append" icon="el-icon-search"></el-button>
     </el-input>
   </div>
@@ -25,7 +25,7 @@ export default {
     // 节流搜索
     this.$watch(
       'keyword',
-      Utils.debounce((newQuery) => {
+      Utils.debounce(newQuery => {
         this.$emit('query', newQuery)
       }, 1000),
     )

src/components/base/source-code/source-code.vue

@@ -4,7 +4,6 @@
   </div>
 </template>
 
-
 <script type="text/ecmascript-6">
 export default {
   props: {
@@ -36,14 +35,14 @@ export default {
   border-radius: 4px;
   padding: 7px 15px;
   padding-right: 19px;
-  background-color: rgba(0,0,0,.7);
+  background-color: rgba(0, 0, 0, 0.7);
   border: 1px solid #000;
   color: #fff;
-  -webkit-transition: all .3s;
-  transition: all .3s;
+  -webkit-transition: all 0.3s;
+  transition: all 0.3s;
   &:hover {
     right: -4px;
-    background-color: rgba(0,0,0,.9);
+    background-color: rgba(0, 0, 0, 0.9);
   }
 }
 </style>

src/components/base/sticky-top/sticky-top.vue

@@ -1,14 +1,12 @@
 <template>
-  <div class="wrapper">
-    <slot></slot>
-  </div>
+  <div class="wrapper"><slot></slot></div>
 </template>
 
 <style lang="scss" scoped>
 .wrapper {
   position: sticky;
   top: 0;
   z-index: 9;
-  background:#fff;
+  background: #fff;
 }
 </style>