⭐️New: Add `vue/component-name-in-template-casing` #397

ota-meshi · 2018-02-19T14:28:04Z

This PR adds vue/component-name-in-template-casing rule.
This implements rule proposed in #250

* [Update] Make `vue/max-attributes-per-line` fixable * [fix] bug and style * [fix] Switch indent calculation method with node and attribute * [fix] don't handle indentation * [add] autofix test max-attributes-per-line.js

* [Update] Make `vue/order-in-components` fixable This Commit makes `vue/order-in-components` fixable. In case of `The "A" property should be above the "B" property` error, autofix will move A before B * [fix] fail test at [email protected] * [fix] If there is a possibility of a side effect, don't autofix * [fix] failed test at node v4 * [update] use Traverser * [fix] failed test [email protected] * [fix] I used `output: null` to specify "not fix"

michalsnik · 2018-02-21T18:22:19Z

lib/rules/component-name-in-template-casing.js

+  meta: {
+    docs: {
+      description: 'enforce specific casing for the component naming style in template',
+      category: 'strongly-recommended',


Please set category to undefined, as it would require us to do major release. And we're not going to do so in the next 2 weeks. We're focusing on minor changes and will do a major release once per 2-3 months probably to avoid confusion.

michalsnik · 2018-02-21T18:26:15Z

lib/rules/component-name-in-template-casing.js

+
+  create (context) {
+    const options = context.options[0]
+    const caseType = allowedCaseOptions.indexOf(options) !== -1 ? options : 'PascalCase'


You could add const defaultCase = 'PascalCase' right below allowedCaseOptions, and just use it here. It would be more obv I guess :)

michalsnik · 2018-02-21T18:27:50Z

lib/rules/component-name-in-template-casing.js

+        if (casingName !== name) {
+          const startTag = node.startTag
+          const open = tokens.getFirstToken(startTag)
+          context.report({


Please add empty line above, for clarity

michalsnik · 2018-02-21T18:28:47Z

lib/rules/component-name-in-template-casing.js

+            message: 'Component name "{{name}}" is not {{caseType}}.',
+            data: {
+              name,
+              caseType: caseType


You can also use shorthand here :)

michalsnik

Thank you @ota-meshi. Great work :) I have only few simple suggestions

* Default case to constant. and used it. `const defaultCase = 'PascalCase'` * `'category'` to `undefined` * Add empty line for clarity * I used object shorthand. `caseType: caseType` to `caseType`

ota-meshi · 2018-02-22T01:05:32Z

@michalsnik
Thank you for review!
I changed it, so please check it.

mysticatea

Almost LGTM, great.

But I'm thinking if the name of this rule needs html- prefix because this rule depends on HTML-specific syntax. 🤔
Maybe html-element-name-casing or something like?

lib/rules/component-name-in-template-casing.js

ota-meshi · 2018-02-23T16:48:48Z

I think we do not have to emphasize html because this rule targets custom components and html elements like <div> and <span> are not targets.
However, I am not good at English, so maybe I haven't understood your intention correctly.

Mouvedia · 2018-04-26T13:47:56Z

docs/rules/component-name-in-template-casing.md

+
+## :wrench: Options
+
+Default casing is set to `PascalCase`.


It shouldn't be the default for the reasons Iv listed on #250 (comment)
Please don't merge this until that's fixed.

From my understanding, we can only lint Single File Components and according to the Vue Style Guide PascalCase is strongly recommended in SFC's, so this seems like a sensible default. If you want to use kebab-case it's configurable so it can be either. +1 for this PR, really looking forward to it being merged 🎉

It looks like this plugin uses the Style Guide as the source of truth, so If you believe kebab-case should be the default (a lot of people I work with agree) it might be more appropriate to raise a new issue over on the Style Guide repo itself, see https://github.com/vuejs/vuejs.org/blob/e93b8371d73e4467dd8152703ddf1db423f489a2/src/v2/style-guide/index.md#single-file-component-filename-casing-strongly-recommended

Mouvedia

kebab-case should be the default

Mouvedia · 2018-04-26T13:50:29Z

lib/rules/component-name-in-template-casing.js

+const casing = require('../utils/casing')
+
+const allowedCaseOptions = ['PascalCase', 'kebab-case']
+const defaultCase = 'PascalCase'


https://github.com/vuejs/eslint-plugin-vue/pull/397/files#r184395330

niklashigi · 2018-05-26T20:50:55Z

Any updates on this pull request, @ota-meshi? I would love to see this merged!

michalsnik · 2018-07-11T16:03:55Z

Sorry guys for such a long absence..

I think that:

component-name-in-template-casing is a good name
PascalCase is sensible default aligned with our style guide

Also:

this rule checks only content of SFC's <template> tags
this rule looks only for custom elements, using this helper thus it's exactly targeting what name suggests: component-name

Given that I think it's ready to be merged. Unless I missed some vital information in all above comments? It would still be in an unassigned category for some time, and it would give as a moment to test it in real life projects.

michalsnik · 2018-07-14T16:25:24Z

@ota-meshi I was speaking with @chrisvfritz and we think that it might make sense to add extra option to allow whitelisting custom components names, so that it's possible to use non-vue components even with this rule enabled in ESLint. I'm happy to hear your thoughts too :)

…sing # Conflicts: # README.md

ota-meshi · 2018-07-19T12:53:55Z

@michalsnik I agree.
If few custom elements are used, I think that it can be solved with option.
I think that it is unlikely that products using Vue.js uses a lot of custom elements, so I think that this rule will be useful.

stevenadams · 2018-09-17T00:49:59Z

@ota-meshi @michalsnik - any reason this rule is still left in undefined category? According to the style guide it should be 'strongly-recommended'

https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/component-name-in-template-casing.js#L25

I put in a real quick PR for this as I know the team prob have bigger things to work on, hope that's ok :) - #577

lfaoro · 2018-12-03T10:36:18Z

This creates an issue with Vuetify, it'll transform all Vuetify components from e.g. <v-app> -> <VApp>

zifnab87 · 2018-12-03T22:00:53Z

It also creates problems with bootstrap-vue. e.g <b-row> --> <BRow>

lfaoro · 2018-12-06T09:01:12Z

as a quick workaround turn it off in the .eslintrc.js

  rules: {
    "vue/component-name-in-template-casing": "off"
  },

ota-meshi · 2018-12-06T14:19:27Z

I did not know that it is must use kebab-case when defining components with kebab-case.
https://vuejs.org/v2/guide/components-registration.html

This rule reports false positives.

I think that it is necessary to limit the verification target to those registered within the component.
I will fix this rule.

adrlen · 2018-12-06T15:57:49Z

I also have those warnings :

warning: Component name "router-link" is not PascalCase (vue/component-name-in-template-casing)
warning: Component name "transition-group" is not PascalCase (vue/component-name-in-template-casing)
etc

With Vue native components.

ota-meshi · 2018-12-07T08:43:17Z

@adrlen Hello!
bootstrap-vue seems not to be able to use PascalCase, but I think that router-link and transition-group can also be used in PascalCase.

I confirmed that it works with the following code.

    <RouterView />

    <TransitionGroup name="list" tag="p">
      <span v-for="item in items" :key="item" class="list-item">
        {{ item }}
      </span>
    </TransitionGroup>

If you prefer kebab-case you can also change the option.

  "vue/component-name-in-template-casing": ["error", "kebab-case"]

https://vuejs.github.io/eslint-plugin-vue/rules/component-name-in-template-casing.html#options

ota-meshi · 2018-12-07T08:54:37Z

I might not notice this thread comments so please open the new issue.

adrlen · 2018-12-07T09:11:01Z

Hi @ota-meshi, thanks for your response !

It works indeed with Transition, TransitionGroup, but I have this error when using RouterView and RouterLink :

[Vue warn]: Unknown custom element: <RouterView> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

ota-meshi · 2018-12-07T09:16:58Z

@adrlen
I don't know the cause it does not work 🤔
Are you installing and using the vue-router package?

https://www.npmjs.com/package/vue-router

adrlen · 2018-12-07T09:22:03Z

https://github.com/vuejs/vue-router/releases/tag/v3.0.2

I was using 3.0.1 ;)

Thanks again.

ota-meshi · 2018-12-07T09:34:01Z

@adrlen Thank you for the information!

It seems that PascalCase has become available for v3.0.2. 😄

vuejs/vue-router#1842

https://github.com/vuejs/vue-router/blob/v3.0.2/src/install.js#L46
https://github.com/vuejs/vue-router/blob/v3.0.1/src/install.js#L46

lfaoro · 2018-12-12T14:47:58Z

Still, this rule should be removed from the defaults

michalsnik and others added 9 commits January 28, 2018 23:55

Add Vue.extend support, add missing info about Vue.mixin check in readme

98dbf8a

Docs: fixes wording in docs (vuejs#372)

7c4a1d2

Fix: fix script-indent to prevent removing <script> tag (fixes vuejs#367

cd22a28

) (vuejs#374)

[Update] Make vue/max-attributes-per-line fixable (vuejs#380)

ee5cc0a

* [Update] Make `vue/max-attributes-per-line` fixable * [fix] bug and style * [fix] Switch indent calculation method with node and attribute * [fix] don't handle indentation * [add] autofix test max-attributes-per-line.js

[New] Add vue/component-name-in-template-casing

2b4798b

[update] documents

3f86365

[fix] require-meta-docs-url

3dd2038

[fix] failed tests

e35ca6c

michalsnik reviewed Feb 21, 2018

View reviewed changes

michalsnik suggested changes Feb 21, 2018

View reviewed changes

[fix] review contents

243e61a

* Default case to constant. and used it. `const defaultCase = 'PascalCase'` * `'category'` to `undefined` * Add empty line for clarity * I used object shorthand. `caseType: caseType` to `caseType`

mysticatea suggested changes Feb 23, 2018

View reviewed changes

lib/rules/component-name-in-template-casing.js Outdated Show resolved Hide resolved

ota-meshi added 2 commits February 23, 2018 22:38

[fix] No deletes space and attributes of endTag

de29eb8

[fix] Remove test unnecessary option

fea5dfc

michalsnik force-pushed the master branch from d7de72f to 4c25403 Compare February 24, 2018 05:27

ota-meshi added 2 commits February 24, 2018 22:02

Merge branch 'master' into add-component-name-in-template-casing

38e4849

[fix] lint error caused by merging the master for conflict resolution

2ce184b

michalsnik approved these changes Mar 21, 2018

View reviewed changes

michalsnik added the semver-minor label Mar 21, 2018

michalsnik self-assigned this Mar 22, 2018

michalsnik changed the title ~~[New] Add vue/component-name-in-template-casing~~ ⭐️New: Add vue/component-name-in-template-casing Apr 1, 2018

Mouvedia reviewed Apr 26, 2018

View reviewed changes

Mouvedia suggested changes Apr 26, 2018

View reviewed changes

christianmemije mentioned this pull request Jul 16, 2018

Vue Casing learningequality/kolibri#4034

Merged

14 tasks

ota-meshi added 2 commits July 18, 2018 18:06

Merge branch 'upstream/master' into add-component-name-in-template-ca…

25c7e4d

…sing # Conflicts: # README.md

Add ignores option.

54fb3fb

ota-meshi added 3 commits July 19, 2018 22:02

Fixed that extra differences.

e8e0db0

Merge branch 'master' into add-component-name-in-template-casing

802a9a8

update docs link

4b300dc

michalsnik mentioned this pull request Jul 30, 2018

⭐️New: Add vue/html-element-name-kebab-casing #501

Closed

michalsnik added 2 commits July 30, 2018 13:50

Merge branch 'master' into pr/397

33b47d5

Update formatting

fb3d433

michalsnik merged commit c49a2e2 into vuejs:master Jul 30, 2018

ota-meshi deleted the add-component-name-in-template-casing branch July 30, 2018 13:28

mysticatea mentioned this pull request Dec 4, 2018

Chore: move component-name-in-template-casing rule to uncategorized #703

Merged

TitanFighter mentioned this pull request Dec 5, 2018

vue/component-name-in-template-casing transforms <b-button> to <BButton>. #710

Closed

ota-meshi mentioned this pull request Dec 6, 2018

Fix: Add registeredComponentsOnly option to component-name-in-template-casing rule #714

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

⭐️New: Add `vue/component-name-in-template-casing` #397

⭐️New: Add `vue/component-name-in-template-casing` #397

ota-meshi commented Feb 19, 2018

michalsnik Feb 21, 2018

michalsnik Feb 21, 2018

michalsnik Feb 21, 2018

michalsnik Feb 21, 2018

michalsnik left a comment

ota-meshi commented Feb 22, 2018

mysticatea left a comment •

edited

Loading

ota-meshi commented Feb 23, 2018

Mouvedia Apr 26, 2018 •

edited

Loading

samit4me Jun 22, 2018 •

edited

Loading

samit4me Jun 22, 2018

Mouvedia left a comment

Mouvedia Apr 26, 2018

niklashigi commented May 26, 2018

michalsnik commented Jul 11, 2018 •

edited

Loading

michalsnik commented Jul 14, 2018

ota-meshi commented Jul 19, 2018

stevenadams commented Sep 17, 2018 •

edited

Loading

lfaoro commented Dec 3, 2018

zifnab87 commented Dec 3, 2018

lfaoro commented Dec 6, 2018

ota-meshi commented Dec 6, 2018

adrlen commented Dec 6, 2018

ota-meshi commented Dec 7, 2018 •

edited

Loading

ota-meshi commented Dec 7, 2018

adrlen commented Dec 7, 2018

ota-meshi commented Dec 7, 2018 •

edited

Loading

adrlen commented Dec 7, 2018

ota-meshi commented Dec 7, 2018

lfaoro commented Dec 12, 2018

⭐️New: Add vue/component-name-in-template-casing #397

⭐️New: Add vue/component-name-in-template-casing #397

Conversation

ota-meshi commented Feb 19, 2018

michalsnik Feb 21, 2018

Choose a reason for hiding this comment

michalsnik Feb 21, 2018

Choose a reason for hiding this comment

michalsnik Feb 21, 2018

Choose a reason for hiding this comment

michalsnik Feb 21, 2018

Choose a reason for hiding this comment

michalsnik left a comment

Choose a reason for hiding this comment

ota-meshi commented Feb 22, 2018

mysticatea left a comment • edited Loading

Choose a reason for hiding this comment

ota-meshi commented Feb 23, 2018

Mouvedia Apr 26, 2018 • edited Loading

Choose a reason for hiding this comment

samit4me Jun 22, 2018 • edited Loading

Choose a reason for hiding this comment

samit4me Jun 22, 2018

Choose a reason for hiding this comment

Mouvedia left a comment

Choose a reason for hiding this comment

Mouvedia Apr 26, 2018

Choose a reason for hiding this comment

niklashigi commented May 26, 2018

michalsnik commented Jul 11, 2018 • edited Loading

michalsnik commented Jul 14, 2018

ota-meshi commented Jul 19, 2018

stevenadams commented Sep 17, 2018 • edited Loading

lfaoro commented Dec 3, 2018

zifnab87 commented Dec 3, 2018

lfaoro commented Dec 6, 2018

ota-meshi commented Dec 6, 2018

adrlen commented Dec 6, 2018

ota-meshi commented Dec 7, 2018 • edited Loading

ota-meshi commented Dec 7, 2018

adrlen commented Dec 7, 2018

ota-meshi commented Dec 7, 2018 • edited Loading

adrlen commented Dec 7, 2018

ota-meshi commented Dec 7, 2018

lfaoro commented Dec 12, 2018

⭐️New: Add `vue/component-name-in-template-casing` #397

⭐️New: Add `vue/component-name-in-template-casing` #397

mysticatea left a comment •

edited

Loading

Mouvedia Apr 26, 2018 •

edited

Loading

samit4me Jun 22, 2018 •

edited

Loading

michalsnik commented Jul 11, 2018 •

edited

Loading

stevenadams commented Sep 17, 2018 •

edited

Loading

ota-meshi commented Dec 7, 2018 •

edited

Loading

ota-meshi commented Dec 7, 2018 •

edited

Loading