Change document style for new rules added & Fixed new rule test cases…

…to work with eslint v6 (#1012) * Change document style for new rules added & Fixed new rule test cases to work with eslint v6 * Fixed valid-v-bind-sync * Run update script * Fixed test cases
vuejs · Dec 26, 2019 · ec94d6a · ec94d6a
1 parent 603a6e1
commit ec94d6a
Show file tree

Hide file tree

Showing 21 changed files with 123 additions and 31 deletions.
diff --git a/docs/rules/README.md b/docs/rules/README.md
@@ -145,6 +145,7 @@ For example:
 | [vue/brace-style](./brace-style.md) | enforce consistent brace style for blocks | :wrench: |
 | [vue/camelcase](./camelcase.md) | enforce camelcase naming convention |  |
 | [vue/comma-dangle](./comma-dangle.md) | require or disallow trailing commas | :wrench: |
+| [vue/component-definition-name-casing](./component-definition-name-casing.md) | enforce specific casing for component definition name | :wrench: |
 | [vue/component-name-in-template-casing](./component-name-in-template-casing.md) | enforce specific casing for the component naming style in template | :wrench: |
 | [vue/component-tags-order](./component-tags-order.md) | enforce order of component top-level elements |  |
 | [vue/dot-location](./dot-location.md) | enforce consistent newlines before and after dots | :wrench: |
@@ -153,8 +154,8 @@ For example:
 | [vue/keyword-spacing](./keyword-spacing.md) | enforce consistent spacing before and after keywords | :wrench: |
 | [vue/match-component-file-name](./match-component-file-name.md) | require component name property to match its file name |  |
 | [vue/no-boolean-default](./no-boolean-default.md) | disallow boolean defaults | :wrench: |
-| [vue/no-deprecated-slot-attribute](./no-deprecated-slot-attribute.md) | disallow deprecated `slot` attribute (in Vue.js 2.6.0+) | :wrench: |
 | [vue/no-deprecated-scope-attribute](./no-deprecated-scope-attribute.md) | disallow deprecated `scope` attribute (in Vue.js 2.5.0+) | :wrench: |
+| [vue/no-deprecated-slot-attribute](./no-deprecated-slot-attribute.md) | disallow deprecated `slot` attribute (in Vue.js 2.6.0+) | :wrench: |
 | [vue/no-deprecated-slot-scope-attribute](./no-deprecated-slot-scope-attribute.md) | disallow deprecated `slot-scope` attribute (in Vue.js 2.6.0+) | :wrench: |
 | [vue/no-empty-pattern](./no-empty-pattern.md) | disallow empty destructuring patterns |  |
 | [vue/no-reserved-component-names](./no-reserved-component-names.md) | disallow the use of reserved names in component definitions |  |

diff --git a/docs/rules/component-definition-name-casing.md b/docs/rules/component-definition-name-casing.md
@@ -1,47 +1,124 @@
-# enforce specific casing for component definition name (vue/component-definition-name-casing)
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/component-definition-name-casing
+description: enforce specific casing for component definition name
+---
+# vue/component-definition-name-casing
+> enforce specific casing for component definition name
 
 - :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
 
+## :book: Rule Details
+
 Define a style for component definition name casing for consistency purposes.
 
-## :book: Rule Details
+## :wrench: Options
 
-:+1: Examples of **correct** code for `PascalCase`:
+Default casing is set to `PascalCase`.
 
-```js
+```json
+{
+  "vue/component-definition-name-casing": ["error", "PascalCase" | "kebab-case"]
+}
+```
+
+- `"PascalCase"` (default) ... enforce component definition names to pascal case.
+- `"kebab-case"` ... enforce component definition names to kebab case.
+
+### `"PascalCase" (default)
+
+<eslint-code-block fix :rules="{'vue/component-definition-name-casing': ['error']}">
+
+```vue
+<script>
 export default {
+  /* ✓ GOOD */
   name: 'MyComponent'
 }
+</script>
 ```
+
+</eslint-code-block>
+
+<eslint-code-block fix :rules="{'vue/component-definition-name-casing': ['error']}">
+
+```vue
+<script>
+export default {
+  /* ✗ BAD */
+  name: 'my-component'
+}
+</script>
+```
+
+</eslint-code-block>
+
+<eslint-code-block fix language="javascript" filename="src/MyComponent.js" :rules="{'vue/component-definition-name-casing': ['error']}">
+
 ```js
+/* ✓ GOOD */
 Vue.component('MyComponent', {
 
+})
+
+/* ✗ BAD */
+Vue.component('my-component', {
+
 })
 ```
 
-:+1: Examples of **correct** code for `kebab-case`:
+</eslint-code-block>
 
-```js
+### `"kebab-case"
+
+<eslint-code-block fix :rules="{'vue/component-definition-name-casing': ['error', 'kebab-case']}">
+
+```vue
+<script>
 export default {
+  /* ✓ GOOD */
   name: 'my-component'
 }
+</script>
 ```
+
+</eslint-code-block>
+
+<eslint-code-block fix :rules="{'vue/component-definition-name-casing': ['error', 'kebab-case']}">
+
+```vue
+<script>
+export default {
+  /* ✗ BAD */
+  name: 'MyComponent'
+}
+</script>
+```
+
+</eslint-code-block>
+
+<eslint-code-block fix language="javascript" filename="src/MyComponent.js" :rules="{'vue/component-definition-name-casing': ['error', 'kebab-case']}">
+
 ```js
+/* ✓ GOOD */
 Vue.component('my-component', {
 
+})
+
+/* ✗ BAD */
+Vue.component('MyComponent', {
+
 })
 ```
 
-## :wrench: Options
+</eslint-code-block>
 
-Default casing is set to `PascalCase`.
+## :books: Further reading
 
-```json
-{
-  "vue/component-definition-name-casing": ["error", "PascalCase|kebab-case"]
-}
-```
+- [Style guide - Component name casing in JS/JSX](https://vuejs.org/v2/style-guide/#Component-name-casing-in-JS-JSX-strongly-recommended)
 
-## Related links
+## :mag: Implementation
 
-- [Style guide - Component name casing in JS/JSX](https://vuejs.org/v2/style-guide/#Component-name-casing-in-JS-JSX-strongly-recommended)
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/component-definition-name-casing.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/component-definition-name-casing.js)
diff --git a/docs/rules/name-property-casing.md b/docs/rules/name-property-casing.md
@@ -9,7 +9,6 @@ description: enforce specific casing for the name property in Vue components
 
 - :gear: This rule is included in `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
 - :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
-- :warning: This rule was **deprecated** and replaced by [vue/component-definition-name-casing](component-definition-name-casing.md) rule.
 
 ## :book: Rule Details
 

diff --git a/docs/rules/no-reserved-component-names.md b/docs/rules/no-reserved-component-names.md
@@ -24,6 +24,10 @@ export default {
 
 </eslint-code-block>
 
+## :wrench: Options
+
+Nothing.
+
 ## :books: Further reading
 
 - [List of html elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)

diff --git a/lib/index.js b/lib/index.js
@@ -16,6 +16,7 @@ module.exports = {
     'camelcase': require('./rules/camelcase'),
     'comma-dangle': require('./rules/comma-dangle'),
     'comment-directive': require('./rules/comment-directive'),
+    'component-definition-name-casing': require('./rules/component-definition-name-casing'),
     'component-name-in-template-casing': require('./rules/component-name-in-template-casing'),
     'component-tags-order': require('./rules/component-tags-order'),
     'dot-location': require('./rules/dot-location'),
@@ -37,8 +38,8 @@ module.exports = {
     'no-async-in-computed-properties': require('./rules/no-async-in-computed-properties'),
     'no-boolean-default': require('./rules/no-boolean-default'),
     'no-confusing-v-for-v-if': require('./rules/no-confusing-v-for-v-if'),
-    'no-deprecated-slot-attribute': require('./rules/no-deprecated-slot-attribute'),
     'no-deprecated-scope-attribute': require('./rules/no-deprecated-scope-attribute'),
+    'no-deprecated-slot-attribute': require('./rules/no-deprecated-slot-attribute'),
     'no-deprecated-slot-scope-attribute': require('./rules/no-deprecated-slot-scope-attribute'),
     'no-dupe-keys': require('./rules/no-dupe-keys'),
     'no-duplicate-attributes': require('./rules/no-duplicate-attributes'),

diff --git a/lib/rules/component-definition-name-casing.js b/lib/rules/component-definition-name-casing.js
@@ -18,7 +18,9 @@ module.exports = {
     docs: {
       description: 'enforce specific casing for component definition name',
       category: undefined,
-      url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v5.0.0-beta.5/docs/rules/component-definition-name-casing.md'
+      // TODO Change with major version.
+      // category: 'strongly-recommended',
+      url: 'https://eslint.vuejs.org/rules/component-definition-name-casing.html'
     },
     fixable: 'code', // or "code" or "whitespace"
     schema: [

diff --git a/lib/rules/component-tags-order.js b/lib/rules/component-tags-order.js
@@ -22,6 +22,8 @@ module.exports = {
     docs: {
       description: 'enforce order of component top-level elements',
       category: undefined,
+      // TODO Change with major version.
+      // category: 'recommended',
       url: 'https://eslint.vuejs.org/rules/component-tags-order.html'
     },
     fixable: null,

diff --git a/lib/rules/name-property-casing.js b/lib/rules/name-property-casing.js
@@ -20,8 +20,8 @@ module.exports = {
       category: 'strongly-recommended',
       url: 'https://eslint.vuejs.org/rules/name-property-casing.html'
     },
-    deprecated: true,
-    replacedBy: ['component-definition-name-casing'],
+    // deprecated: true, // TODO Change with major version.
+    // replacedBy: ['component-definition-name-casing'], // TODO Change with major version.
     fixable: 'code', // or "code" or "whitespace"
     schema: [
       {

diff --git a/lib/rules/v-slot-style.js b/lib/rules/v-slot-style.js
@@ -78,6 +78,8 @@ module.exports = {
     docs: {
       description: 'enforce `v-slot` directive style',
       category: undefined, // strongly-recommended
+      // TODO Change with major version.
+      // category: 'strongly-recommended',
       url: 'https://eslint.vuejs.org/rules/v-slot-style.html'
     },
     fixable: 'code',

diff --git a/lib/rules/valid-v-bind-sync.js b/lib/rules/valid-v-bind-sync.js
@@ -53,6 +53,8 @@ module.exports = {
     docs: {
       description: 'enforce valid `.sync` modifier on `v-bind` directives',
       category: undefined,
+      // TODO Change with major version.
+      // category: 'essential',
       url: 'https://eslint.vuejs.org/rules/valid-v-bind-sync.html'
     },
     fixable: null,

diff --git a/lib/rules/valid-v-slot.js b/lib/rules/valid-v-slot.js
@@ -143,6 +143,8 @@ module.exports = {
     docs: {
       description: 'enforce valid `v-slot` directives',
       category: undefined, // essential
+      // TODO Change with major version.
+      // category: 'essential',
       url: 'https://eslint.vuejs.org/rules/valid-v-slot.html'
     },
     fixable: null,

diff --git a/tests/lib/rules/component-definition-name-casing.js b/tests/lib/rules/component-definition-name-casing.js
@@ -291,7 +291,7 @@ ruleTester.run('component-definition-name-casing', rule, {
       code: `(Vue as VueConstructor<Vue>).component('foo-bar', component)`,
       output: `(Vue as VueConstructor<Vue>).component('FooBar', component)`,
       parserOptions,
-      parser: 'typescript-eslint-parser',
+      parser: require.resolve('@typescript-eslint/parser'),
       errors: [{
         message: 'Property name "foo-bar" is not PascalCase.',
         type: 'Literal',

diff --git a/tests/lib/rules/no-deprecated-slot-attribute.js b/tests/lib/rules/no-deprecated-slot-attribute.js
@@ -4,7 +4,7 @@ const RuleTester = require('eslint').RuleTester
 const rule = require('../../../lib/rules/no-deprecated-slot-attribute.js')
 
 const tester = new RuleTester({
-  parser: 'vue-eslint-parser',
+  parser: require.resolve('vue-eslint-parser'),
   parserOptions: {
     ecmaVersion: 2015
   }

diff --git a/tests/lib/rules/no-deprecated-slot-scope-attribute.js b/tests/lib/rules/no-deprecated-slot-scope-attribute.js
@@ -4,7 +4,7 @@ const RuleTester = require('eslint').RuleTester
 const rule = require('../../../lib/rules/no-deprecated-slot-scope-attribute')
 
 const tester = new RuleTester({
-  parser: 'vue-eslint-parser',
+  parser: require.resolve('vue-eslint-parser'),
   parserOptions: {
     ecmaVersion: 2015
   }

diff --git a/tests/lib/rules/no-static-inline-styles.js b/tests/lib/rules/no-static-inline-styles.js
@@ -8,7 +8,7 @@ const RuleTester = require('eslint').RuleTester
 const rule = require('../../../lib/rules/no-static-inline-styles')
 
 const tester = new RuleTester({
-  parser: 'vue-eslint-parser',
+  parser: require.resolve('vue-eslint-parser'),
   parserOptions: {
     ecmaVersion: 2019
   }

diff --git a/tests/lib/rules/no-unsupported-features.js b/tests/lib/rules/no-unsupported-features.js
@@ -11,7 +11,7 @@ const RuleTester = require('eslint').RuleTester
 const rule = require('../../../lib/rules/no-unsupported-features')
 
 const tester = new RuleTester({
-  parser: 'vue-eslint-parser',
+  parser: require.resolve('vue-eslint-parser'),
   parserOptions: {
     ecmaVersion: 2019
   }

diff --git a/tests/lib/rules/no-unsupported-features/dynamic-directive-arguments.js b/tests/lib/rules/no-unsupported-features/dynamic-directive-arguments.js
@@ -10,7 +10,7 @@ const utils = require('./utils')
 
 const buildOptions = utils.optionsBuilder('dynamic-directive-arguments', '^2.5.0')
 const tester = new RuleTester({
-  parser: 'vue-eslint-parser',
+  parser: require.resolve('vue-eslint-parser'),
   parserOptions: {
     ecmaVersion: 2019
   }

diff --git a/tests/lib/rules/no-unsupported-features/slot-scope-attribute.js b/tests/lib/rules/no-unsupported-features/slot-scope-attribute.js
@@ -10,7 +10,7 @@ const utils = require('./utils')
 
 const buildOptions = utils.optionsBuilder('slot-scope-attribute', '^2.4.0')
 const tester = new RuleTester({
-  parser: 'vue-eslint-parser',
+  parser: require.resolve('vue-eslint-parser'),
   parserOptions: {
     ecmaVersion: 2019
   }

diff --git a/tests/lib/rules/no-unsupported-features/v-bind-prop-modifier-shorthand.js b/tests/lib/rules/no-unsupported-features/v-bind-prop-modifier-shorthand.js
@@ -10,7 +10,7 @@ const utils = require('./utils')
 
 const buildOptions = utils.optionsBuilder('v-bind-prop-modifier-shorthand', '^2.6.0')
 const tester = new RuleTester({
-  parser: 'vue-eslint-parser',
+  parser: require.resolve('vue-eslint-parser'),
   parserOptions: {
     ecmaVersion: 2019
   }

diff --git a/tests/lib/rules/no-unsupported-features/v-slot.js b/tests/lib/rules/no-unsupported-features/v-slot.js
@@ -10,7 +10,7 @@ const utils = require('./utils')
 
 const buildOptions = utils.optionsBuilder('v-slot', '^2.5.0')
 const tester = new RuleTester({
-  parser: 'vue-eslint-parser',
+  parser: require.resolve('vue-eslint-parser'),
   parserOptions: {
     ecmaVersion: 2019
   }

diff --git a/tests/lib/rules/valid-v-bind-sync.js b/tests/lib/rules/valid-v-bind-sync.js
@@ -15,7 +15,7 @@ const rule = require('../../../lib/rules/valid-v-bind-sync')
 // ------------------------------------------------------------------------------
 
 const tester = new RuleTester({
-  parser: 'vue-eslint-parser',
+  parser: require.resolve('vue-eslint-parser'),
   parserOptions: { ecmaVersion: 2015 }
 })