From d1677910111090d8297759f6855fd3d33fa5dd7c Mon Sep 17 00:00:00 2001 From: yosuke ota Date: Thu, 26 Dec 2019 13:38:27 +0900 Subject: [PATCH 1/4] Change document style for new rules added & Fixed new rule test cases to work with eslint v6 --- docs/rules/README.md | 1 + .../rules/component-definition-name-casing.md | 107 +++++++++++++++--- docs/rules/name-property-casing.md | 1 - docs/rules/no-reserved-component-names.md | 4 + lib/index.js | 1 + lib/rules/component-definition-name-casing.js | 4 +- lib/rules/component-tags-order.js | 2 + lib/rules/name-property-casing.js | 4 +- lib/rules/v-slot-style.js | 2 + lib/rules/valid-v-slot.js | 2 + .../rules/component-definition-name-casing.js | 2 +- 11 files changed, 110 insertions(+), 20 deletions(-) diff --git a/docs/rules/README.md b/docs/rules/README.md index 481f39099..289e4e7d3 100644 --- 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: | diff --git a/docs/rules/component-definition-name-casing.md b/docs/rules/component-definition-name-casing.md index 8bc3f7305..29b239dea 100644 --- 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) + + + +```vue + ``` + + + + + +```vue + +``` + + + + + ```js +/* ✓ GOOD */ Vue.component('MyComponent', { +}) + +/* ✗ BAD */ +Vue.component('my-component', { + }) ``` -:+1: Examples of **correct** code for `kebab-case`: + -```js +### `"kebab-case" + + + +```vue + ``` + + + + + +```vue + +``` + + + + + ```js +/* ✓ GOOD */ Vue.component('my-component', { +}) + +/* ✗ BAD */ +Vue.component('MyComponent', { + }) ``` -## :wrench: Options + -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 index 30630e795..98aa4a26c 100644 --- 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 index 8f5a1b6c0..3aa5f5db3 100644 --- a/docs/rules/no-reserved-component-names.md +++ b/docs/rules/no-reserved-component-names.md @@ -24,6 +24,10 @@ export default { +## :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 index 28343da6d..713e3d15c 100644 --- 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'), diff --git a/lib/rules/component-definition-name-casing.js b/lib/rules/component-definition-name-casing.js index bb8e46a0c..8860c0870 100644 --- 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 index 6f63c2cf0..d6400dec0 100644 --- 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 index 7f5454477..98403b31a 100644 --- 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 index e55dec95f..782dc435c 100644 --- 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-slot.js b/lib/rules/valid-v-slot.js index 567e3b251..3b2b57b76 100644 --- 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 index c98c82c9a..f1bcf538e 100644 --- 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).component('foo-bar', component)`, output: `(Vue as VueConstructor).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', From 7415e2a8e18375b8b6b3e2c1ddc3113a4d5357f3 Mon Sep 17 00:00:00 2001 From: yosuke ota Date: Thu, 26 Dec 2019 13:56:05 +0900 Subject: [PATCH 2/4] Fixed valid-v-bind-sync --- lib/rules/valid-v-bind-sync.js | 2 ++ tests/lib/rules/valid-v-bind-sync.js | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/lib/rules/valid-v-bind-sync.js b/lib/rules/valid-v-bind-sync.js index 727d0390e..e8a03fbfb 100644 --- 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/tests/lib/rules/valid-v-bind-sync.js b/tests/lib/rules/valid-v-bind-sync.js index 97fb33e9d..4f939aa16 100644 --- 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 } }) From d38c27a40f53256c08ad109a74a5eb55b22cf409 Mon Sep 17 00:00:00 2001 From: yosuke ota Date: Thu, 26 Dec 2019 14:06:19 +0900 Subject: [PATCH 3/4] Run update script --- docs/rules/README.md | 2 +- lib/index.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/rules/README.md b/docs/rules/README.md index ed8a1c188..7dcdff17f 100644 --- a/docs/rules/README.md +++ b/docs/rules/README.md @@ -154,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/lib/index.js b/lib/index.js index c32e5d15d..b487e0c1a 100644 --- a/lib/index.js +++ b/lib/index.js @@ -38,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'), From c7d91b6ec0f860c56e14fcab71252b790fc8b751 Mon Sep 17 00:00:00 2001 From: yosuke ota Date: Thu, 26 Dec 2019 14:15:38 +0900 Subject: [PATCH 4/4] Fixed test cases --- tests/lib/rules/no-deprecated-slot-attribute.js | 2 +- tests/lib/rules/no-deprecated-slot-scope-attribute.js | 2 +- tests/lib/rules/no-static-inline-styles.js | 2 +- tests/lib/rules/no-unsupported-features.js | 2 +- .../no-unsupported-features/dynamic-directive-arguments.js | 2 +- tests/lib/rules/no-unsupported-features/slot-scope-attribute.js | 2 +- .../no-unsupported-features/v-bind-prop-modifier-shorthand.js | 2 +- tests/lib/rules/no-unsupported-features/v-slot.js | 2 +- 8 files changed, 8 insertions(+), 8 deletions(-) diff --git a/tests/lib/rules/no-deprecated-slot-attribute.js b/tests/lib/rules/no-deprecated-slot-attribute.js index bb0dd9b54..4d75508a4 100644 --- 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 index ba5ce74f1..995909fc1 100644 --- 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 index e82a88705..31e08b38e 100644 --- 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 index ced993c05..6bebaae1a 100644 --- 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 index 46c0725d5..de403b7ec 100644 --- 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 index 675eea30c..137ed7c2a 100644 --- 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 index 0dace1ac7..ac4662935 100644 --- 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 index fbde61e60..95b1eef13 100644 --- 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 }