-
-
Notifications
You must be signed in to change notification settings - Fork 681
Add block-attributes-order rule #1973
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from 7 commits
31666df
fd3a907
d98cf6f
5dd0f4c
694b7e2
3350757
4be649c
b7fe76e
b234ffa
e775173
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -9,3 +9,4 @@ yarn.lock | |
yarn-error.log | ||
docs/.vuepress/dist | ||
typings/eslint/lib/rules | ||
.DS_Store |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,92 @@ | ||
--- | ||
pageClass: rule-details | ||
sidebarDepth: 0 | ||
title: vue/block-attributes-order | ||
description: enforce order of block attributes | ||
since: v4.3.0 | ||
--- | ||
# vue/block-attributes-order | ||
|
||
> enforce order of block attributes | ||
|
||
- :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 | ||
|
||
This rule aims to enforce ordering of block attributes. | ||
|
||
### The default order | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think we need to discuss option formats. If we want to be more granular and configurable by the user, I suggest using an array of objects with elements and ordering, like this: {'vue/block-attributes-order': ['error',
[
{ element: 'script', order: ['setup, 'lang', 'src'] },
{ element: 'template', order: ['functional', 'lang', 'src'] },
{ element: 'style', order: ['scoped', 'module', 'lang', 'src'] },
{ element: 'i18n', order: ['global', 'locale', 'lang', 'src'] },
]
]} You can use CSS selectors for the If you want lang and src to always be at the back: {'vue/block-attributes-order': ['error',
[
{ element: '*', order: [['/.*/', '!/^(?:src|lang)$/'], 'lang', 'src'] }
]
]} Patterns can be used to correct some order even for unknown blocks and unknown attributes. What do you think? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Updated as comments. |
||
|
||
#### Template | ||
|
||
`['functional', 'lang', 'src']` | ||
|
||
#### Script | ||
|
||
`['setup', 'lang', 'src']` | ||
|
||
#### Style | ||
|
||
`['module', 'scoped', 'lang', 'src']` | ||
|
||
<eslint-code-block fix :rules="{'vue/block-attributes-order': ['error']}"> | ||
|
||
```vue | ||
<template functional lang="pug" src="./template.pug"></template> | ||
<script setup lang="ts" src="./script.ts"></script> | ||
<style module scoped lang="css" src="./style.css"></style> | ||
``` | ||
|
||
</eslint-code-block> | ||
|
||
<eslint-code-block fix :rules="{'vue/block-attributes-order': ['error']}"> | ||
|
||
```vue | ||
<template src="./template.pug" functional lang="pug"></template> | ||
<script src="./script.ts" lang="ts" setup></script> | ||
<style src="./style.css" lang="css" scoped module></style> | ||
``` | ||
|
||
</eslint-code-block> | ||
|
||
### Custom orders | ||
|
||
<eslint-code-block fix :rules="{'vue/block-attributes-order': ['error', { | ||
order: { | ||
template: ['src', 'lang', 'functional'], | ||
script: ['src', 'lang', 'setup'], | ||
style: [['src', 'scoped'], 'module', 'lang'] | ||
} | ||
}]}"> | ||
|
||
```vue | ||
<template functional lang="pug" src="./template.pug"></template> | ||
<script src="./script.ts" lang="ts" setup></script> | ||
<style src="./style.css" scoped module lang="css"></style> | ||
``` | ||
|
||
</eslint-code-block> | ||
|
||
### Custom blocks | ||
|
||
<eslint-code-block fix :rules="{'vue/block-attributes-order': ['error', { | ||
order: { | ||
foobarbaz: ['foo', 'bar', 'baz'] | ||
} | ||
}]}"> | ||
|
||
```vue | ||
<foobarbaz foo bar baz></foobarbaz> | ||
<foobarbaz baz bar foo></foobarbaz> | ||
``` | ||
|
||
</eslint-code-block> | ||
|
||
## :rocket: Version | ||
|
||
This rule was introduced in eslint-plugin-vue v4.3.0 | ||
|
||
## :mag: Implementation | ||
|
||
- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/block-attributes-order.js) | ||
- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/block-attributes-order.js) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This rule is not yet released. Please remove this line and re-run
npm run update
.