Update eslint-plugin-vue to version 5.2.1 (#782)

* Update eslint-plugin-vue to version 5.2.1
* Update used ESLint rules
* Fix lint errors reported by new ESLint rules
* Manually set vue/order-in-components to include Nuxt's functions
  (namely validate and asyncData)

.eslintrc.json

@@ -21,12 +21,18 @@
   "rules": {
     "accessor-pairs": "error",
     "array-bracket-spacing": "error",
+    "vue/array-bracket-spacing": "error",
     "arrow-parens": ["error", "as-needed"],
     "arrow-spacing": "error",
+    "vue/arrow-spacing": "error",
     "block-spacing": "error",
+    "vue/block-spacing": "error",
     "brace-style": ["error", "stroustrup"],
+    "vue/brace-style": ["error", "stroustrup"],
     "camelcase": "error",
+    "vue/camelcase": "error",
     "comma-dangle": ["error", "never"],
+    "vue/comma-dangle": ["error", "never"],
     "comma-spacing": "error",
     "comma-style": "error",
     "complexity": ["warn", 7],
@@ -36,11 +42,13 @@
     "dot-notation": ["error", { "allowPattern": "^if$" }],
     "eol-last": ["error", "always"],
     "eqeqeq": ["error", "always", { "null": "ignore" }],
+    "vue/eqeqeq": ["error", "always", { "null": "ignore" }],
     "func-call-spacing": "error",
     "getter-return": "error",
     "guard-for-in": "error",
     "indent": ["error", 2, { "SwitchCase": 1 }],
     "key-spacing": "error",
+    "vue/key-spacing": "error",
     "keyword-spacing": "error",
     "linebreak-style": "error",
     "new-parens": "error",
@@ -60,6 +68,8 @@
     "no-trailing-spaces": "error",
     "no-unused-vars": ["error", { "args": "none" }],
     "no-var": "error",
+    "object-curly-spacing": ["error", "always"],
+    "vue/object-curly-spacing": ["error", "always"],
     "prefer-arrow-callback": "error",
     "prefer-const": ["error", { "destructuring": "all" }],
     "prefer-rest-params": "error",
@@ -87,6 +97,7 @@
     }],
     "space-in-parens": "error",
     "space-infix-ops": "error",
+    "vue/space-infix-ops": "error",
     "spaced-comment": ["error", "always"],
     "template-curly-spacing": "error",
     "valid-jsdoc": ["error", {
@@ -128,14 +139,40 @@
     "promise/no-return-in-finally": "error",
     "promise/valid-params": "error",
     "vue/component-name-in-template-casing": ["error", "kebab-case"],
-    "vue/max-attributes-per-line": ["error", { "singleline": 3 }],
     "vue/html-closing-bracket-newline": ["error", {
       "singleline": "never",
       "multiline": "never"
     }],
     "vue/html-closing-bracket-spacing": "error",
     "vue/multiline-html-element-content-newline": "off",
+    "vue/max-attributes-per-line": ["error", { "singleline": 3 }],
     "vue/singleline-html-element-content-newline": "off",
-    "vue/prop-name-casing": "error"
+    "vue/order-in-components": ["error", {
+      "order": [
+        "el",
+        "name",
+        "parent",
+        "functional",
+        ["delimiters", "comments"],
+        ["components", "directives", "filters"],
+        "extends",
+        "mixins",
+        "inheritAttrs",
+        "model",
+        ["props", "propsData"],
+        "validate",
+        "asyncData",
+        "data",
+        "computed",
+        "watch",
+        "LIFECYCLE_HOOKS",
+        "methods",
+        ["template", "render"],
+        "renderError"
+      ]
+    }],
+    "vue/prop-name-casing": "error",
+    "vue/require-direct-export": "error",
+    "vue/v-on-function-call": "error"
   }
 }

cli/export-fixture.js

@@ -11,7 +11,7 @@ const { fixtureFromRepository } = require(`../lib/model.js`);
 const args = minimist(process.argv.slice(2), {
   string: [`p`, `o`],
   boolean: [`h`, `a`],
-  alias: { p: `plugin`, h: `help`, a: `all-fixtures`, o: `output-dir`}
+  alias: { p: `plugin`, h: `help`, a: `all-fixtures`, o: `output-dir` }
 });
 
 const helpMessage = [

lib/model/Matrix.mjs

@@ -202,7 +202,7 @@ class Matrix {
    * @returns {array.<string>} All pixelKeys ordered by given axis order.
    */
   getPixelKeysByOrder(firstAxis, secondAxis, thirdAxis) {
-    const axisToPosIndex = {X: 0, Y: 1, Z: 2};
+    const axisToPosIndex = { X: 0, Y: 1, Z: 2 };
     const firstPosIndex = axisToPosIndex[firstAxis];
     const secondPosIndex = axisToPosIndex[secondAxis];
     const thirdPosIndex = axisToPosIndex[thirdAxis];

main.js

@@ -27,7 +27,7 @@ app.set(`port`, process.env.PORT);
 app.use(redirectToHttps);
 
 // support json encoded bodies
-app.use(express.json({limit: `50mb`}));
+app.use(express.json({ limit: `50mb` }));
 
 // enable compression
 app.use(compression({

package.json

@@ -57,7 +57,7 @@
     "eslint-plugin-json": "^1.3.2",
     "eslint-plugin-promise": "^4.0.1",
     "eslint-plugin-security": "^1.4.0",
-    "eslint-plugin-vue": "^5.1.0",
+    "eslint-plugin-vue": "^5.2.1",
     "jsdoc-to-markdown": "^4.0.1",
     "libxml-xsd": "^0.5.2",
     "minimist": "^1.2.0",

server/webhook.js

@@ -41,7 +41,7 @@ function startServer(port, deployment) {
   servers.push(new Promise((resolve, reject) => {
     http
       .createServer((request, response) => {
-        response.writeHead(200, {'Content-Type': `text/plain`});
+        response.writeHead(200, { 'Content-Type': `text/plain` });
         response.write(`Received`);
         response.end();
 

ui/components/download-button.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="{'download-button': true, 'big': big}">
+  <div :class="{ 'download-button': true, 'big': big }">
     <a href="#" class="title" @click.prevent>{{ title }}</a>
     <ul>
       <li v-for="plugin in exportPlugins" :key="plugin.key">

ui/components/editor-capability.vue

@@ -22,8 +22,8 @@
           :schema-property="properties.capability.dmxRange"
           :range-min="min"
           :range-max="max"
-          :start-hint="capabilities.length === 1 ? `${min}`: `start`"
-          :end-hint="capabilities.length === 1 ? `${max}`: `end`"
+          :start-hint="capabilities.length === 1 ? `${min}` : `start`"
+          :end-hint="capabilities.length === 1 ? `${max}` : `end`"
           :required="capabilities.length > 1"
           @start-updated="onStartUpdated"
           @end-updated="onEndUpdated" />

ui/components/editor-mode.vue

@@ -69,7 +69,7 @@
 
     <validate
       :state="formstate"
-      :custom="{'no-empty-channel-list': channelListNotEmpty}"
+      :custom="{ 'no-empty-channel-list': channelListNotEmpty }"
       tag="div"
       class="mode-channels">
       <draggable v-model="mode.channels" :options="dragOptions" :name="`mode-${index}-channels`">

ui/components/header.vue

@@ -3,7 +3,7 @@
     <nav>
       <div class="left-nav">
         <nuxt-link
-          :class="{'home-logo': true, 'hidden-by-search-field': searchFieldFocused}"
+          :class="{ 'home-logo': true, 'hidden-by-search-field': searchFieldFocused }"
           to="/"
           exact
           title="Home"

ui/components/property-input-boolean.vue

@@ -3,7 +3,7 @@
     ref="input"
     v-model="localValue"
     :required="required"
-    :class="{boolean: true, empty: value === null}">
+    :class="{ boolean: true, empty: value === null }">
     <option :value="null" :disabled="required">unknown</option>
     <option :value="true">yes</option>
     <option :value="false">no</option>

ui/components/property-input-entity.vue

@@ -17,7 +17,7 @@
       ref="select"
       v-model="selectedUnit"
       :required="required"
-      :class="{empty: selectedUnit === ``}"
+      :class="{ empty: selectedUnit === `` }"
       @input="unitSelected"
       @focus.native="onFocus"
       @blur.native="onBlur($event)">

ui/components/property-input-select.vue

@@ -3,7 +3,7 @@
     ref="input"
     v-model="localValue"
     :required="required"
-    :class="{empty: value === ``}">
+    :class="{ empty: value === `` }">
     <option :disabled="required" value="">unknown</option>
     <option
       v-for="item in schemaProperty.enum"

ui/pages/fixture-editor.vue

@@ -85,7 +85,7 @@
 
         <app-labeled-input
           :formstate="formstate"
-          :custom-validators="{'no-manufacturer-name': fixtureNameIsWithoutManufacturer}"
+          :custom-validators="{ 'no-manufacturer-name': fixtureNameIsWithoutManufacturer }"
           name="fixture-name"
           label="Name">
           <app-property-input-text