Search code, repositories, users, issues, pull requests...


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

98dbf8a

@samturrell @mysticatea


 Docs: fixes wording in docs ( vuejs#372 )

7c4a1d2

@mysticatea


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

cd22a28

) (vuejs#374)

@ota-meshi @mysticatea


 [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

@ota-meshi @mysticatea


 Update: make vue/order-in-components  fixable ( vuejs#381 )

6861c81

* [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 eslint@3.18.0
* [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 eslint@3.18.0
* [fix] I used `output: null` to specify "not fix"


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

2b4798b


 [update] documents

3f86365


 [fix] require-meta-docs-url

3dd2038


 [fix] failed tests

e35ca6c

michalsnik reviewed

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

meta: {

docs: {

description: 'enforce specific casing for the component naming style in template',

category: 'strongly-recommended',

Copy link

Member

@michalsnik michalsnik Feb 21, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 reviewed

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

create (context) {

const options = context.options[0]

const caseType = allowedCaseOptions.indexOf(options) !== -1 ? options : 'PascalCase'

Copy link

Member

@michalsnik michalsnik Feb 21, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

michalsnik reviewed

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

if (casingName !== name) {

const startTag = node.startTag

const open = tokens.getFirstToken(startTag)

context.report({

Copy link

Member

@michalsnik michalsnik Feb 21, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please add empty line above, for clarity

michalsnik reviewed

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

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

data: {

name,

caseType: caseType

Copy link

Member

@michalsnik michalsnik Feb 21, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can also use shorthand here :)

michalsnik suggested changes

Copy link

Member

@michalsnik michalsnik left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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


 [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`

Copy link

Member Author

ota-meshi commented Feb 22, 2018

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

mysticatea

mysticatea suggested changes

Feb 23, 2018

Copy link

Member

@mysticatea mysticatea left a comment •

edited

Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 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

Copy link

Member Author

ota-meshi commented Feb 23, 2018

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.

@michalsnik 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

@michalsnik michalsnik added the semver-minor label

Mar 21, 2018

@michalsnik michalsnik self-assigned this

Mar 22, 2018

@michalsnik michalsnik changed the title ~~(削除) [New] Add vue/component-name-in-template-casing (削除ここまで)~~ (追記) ⭐️New: Add vue/component-name-in-template-casing (追記ここまで)

Apr 1, 2018

Mouvedia

Mouvedia reviewed

Apr 26, 2018

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

## :wrench: Options

Default casing is set to `PascalCase`.

Copy link

@Mouvedia Mouvedia Apr 26, 2018 •

edited

Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link

@samit4me samit4me Jun 22, 2018 •

edited

Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 🎉

Copy link

@samit4me samit4me Jun 22, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Mouvedia suggested changes

Apr 26, 2018

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

Copy link

@Mouvedia Mouvedia left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

kebab-case should be the default

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

const casing = require('../utils/casing')

const allowedCaseOptions = ['PascalCase', 'kebab-case']

const defaultCase = 'PascalCase'

Copy link

@Mouvedia Mouvedia Apr 26, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@niklashigi

Copy link

Contributor

niklashigi commented May 26, 2018

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

Copy link

Member

michalsnik commented Jul 11, 2018 •

edited

Loading

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.

Vue Casing learningequality/kolibri#4034

Copy link

Member

michalsnik commented Jul 14, 2018

@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 :)

@christianmemije christianmemije mentioned this pull request

Jul 16, 2018

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

Copy link

Member Author

ota-meshi commented Jul 19, 2018

@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.

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

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


 update docs link

4b300dc

@michalsnik michalsnik mentioned this pull request

Jul 30, 2018

Closed

michalsnik added 2 commits

July 30, 2018 13:50


 Merge branch 'master' into pr/397

33b47d5

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


 Update formatting

fb3d433

@michalsnik michalsnik merged commit c49a2e2 into vuejs:master

Jul 30, 2018

@ota-meshi ota-meshi deleted the add-component-name-in-template-casing branch

July 30, 2018 13:28

@stevenadams

Copy link

stevenadams commented Sep 17, 2018 •

edited

Loading

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

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

Copy link

lfaoro commented Dec 3, 2018

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

@zifnab87

Copy link

zifnab87 commented Dec 3, 2018

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

@mysticatea mysticatea mentioned this pull request

Dec 4, 2018

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

Merged

@TitanFighter TitanFighter mentioned this pull request

Dec 5, 2018

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

Closed

@lfaoro

Copy link

lfaoro commented Dec 6, 2018

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

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

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

Copy link

Member Author

ota-meshi commented Dec 6, 2018

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

Copy link

adrlen commented Dec 6, 2018

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 ota-meshi mentioned this pull request

Dec 6, 2018

Merged

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

Copy link

Member Author

ota-meshi commented Dec 7, 2018 •

edited

Loading

@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"]

Copy link

Member Author

ota-meshi commented Dec 7, 2018

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

@adrlen

Copy link

adrlen commented Dec 7, 2018

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.

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

Copy link

Member Author

ota-meshi commented Dec 7, 2018 •

edited

Loading

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

@adrlen

Copy link

adrlen commented Dec 7, 2018

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

I was using 3.0.1 ;)

Thanks again.