Skip to content

Commit

Permalink
feat: add suggestion match-component-file-name rule
Browse files Browse the repository at this point in the history
improve #1816

For the following reasons why name option changed.
If change file name, alto need to change import statement.

Also, this rule not auto-fixed, because the file name may be incorrect.
  • Loading branch information
Hideaki Matsunami committed May 4, 2022
1 parent 4fc9116 commit 4ff89bb
Show file tree
Hide file tree
Showing 4 changed files with 324 additions and 16 deletions.
2 changes: 1 addition & 1 deletion docs/rules/README.md
Expand Up @@ -210,7 +210,7 @@ For example:
| [vue/html-comment-content-newline](./html-comment-content-newline.md) | enforce unified line brake in HTML comments | :wrench: | :lipstick: |
| [vue/html-comment-content-spacing](./html-comment-content-spacing.md) | enforce unified spacing in HTML comments | :wrench: | :lipstick: |
| [vue/html-comment-indent](./html-comment-indent.md) | enforce consistent indentation in HTML comments | :wrench: | :lipstick: |
| [vue/match-component-file-name](./match-component-file-name.md) | require component name property to match its file name | | :hammer: |
| [vue/match-component-file-name](./match-component-file-name.md) | require component name property to match its file name | :bulb: | :hammer: |
| [vue/match-component-import-name](./match-component-import-name.md) | require the registered component name to match the imported component name | | :warning: |
| [vue/new-line-between-multi-line-property](./new-line-between-multi-line-property.md) | enforce new lines between multi-line properties in Vue components | :wrench: | :lipstick: |
| [vue/next-tick-style](./next-tick-style.md) | enforce Promise or callback style in `nextTick` | :wrench: | :hammer: |
Expand Down
2 changes: 2 additions & 0 deletions docs/rules/match-component-file-name.md
Expand Up @@ -9,6 +9,8 @@ since: v5.2.0

> require component name property to match its file name
- :bulb: Some problems reported by this rule are manually fixable by editor [suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).

This rule reports if a component `name` property does not match its file name.

You can define an array of file extensions this rule should verify for the component's name.
Expand Down
14 changes: 13 additions & 1 deletion lib/rules/match-component-file-name.js
Expand Up @@ -31,6 +31,8 @@ function canVerify(node) {

module.exports = {
meta: {
// eslint-disable-next-line eslint-plugin/require-meta-has-suggestions
hasSuggestions: true,
type: 'suggestion',
docs: {
description: 'require component name property to match its file name',
Expand Down Expand Up @@ -114,7 +116,17 @@ module.exports = {
node,
message:
'Component name `{{name}}` should match file name `{{filename}}`.',
data: { filename, name }
data: { filename, name },
suggest: [
{
desc: 'Rename component to match file name.',
fix(fixer) {
const quote =
node.type === 'TemplateLiteral' ? '`' : node.raw[0]
return fixer.replaceText(node, `${quote}${filename}${quote}`)
}
}
]
})
}
}
Expand Down

0 comments on commit 4ff89bb

Please sign in to comment.