chore: lint vue-app templates (#4689)

.circleci/config.yml

@@ -109,6 +109,16 @@ jobs:
           paths:
             - test/fixtures
 
+  lint-app:
+    <<: *defaults
+    steps:
+      - checkout
+      - attach_workspace:
+          at: ~/project
+      - run:
+          name: Lint vue-app templates
+          command: yarn lint:app
+
   # --------------------------------------------------------------------------
   # Phase 3: Unit and E2E tests
   # --------------------------------------------------------------------------
@@ -148,17 +158,18 @@ workflows:
   version: 2
 
   # Build and test after each commit
-  # Manually release on releas branches
+  # Manually release on release branches
   commit:
     jobs:
       - setup
       - lint:       { requires: [setup] }
       - audit:      { requires: [setup] }
       - build:      { requires: [setup] }
+      - lint-app:   { requires: [build] }
       - test-unit:  { requires: [build] }
       - test-e2e:   { requires: [build] }
       - release-commit:
-          requires: [build, lint, audit, test-unit, test-e2e]
+          requires: [build, lint, lint-app, audit, test-unit, test-e2e]
           filters:
             <<: *release_branches
 
@@ -169,10 +180,11 @@ workflows:
       - lint:       { requires: [setup] }
       - audit:      { requires: [setup] }
       - build:      { requires: [setup] }
+      - lint-app:   { requires: [build] }
       - test-unit:  { requires: [build] }
       - test-e2e:   { requires: [build] }
       - release-nightly:
-          requires: [build, lint, audit, test-unit, test-e2e]
+          requires: [build, lint, lint-app, audit, test-unit, test-e2e]
     triggers:
       - schedule:
           cron: "0 0 * * *"

.eslintrc.js

@@ -13,9 +13,9 @@ module.exports = {
   overrides: [{
     files: [ 'test/fixtures/*/.nuxt*/**' ],
     rules: {
-      'vue/name-property-casing': ['error', 'kebab-case']
+      'vue/name-property-casing': 'error'
     }
-  },{
+  }, {
     files: [
       'examples/storybook/**',
       'examples/with-element-ui/**',
@@ -29,9 +29,9 @@ module.exports = {
       'vue/component-name-in-template-casing': ['warn', 'kebab-case']
     }
   }, {
-    files: [ 'test/fixtures/*/.nuxt*/**/+(App|index).js' ],
+    files: [ 'test/fixtures/*/.nuxt*/**/+(App|index|server|client).js' ],
     rules: {
-      'import/order': 'ignore'
+      'import/order': 'off'
     }
   }, {
     files: [ 'test/fixtures/*/.nuxt*/**/client.js' ],
@@ -47,7 +47,18 @@ module.exports = {
     files: [ 'test/fixtures/*/.nuxt*/**/*.html' ],
     rules: {
       'semi': ['error', 'always', { 'omitLastInOneLineBlock': true }],
-      'no-var': 'warn'
+      'no-var': 'off'
+    }
+  }, {
+    files: [ 'test/fixtures/*/.nuxt*/**/nuxt-error.vue' ],
+    rules: {
+      'vue/singleline-html-element-content-newline': 'off'
+    }
+  }, {
+    // might be removed in the future, see https://github.com/standard/eslint-plugin-standard/issues/27
+    files: [ 'test/fixtures/*/.nuxt*/**/nuxt-link.client.js' ],
+    rules: {
+      'standard/no-callback-literal': 'off'
     }
   }]
 }

package.json

@@ -13,7 +13,7 @@
     "dev": "node -r esm ./scripts/dev",
     "coverage": "codecov",
     "lint": "eslint --ext .js,.mjs,.vue .",
-    "lint:app": "eslint-multiplexer eslint --ignore-path packages/app/template/.eslintignore 'test/fixtures/!(missing-plugin)/.nuxt!(-dev)/**' | eslint-multiplexer -b",
+    "lint:app": "eslint-multiplexer eslint --ignore-path packages/vue-app/template/.eslintignore 'test/fixtures/!(missing-plugin)/.nuxt!(-dev)/**' | eslint-multiplexer -b",
     "nuxt": "node -r esm ./packages/cli/bin/nuxt-cli.js",
     "test": "yarn test:fixtures && yarn test:unit && yarn test:types",
     "test:fixtures": "jest test/fixtures",

packages/utils/src/serialize.js

@@ -5,17 +5,17 @@ export function serializeFunction(func) {
   let open = false
   return serialize(func)
     .replace(serializeFunction.assignmentRE, (_, spaces) => {
-      return `${spaces}:function(`
+      return `${spaces}: function (`
     })
     .replace(serializeFunction.internalFunctionRE, (_, spaces, name, args) => {
       if (open) {
-        return `${spaces}${name}:function(${args}) {`
+        return `${spaces}${name}: function (${args}) {`
       } else {
         open = true
         return _
       }
     })
-    .replace(`${func.name}(`, 'function(')
+    .replace(`${func.name}(`, 'function (')
 }
 
 serializeFunction.internalFunctionRE = /^(\s*)(?!(?:if)|(?:for)|(?:while)|(?:switch))(\w+)\s*\((.*?)\)\s*\{/gm

packages/vue-app/template/App.js

@@ -17,9 +17,9 @@ const layouts = { <%= Object.keys(layouts).map(key => `"_${key}": _${hash(key)}`
 <% if (splitChunks.layouts) { %>let resolvedLayouts = {}<% } %>
 
 export default {
-  <%= isTest ? '/* eslint-disable quotes, semi, indent, comma-spacing, key-spacing, object-curly-spacing, object-property-newline, arrow-parens */' : '' %>
+  <%= isTest ? '/* eslint-disable quotes, semi, indent, comma-spacing, key-spacing, object-curly-spacing, space-before-function-paren  */' : '' %>
   head: <%= serializeFunction(head) %>,
-  <%= isTest ? '/* eslint-enable quotes, semi, indent, comma-spacing, key-spacing, object-curly-spacing, object-property-newline, arrow-parens */' : '' %>
+  <%= isTest ? '/* eslint-enable quotes, semi, indent, comma-spacing, key-spacing, object-curly-spacing, space-before-function-paren */' : '' %>
   render(h, props) {
     <% if (loading) { %>const loadingEl = h('NuxtLoading', { ref: 'loading' })<% } %>
     const layoutEl = h(this.layout || 'nuxt')

packages/vue-app/template/client.js

@@ -22,14 +22,11 @@ import NuxtLink from './components/nuxt-link.<%= router.prefetchLinks ? "client"
 Vue.component(NuxtLink.name, NuxtLink)
 Vue.component('NLink', NuxtLink)
 
-const noopData = () => { return {} }
-const noopFetch = () => {}
-
 // Global shared references
 let _lastPaths = []
 let app
 let router
-<% if (store) { %>let store<% } %>
+<% if (store) { %>let store<%= isTest ? '// eslint-disable-line no-unused-vars' : '' %><% } %>
 
 // Try to rehydrate SSR data from window
 const NUXT = window.<%= globals.context %> || {}
@@ -150,8 +147,8 @@ async function loadAsyncComponents(to, from, next) {
     <% } %>
     // Call next()
     next()
-  } catch (err) {
+  } catch (error) {
-    err = err || {}
+    const err = error || {}
     const statusCode = err.statusCode || err.status || (err.response && err.response.status) || 500
     const message = err.message || ''
 
@@ -524,6 +521,9 @@ function nuxtReady(_app) {
 }
 
 <% if (isDev) { %>
+const noopData = () => { return {} }
+const noopFetch = () => {}
+
 // Special hot reload with asyncData(context)
 function getNuxtChildComponents($parent, $components = []) {
   $parent.$children.forEach(($child) => {

packages/vue-app/template/components/nuxt-child.js

@@ -8,7 +8,10 @@ export default {
       default: ''
     },
     keepAlive: Boolean,
-    keepAliveProps: Object
+    keepAliveProps: {
+      type: Object,
+      default: undefined
+    }
   },
   render(h, { parent, data, props }) {
     data.nuxtChild = true

packages/vue-app/template/components/nuxt-error.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="__nuxt-error-page">
     <div class="error">
-      <svg xmlns="http://www.w3.org/2000/svg" width="90" height="90" fill="#DBE1EC" viewBox="0 0 48 48"><path d="M22 30h4v4h-4zm0-16h4v12h-4zm1.99-10C12.94 4 4 12.95 4 24s8.94 20 19.99 20S44 35.05 44 24 35.04 4 23.99 4zM24 40c-8.84 0-16-7.16-16-16S15.16 8 24 8s16 7.16 16 16-7.16 16-16 16z" /></svg>
+      <svg xmlns="http://www.w3.org/2000/svg" width="90" height="90" fill="#DBE1EC" viewBox="0 0 48 48">
+        <path d="M22 30h4v4h-4zm0-16h4v12h-4zm1.99-10C12.94 4 4 12.95 4 24s8.94 20 19.99 20S44 35.05 44 24 35.04 4 23.99 4zM24 40c-8.84 0-16-7.16-16-16S15.16 8 24 8s16 7.16 16 16-7.16 16-16 16z" />
+      </svg>
 
       <div class="title">{{ message }}</div>
       <p v-if="statusCode === 404" class="description">

packages/vue-app/template/components/nuxt-link.client.js

@@ -1,4 +1,3 @@
-<%= isTest ? '// @vue/component' : '' %>
 import Vue from 'vue'
 
 const requestIdleCallback = window.requestIdleCallback ||
@@ -9,11 +8,11 @@ const requestIdleCallback = window.requestIdleCallback ||
         didTimeout: false,
         timeRemaining: function () {
           return Math.max(0, 50 - (Date.now() - start))
-        },
+        }
       })
     }, 1)
   }
-const observer = window.IntersectionObserver && new window.IntersectionObserver(entries => {
+const observer = window.IntersectionObserver && new window.IntersectionObserver((entries) => {
   entries.forEach(({ intersectionRatio, target: link }) => {
     if (intersectionRatio <= 0) {
       return
@@ -22,9 +21,10 @@ const observer = window.IntersectionObserver && new window.IntersectionObserver(
   })
 })
 
+<%= isTest ? '// @vue/component' : '' %>
 export default {
-  extends: Vue.component('RouterLink'),
   name: 'NuxtLink',
+  extends: Vue.component('RouterLink'),
   props: {
     noPrefetch: {
       type: Boolean,
@@ -72,9 +72,9 @@ export default {
     },
     getPrefetchComponents() {
       const ref = this.$router.resolve(this.to, this.$route, this.append)
-      const Components = ref.resolved.matched.map((r) => r.components.default)
+      const Components = ref.resolved.matched.map(r => r.components.default)
 
-      return Components.filter((Component) => typeof Component === 'function' && !Component.options && !Component.__prefetched)
+      return Components.filter(Component => typeof Component === 'function' && !Component.options && !Component.__prefetched)
     },
     prefetch() {
       if (!this.canPrefetch()) {

packages/vue-app/template/components/nuxt-link.server.js

@@ -1,9 +1,9 @@
-<%= isTest ? '// @vue/component' : '' %>
 import Vue from 'vue'
 
+<%= isTest ? '// @vue/component' : '' %>
 export default {
-  extends: Vue.component('RouterLink'),
   name: 'NuxtLink',
+  extends: Vue.component('RouterLink'),
   props: {
     noPrefetch: {
       type: Boolean,

packages/vue-app/template/components/nuxt.js

@@ -1,4 +1,3 @@
-<%= isTest ? '// @vue/component' : '' %>
 import Vue from 'vue'
 import { compile } from '../utils'
 
@@ -13,17 +12,44 @@ import NuxtError from './nuxt-error.vue'
 <% } %>
 import NuxtChild from './nuxt-child'
 
+<%= isTest ? '// @vue/component' : '' %>
 export default {
   name: 'Nuxt',
+  components: {
+    NuxtChild,
+    NuxtError
+  },
   props: {
-    nuxtChildKey: String,
+    nuxtChildKey: {
+      type: String,
+      default: undefined
+    },
     keepAlive: Boolean,
-    keepAliveProps: Object,
+    keepAliveProps: {
+      type: Object,
+      default: undefined
+    },
     name: {
       type: String,
       default: 'default'
     }
   },
+  computed: {
+    routerViewKey() {
+      // If nuxtChildKey prop is given or current route has children
+      if (typeof this.nuxtChildKey !== 'undefined' || this.$route.matched.length > 1) {
+        return this.nuxtChildKey || compile(this.$route.matched[0].path)(this.$route.params)
+      }
+      const Component = this.$route.matched[0] && this.$route.matched[0].components.default
+      if (Component && Component.options && Component.options.key) {
+        return (typeof Component.options.key === 'function' ? Component.options.key(this.$route) : Component.options.key)
+      }
+      return this.$route.path
+    }
+  },
+  beforeCreate() {
+    Vue.util.defineReactive(this, 'nuxt', this.$root.$options.nuxt)
+  },
   render(h) {
     // If there is some error
     if (this.nuxt.err) {
@@ -38,25 +64,5 @@ export default {
       key: this.routerViewKey,
       props: this.$props
     })
-  },
-  beforeCreate() {
-    Vue.util.defineReactive(this, 'nuxt', this.$root.$options.nuxt)
-  },
-  computed: {
-    routerViewKey() {
-      // If nuxtChildKey prop is given or current route has children
-      if (typeof this.nuxtChildKey !== 'undefined' || this.$route.matched.length > 1) {
-        return this.nuxtChildKey || compile(this.$route.matched[0].path)(this.$route.params)
-      }
-      const Component = this.$route.matched[0] && this.$route.matched[0].components.default
-      if (Component && Component.options && Component.options.key) {
-        return (typeof Component.options.key === 'function' ? Component.options.key(this.$route) : Component.options.key)
-      }
-      return this.$route.path
-    }
-  },
-  components: {
-    NuxtChild,
-    NuxtError
   }
 }

packages/vue-app/template/router.js

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-import { interopDefault } from './utils'
+import { interopDefault } from './utils'<%= isTest ? '// eslint-disable-line no-unused-vars' : '' %>
 
 <% function recursiveRoutes(routes, tab, components, indentCount) {
   let res = '', resMap = ''
@@ -143,9 +143,9 @@ export function createRouter() {
     linkActiveClass: '<%= router.linkActiveClass %>',
     linkExactActiveClass: '<%= router.linkExactActiveClass %>',
     scrollBehavior,
-    <%= isTest ? '/* eslint-disable quotes */' : '' %>
+    <%= isTest ? '/* eslint-disable quotes, object-curly-spacing, key-spacing */' : '' %>
     routes: [<%= _routes %>],
-    <%= isTest ? '/* eslint-enable quotes */' : '' %>
+    <%= isTest ? '/* eslint-enable quotes, object-curly-spacing, key-spacing */' : '' %>
     <% if (router.parseQuery) { %>parseQuery: <%= serializeFunction(router.parseQuery) %>,<% } %>
     <% if (router.stringifyQuery) { %>stringifyQuery: <%= serializeFunction(router.stringifyQuery) %>,<% } %>
     fallback: <%= router.fallback %>

packages/vue-app/template/server.js

@@ -3,7 +3,7 @@ import Vue from 'vue'
 import middleware from './middleware.js'
 import { applyAsyncData, getMatchedComponents, middlewareSeries, promisify, urlJoin } from './utils.js'
 import { createApp, NuxtError } from './index.js'
-import NuxtLink from './components/nuxt-link.server.js'
+import NuxtLink from './components/nuxt-link.server.js' // should be included after ./index.js
 
 // Component: <NuxtLink>
 Vue.component(NuxtLink.name, NuxtLink)
@@ -12,7 +12,7 @@ Vue.component('NLink', NuxtLink)
 const debug = require('debug')('nuxt:render')
 debug.color = 4 // force blue color
 
-const isDev = <%= isDev %>
+const isDev = <%= isDev %><%= isTest ? '// eslint-disable-line no-unused-vars' : '' %>
 
 const noopApp = () => new Vue({ render: h => h('div') })
 

packages/vue-app/template/store.js

@@ -5,9 +5,9 @@ Vue.use(Vuex)
 
 let storeData = {}
 
-let files;
+let files
 
-void function updateModules() {
+void (function updateModules() {
   files = require.context('@/<%= dir.store %>', true, /^\.\/(?!<%= ignorePrefix %>)[^.]+\.(<%= extensions %>)$/)
   const filenames = files.keys()
 
@@ -82,12 +82,11 @@ void function updateModules() {
         window.<%= globals.nuxt %>.$store.hotUpdate(storeData)
       })
     }<% } %>
-  }
+  } else {
-  else {
     const log = (process.server ? require('consola') : console)
     log.warn('Classic mode for store/ is deprecated and will be removed in Nuxt 3.')
   }
-}()
+})()
 
 // createStore
 export const createStore = storeData instanceof Function ? storeData : () => {