Changed the default order setting of vue/order-in-components rule. (#1181)

* Changed the default order setting of `vue/order-in-components` rule.

- Add options for Vue.js 3.x
  - `emits` to after `props`.
  - `setup` to after `emits`.
  - `beforeUnmount` and `unmounted` to LIFECYCLE_HOOKS.
  - `renderTracked` and `renderTriggered` to LIFECYCLE_HOOKS.

- Add options for Vue.js 2.x
  - `provide` and `inject` to after `mixins`.
  - `errorCaptured` to LIFECYCLE_HOOKS.

* Update require-explicit-emits

Author: ota-meshi

lib/rules/order-in-components.js

@@ -8,25 +8,54 @@ const utils = require('../utils')
 const traverseNodes = require('vue-eslint-parser').AST.traverseNodes
 
 const defaultOrder = [
+  // Side Effects (triggers effects outside the component)
   'el',
+
+  // Global Awareness (requires knowledge beyond the component)
   'name',
   'parent',
+
+  // Component Type (changes the type of the component)
   'functional',
+
+  // Template Modifiers (changes the way templates are compiled)
   ['delimiters', 'comments'],
+
+  // Template Dependencies (assets used in the template)
   ['components', 'directives', 'filters'],
+
+  // Composition (merges properties into the options)
   'extends',
   'mixins',
+  ['provide', 'inject'], // for Vue.js 2.2.0+
+
+  // Interface (the interface to the component)
   'inheritAttrs',
   'model',
   ['props', 'propsData'],
-  'fetch',
-  'asyncData',
+  'emits', // for Vue.js 3.x
+
+  // Note:
+  // The `setup` option is included in the "Composition" category,
+  // but the behavior of the `setup` option requires the definition of "Interface",
+  // so we prefer to put the `setup` option after the "Interface".
+  'setup', // for Vue 3.x
+
+  // Local State (local reactive properties)
+  'fetch', // for Nuxt
+  'asyncData', // for Nuxt
   'data',
   'computed',
+
+  // Events (callbacks triggered by reactive events)
   'watch',
   'LIFECYCLE_HOOKS',
+
+  // Non-Reactive Properties (instance properties independent of the reactivity system)
   'methods',
-  'head',
+
+  // Rendering (the declarative description of the component output)
+  'head', // for Nuxt
   ['template', 'render'],
   'renderError'
 ]
@@ -41,8 +70,13 @@ const groups = {
     'updated',
     'activated',
     'deactivated',
+    'beforeUnmount', // for Vue.js 3.x
+    'unmounted', // for Vue.js 3.x
     'beforeDestroy',
-    'destroyed'
+    'destroyed',
+    'renderTracked', // for Vue.js 3.x
+    'renderTriggered', // for Vue.js 3.x
+    'errorCaptured' // for Vue.js 2.5.0+
   ]
 }
 

lib/rules/require-explicit-emits.js

@@ -24,8 +24,6 @@ const utils = require('../utils')
 // ------------------------------------------------------------------------------
 
 const FIX_EMITS_AFTER_OPTIONS = [
-  'props',
-  'propsData',
   'setup',
   'data',
   'computed',
@@ -44,8 +42,13 @@ const FIX_EMITS_AFTER_OPTIONS = [
   'updated',
   'activated',
   'deactivated',
+  'beforeUnmount',
+  'unmounted',
   'beforeDestroy',
-  'destroyed'
+  'destroyed',
+  'renderTracked',
+  'renderTriggered',
+  'errorCaptured'
 ]
 
 /**

tests/lib/rules/order-in-components.js

@@ -35,6 +35,49 @@ ruleTester.run('order-in-components', rule, {
       `,
       parserOptions
     },
+    {
+      filename: 'example.vue',
+      code: `
+        export default {
+          el,
+          name,
+          parent,
+          functional,
+          delimiters, comments,
+          components, directives, filters,
+          extends: MyComp,
+          mixins,
+          provide, inject,
+          inheritAttrs,
+          model,
+          props, propsData,
+          emits,
+          setup,
+          data,
+          computed,
+          watch,
+          beforeCreate,
+          created,
+          beforeMount,
+          mounted,
+          beforeUpdate,
+          updated,
+          activated,
+          deactivated,
+          beforeUnmount,
+          unmounted,
+          beforeDestroy,
+          destroyed,
+          renderTracked,
+          renderTriggered,
+          errorCaptured,
+          methods,
+          template, render,
+          renderError,
+        };
+      `,
+      parserOptions
+    },
     {
       filename: 'test.vue',
       code: `

tests/lib/rules/require-explicit-emits.js

@@ -1282,8 +1282,62 @@ emits: {'foo': null}
       <script>
       export default {
         name: '',
+        props: {},
+emits: ['foo']
+      }
+      </script>
+      `
+            },
+            {
+              desc:
+                'Add the `emits` option with object syntax and define "foo" event.',
+              output: `
+      <template>
+        <div @click="$emit('foo')"/>
+      </template>
+      <script>
+      export default {
+        name: '',
+        props: {},
+emits: {'foo': null}
+      }
+      </script>
+      `
+            }
+          ]
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div @click="$emit('foo')"/>
+      </template>
+      <script>
+      export default {
+        name: '',
+        watch: {}
+      }
+      </script>
+      `,
+      errors: [
+        {
+          message:
+            'The "foo" event has been triggered but not declared on `emits` option.',
+          suggestions: [
+            {
+              desc:
+                'Add the `emits` option with array syntax and define "foo" event.',
+              output: `
+      <template>
+        <div @click="$emit('foo')"/>
+      </template>
+      <script>
+      export default {
+        name: '',
 emits: ['foo'],
-        props: {}
+        watch: {}
       }
       </script>
       `
@@ -1299,7 +1353,7 @@ emits: ['foo'],
       export default {
         name: '',
 emits: {'foo': null},
-        props: {}
+        watch: {}
       }
       </script>
       `