chore(ui): update linter and add prefer-const (quasarframework#7435)

Author: pdanpdan

ui/.eslintrc.js

@@ -26,6 +26,7 @@ module.exports = {
   // add your custom rules here
   'rules': {
     'brace-style': [2, 'stroustrup', { 'allowSingleLine': true }],
+    'prefer-const': 2,
 
     'vue/max-attributes-per-line': 'off',
     'vue/valid-v-for': 'off',
@@ -36,7 +37,6 @@ module.exports = {
     'vue/require-render-return': 'off',
     'vue/singleline-html-element-content-newline': 'off',
     'vue/no-side-effects-in-computed-properties': 'off',
-    'vue/return-in-computed-property': 'off',
     'vue/array-bracket-spacing': 'off',
     'vue/object-curly-spacing': 'off',
     'vue/script-indent': 'off',

ui/dev/src/pages/components/data-table-part1.vue

@@ -954,10 +954,10 @@ export default {
       setTimeout(() => {
         this.serverPagination = props.pagination
 
-        let
+        const
           table = this.$refs.server,
-          rows = this.data.slice(),
           { page, rowsPerPage, sortBy, descending } = props.pagination
+        let rows = this.data.slice()
 
         if (props.filter) {
           rows = table.filterMethod(rows, props.filter)

ui/dev/src/pages/components/data-table-part2.vue

@@ -20,7 +20,7 @@
       bordered
       :dense="dense"
     >
-      <template v-slot:top-right="props">
+      <template v-slot:top-right>
         <q-input borderless dense debounce="300" v-model="filter" placeholder="Search">
           <q-icon slot="append" name="search" />
         </q-input>
@@ -91,7 +91,7 @@
       row-key="name"
       color="primary"
     >
-      <template v-slot:top="props">
+      <template v-slot:top>
         <q-btn flat dense color="primary" :disable="loadingDyn" icon="add" label="Add row" @click="addRow" />
         <q-btn class="on-right" flat dense color="primary" :disable="loadingDyn" icon="remove" label="Remove row" @click="removeRow" />
         <q-btn class="on-right" flat dense color="primary" :disable="loadingDyn" icon="refresh" label="Refresh" />
@@ -494,10 +494,10 @@ export default {
       setTimeout(() => {
         this.serverPagination = props.pagination
 
-        let
+        const
           table = this.$refs.server,
-          rows = this.data.slice(),
           { page, rowsPerPage, sortBy, descending } = props.pagination
+        let rows = this.data.slice()
 
         if (props.filter) {
           console.log('filter hit')

ui/dev/src/pages/components/menu.vue

@@ -574,7 +574,7 @@
 <script>
 export default {
   data () {
-    let list = []
+    const list = []
     for (let i = 0; i < 26 * 30; i += 1) {
       const c = String.fromCharCode(97 + (i % 26))
       const v = `${c}${c}${c}${c}${c}#${i}`

ui/dev/src/pages/web-tests/fast-table-test.vue

@@ -172,7 +172,7 @@ export default {
   computed: {
     xxl () {
       const rand = () => Math.floor((Math.random() % 450) * 450)
-      let data = clone(this.data)
+      const data = clone(this.data)
       for (let i = 0; i < 500; i++) {
         data.push({
           name: uid(),

ui/dev/src/router/routes.js

@@ -18,7 +18,7 @@ const metaChildren = [
   { path: 'third', component: load('meta/pages/third') }
 ]
 
-let routes = [
+const routes = [
   { path: '/', component: load('Index') },
   {
     path: '/meta/layout_1',

ui/package.json

@@ -66,10 +66,10 @@
     "@rollup/plugin-node-resolve": "^7.1.0",
     "babel-eslint": "^10.0.2",
     "babel-preset-es2015-rollup": "^3.0.0",
-    "eslint": "^5.15.3",
+    "eslint": "^7.4.0",
     "eslint-config-standard": "^12.0.0",
     "eslint-friendly-formatter": "^4.0.1",
-    "eslint-loader": "^2.2.1",
+    "eslint-loader": "^4.0.2",
     "eslint-plugin-import": "^2.18.2",
     "eslint-plugin-node": "^9.1.0",
     "eslint-plugin-promise": "^4.2.1",

ui/src/body.js

@@ -67,7 +67,7 @@ function clientUpdate () {
 }
 
 function setColors (brand) {
-  for (let color in brand) {
+  for (const color in brand) {
     setBrand(color, brand[color])
   }
 }

ui/src/components/ajax-bar/QAjaxBar.js

@@ -113,7 +113,7 @@ export default Vue.extend({
     style () {
       const active = this.onScreen
 
-      let o = translate({
+      const o = translate({
         p: this.progress,
         pos: this.position,
         active,

ui/src/components/dialog-bottom-sheet/BottomSheet.js

@@ -135,7 +135,7 @@ export default Vue.extend({
   },
 
   render (h) {
-    let child = []
+    const child = []
 
     this.title && child.push(
       h(QCardSection, {