use eslint

Author: SevenOutman

.eslintignore

@@ -0,0 +1,3 @@
+/demo/
+/dist/
+/*.js

.eslintrc.js

@@ -0,0 +1,24 @@
+// https://eslint.org/docs/user-guide/configuring
+
+module.exports = {
+  root: true,
+  parserOptions: {
+    parser: 'babel-eslint'
+  },
+  env: {
+    browser: true,
+  },
+  // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
+  // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
+  extends: ['plugin:vue/essential'],
+  // required to lint *.vue files
+  plugins: [
+    'vue'
+  ],
+  // add your custom rules here
+  rules: {
+    // allow debugger during development
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'space-before-function-paren': ['error', 'always']
+  }
+}

package.json

@@ -44,10 +44,15 @@
   "devDependencies": {
     "autoprefixer": "^8.1.0",
     "babel-core": "^6.18.2",
+    "babel-eslint": "^8.2.2",
     "babel-loader": "^7.1.4",
     "babel-preset-env": "^1.6.1",
     "babel-preset-stage-2": "^6.24.1",
     "css-loader": "^0.28.10",
+    "eslint": "^4.18.2",
+    "eslint-friendly-formatter": "^3.0.0",
+    "eslint-loader": "^2.0.0",
+    "eslint-plugin-vue": "^4.3.0",
     "file-loader": "^1.1.11",
     "gh-pages": "^1.1.0",
     "html-webpack-plugin": "^3.0.6",

src/components/aplayer-icon.vue

@@ -22,10 +22,10 @@
   export default {
     props: ['type'],
     computed: {
-      viewBox() {
+      viewBox () {
         return SVG[this.type][0]
       },
-      d() {
+      d () {
         return SVG[this.type][1]
       },
     },

src/components/aplayer-list.vue

@@ -9,9 +9,11 @@
       ref="ol"
       :style="{maxHeight: listmaxheight || ''}"
     >
-      <li v-for="(aMusic, index) of musicList"
-          :class="{'aplayer-list-light': aMusic === currentMusic}"
-          @click="$emit('selectsong', aMusic)"
+      <li
+        v-for="(aMusic, index) of musicList"
+        :key="index"
+        :class="{'aplayer-list-light': aMusic === currentMusic}"
+        @click="$emit('selectsong', aMusic)"
       >
         <span class="aplayer-list-cur" :style="{background: theme}"></span>
         <span class="aplayer-list-index">{{ index + 1}}</span>
@@ -62,7 +64,6 @@
       height: 0 !important;
     }
 
-
     ol {
       list-style-type: none;
       margin: 0;

src/components/aplayer-lrc.vue

@@ -5,6 +5,7 @@
       :style="transformStyle">
       <p
         v-for="(line, index) of lrcLines"
+        :key="index"
         :class="{ 'aplayer-lrc-current': index === currentLineIndex }"
       >
         {{ line[1] }}
@@ -17,7 +18,16 @@
   import {parseLrc} from '../utils'
 
   export default {
-    props: ['currentMusic', 'playStat'],
+    props: {
+      currentMusic: {
+        type: Object,
+        required: true
+      },
+      playStat: {
+        type: Object,
+        required: true
+      }
+    },
     data () {
       return {
         displayLrc: '',

src/components/aplayer-thumbnail.vue

@@ -68,7 +68,7 @@
 
         this.$emit('dragend')
       },
-      onClick() {
+      onClick () {
         if (!this.hasMovedSinceMouseDown) {
           this.$emit('toggleplay')
         }

src/demo/App.vue

@@ -35,11 +35,11 @@
         preload="metadata"
         mode="circulation"
         :music="{
-                    title: 'secret base~君がくれたもの~',
-                    author: 'Silent Siren',
-                    url: 'https://storage.googleapis.com/gh-pages-static/secretbase.mp3',
-                    pic: 'https://p3.music.126.net/HJYMPi7BLKFfSvA2T3OUmg==/3316127069531628.jpg?param=90y90'
-                }"
+          title: 'secret base~君がくれたもの~',
+          author: 'Silent Siren',
+          url: 'https://storage.googleapis.com/gh-pages-static/secretbase.mp3',
+          pic: 'https://p3.music.126.net/HJYMPi7BLKFfSvA2T3OUmg==/3316127069531628.jpg?param=90y90'
+        }"
       />
 
       <h3>With lyrics</h3>
@@ -49,12 +49,13 @@
         showlrc
         mode="circulation"
         :music="{
-                title: 'Another Love',
-                author: 'Tom Odell',
-                url: 'https://storage.googleapis.com/gh-pages-static/anotherlove.mp3',
-                pic: 'https://y.gtimg.cn/music/photo_new/T002R90x90M000002sJhjf0PwjRN.jpg?max_age=2592000',
-                lrc: 'https://storage.googleapis.com/gh-pages-static/another-love.lrc'
-            }"/>
+          title: 'Another Love',
+          author: 'Tom Odell',
+          url: 'https://storage.googleapis.com/gh-pages-static/anotherlove.mp3',
+          pic: 'https://y.gtimg.cn/music/photo_new/T002R90x90M000002sJhjf0PwjRN.jpg?max_age=2592000',
+          lrc: 'https://storage.googleapis.com/gh-pages-static/another-love.lrc'
+        }"
+      />
       <h3>With playlist</h3>
       <aplayer
         mutex
@@ -72,11 +73,11 @@
         theme="#e6d0b2"
         mode="circulation"
         :music="{
-                    title: 'secret base~君がくれたもの~',
-                    author: 'Silent Siren',
-                    url: 'https://storage.googleapis.com/gh-pages-static/secretbase.mp3',
-                    pic: 'https://p3.music.126.net/HJYMPi7BLKFfSvA2T3OUmg==/3316127069531628.jpg?param=90y90'
-                }"
+          title: 'secret base~君がくれたもの~',
+          author: 'Silent Siren',
+          url: 'https://storage.googleapis.com/gh-pages-static/secretbase.mp3',
+          pic: 'https://p3.music.126.net/HJYMPi7BLKFfSvA2T3OUmg==/3316127069531628.jpg?param=90y90'
+        }"
       />
     </div>
   </div>

src/utils.js

@@ -61,9 +61,10 @@ export function warn (message) {
   return console.warn(`[vue-aplayer] ${message}`)
 }
 
-export function deprecatedProp(name, sinceVersion, alternative) {
+export function deprecatedProp (name, sinceVersion, alternative) {
   return warn(`'${name}' is deprecated since v${sinceVersion}, and will be removed in future releases, use '${alternative}' instead`)
 }
+
 export function getElementViewLeft (element) {
   let actualLeft = element.offsetLeft
   let current = element.offsetParent
@@ -75,6 +76,7 @@ export function getElementViewLeft (element) {
   elementScrollLeft = document.body.scrollLeft + document.documentElement.scrollLeft
   return actualLeft - elementScrollLeft
 }
+
 export function getElementViewTop (element) {
   let actualTop = element.offsetTop
   let current = element.offsetParent

src/vue-aplayer.vue

@@ -202,7 +202,7 @@
       }
     },
     computed: {
-      enableFloat() {
+      enableFloat () {
         return this.float && !this.isMobile
       },
       floatStyleObj () {

webpack.config.js

@@ -13,6 +13,16 @@ module.exports = {
 
   module: {
     rules: [
+      {
+        test: /\.(js|vue)$/,
+        loader: 'eslint-loader',
+        enforce: 'pre',
+        include: [path.resolve(__dirname, 'src')],
+        options: {
+          formatter: require('eslint-friendly-formatter'),
+          emitWarning: true
+        }
+      },
       {
         test: /\.vue$/,
         loader: 'vue-loader',

webpack.demo.config.js

@@ -11,6 +11,16 @@ module.exports = {
 
   module: {
     rules: [
+      {
+        test: /\.(js|vue)$/,
+        loader: 'eslint-loader',
+        enforce: 'pre',
+        include: [path.resolve(__dirname, 'src')],
+        options: {
+          formatter: require('eslint-friendly-formatter'),
+          emitWarning: true
+        }
+      },
       {
         test: /\.vue$/,
         loader: 'vue-loader',