Add block-attributes-order rule #1973

Kingwl · 2022-09-16T07:06:05Z

Fixes #1970

mesqueeb · 2022-09-17T04:03:18Z

@Kingwl thanks for the PR!

is the default order going to be

<script setup lang="ts"></script>

OR

<script lang="ts" setup></script>

it's hard to tell from the PR markdown file alone.

PS: I think the former is better for consistency with official Vue documentation

Kingwl · 2022-09-19T03:03:07Z

Added the default orders into markdown.

AFAIK, there's no official Vue recommended block attributes order.

@sodatea Any suggestions?

mesqueeb · 2022-09-19T05:20:54Z

@Kingwl https://vuejs.org/guide/typescript/composition-api.html

Official Vue docs use <script setup lang="ts">

So I think having the same default as that seems best : )

Kingwl · 2022-09-19T05:49:13Z

Done.

And make style block has xxx yyy lang src order too (for the consistency).

ota-meshi · 2022-09-20T10:04:33Z

docs/rules/block-attributes-order.md

+
+This rule aims to enforce ordering of block attributes.
+
+### The default order


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 element property. This is similar to the vue/component-tags-order option.
The order option specifies the order of the attributes. It can use attribute names, regular expressions and their arrays, and negation. This is similar to the svelte/sort-attributes option.

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?

Updated as comments.

FloEdelmann · 2022-10-19T18:02:06Z

lib/rules/block-attributes-order.js

+  {
+    element: 'style',
+    order: [
+      WELL_KNOWN_STYLE_ATTRS.module,
+      WELL_KNOWN_STYLE_ATTRS.scoped,
+      WELL_KNOWN_STYLE_ATTRS.lang,
+      WELL_KNOWN_STYLE_ATTRS.src
+    ]
+  },


I think you can inline the constants since they are only used here. I.e.:

{ element: 'style', order: ['module', 'scoped', 'lang', 'src'] },

FloEdelmann · 2022-10-19T18:05:01Z

docs/rules/block-attributes-order.md

+sidebarDepth: 0
+title: vue/block-attributes-order
+description: enforce order of block attributes
+since: v4.3.0


This rule is not yet released. Please remove this line and re-run npm run update.

FloEdelmann · 2022-10-19T18:09:08Z

lib/rules/block-attributes-order.js

+    const matchedOption = normalizedOrderOptions.find((option) =>
+      matchOrderOption(option, element)
+    )
+    if (matchedOption) {
+      return matchedOption
+    }
+    return normalizedDefaultOptions.find((option) =>
+      matchOrderOption(option, element)
+    )


I don't understand why there is an if and the same function call again otherwise. Could it not be simplified to this?

Suggested change

const matchedOption = normalizedOrderOptions.find((option) =>

matchOrderOption(option, element)

)

if (matchedOption) {

return matchedOption

}

return normalizedDefaultOptions.find((option) =>

matchOrderOption(option, element)

)

return normalizedDefaultOptions.find((option) =>

matchOrderOption(option, element)

)

FloEdelmann · 2022-10-19T18:11:25Z

tests/lib/rules/block-attributes-order.js

+    {
+      filename: 'test-attributes-options-with-unknown-attribute.vue',
+      code: '<template functional foo lang="pug" src="./template.html"></template>',
+      options: [
+        [
+          {
+            element: 'template',
+            order: ['functional', 'foo', 'lang', 'src']
+          }
+        ]
+      ]
+    },


The test file name doesn't match the code/options here.

FloEdelmann · 2022-10-19T18:12:32Z

tests/lib/rules/block-attributes-order.js

+    },
+    {
+      filename: 'test-attributes-options-not-specify-some-attribute-2.vue',
+      code: '<style module scoped src="./style.css" lang="less"></style>',


I think that unknown attributes should only be allowed at the end. This would simplify the rule logic and make some test cases obsolete.

FloEdelmann · 2022-10-19T18:14:47Z

tests/lib/rules/block-attributes-order.js

+        {
+          type: 'VAttribute',
+          message: 'Attribute "lang" should go before "src".'
+        },


Please add line and column of the reported error to all the expected errors in this file. However, you can also remove the type: 'VAttribute' everywhere.

ota-meshi · 2022-10-26T00:19:13Z

lib/rules/block-attributes-order.js

+function ordersToRegexOrders(item) {
+  return Array.isArray(item) ? item.map((x) => new RegExp(x)) : new RegExp(item)
+}


Could you change it to accept more complex options by doing the following?

Suggested change

function ordersToRegexOrders(item) {

return Array.isArray(item) ? item.map((x) => new RegExp(x)) : new RegExp(item)

}

const { toRegExp } = require('../utils/regexp')

/**

* @param {string | string[]} item

* @return {(str: string) => boolean}

*/

function ordersToMatcher(item) {

return Array.isArray(item) ? compileMatcher(item) : compileMatcher([item])

}

/**

* Compile matcher

* @param {string[]} pattern

* @return {(str: string) => boolean}

*/

function compileMatcher(pattern) {

const rules = []

for (const p of pattern) {

let negative, patternStr

if (p.startsWith("!")) {

// If there is `!` at the beginning, it will be parsed with a negative pattern.

negative = true

patternStr = p.substring(1)

} else {

negative = false

patternStr = p

}

const regex = toRegExp(patternStr)

rules.push({ negative, match: (str) => regex.test(str) })

}

return (str) => {

// If the first rule is a negative pattern, they are considered to match if they do not match that pattern.

let result = Boolean(rules[0]?.negative)

for (const { negative, match } of rules) {

if (result === !negative) {

// Even if it matches, the result does not change, so skip it.

continue

}

if (match(str)) {

result = !negative

}

}

return result

}

}

This change allows users to use pattern formats such as:

"foo" … Matches only the foo attribute name.

"/foo/" … Matches attribute names that match the /foo/ regex. That is, it matches the attribute name including foo.

"!foo" … Exclude foo attribute from the matched attribute names. When used first in the array or alone, matches other than the foo attribute name.

"!/foo/" … Excludes attributes that match the /foo/ regex from the matched attribute names. When used first in the array or alone, matches an attribute name that does not match the /foo/ regex.

["foo", "/^bar/u"] … Matches the foo attribute or the attribute name that matches the /^bar/u regex.

["/^foo/u", "!foo-bar", "/^baz/u"] … Matches an attribute name that matches /^foo/u and other than foo-bar, or an attribute name that matches /^baz/u.

I think the rule of other plugin will also be helpful.
https://ota-meshi.github.io/eslint-plugin-svelte/rules/sort-attributes/

ota-meshi · 2022-10-26T00:25:00Z

lib/rules/block-attributes-order.js

+              type: 'string'
+            },
+            order: {
+              type: 'array',


Could you please define the schema so that at least one item is set?

ota-meshi · 2022-10-26T00:25:49Z

lib/rules/block-attributes-order.js

+      {
+        type: 'array',
+        items: {
+          type: 'object',


Could you define the schema so that the two properties are required?

ota-meshi · 2022-10-26T00:32:26Z

lib/rules/block-attributes-order.js

+      WELL_KNOWN_TEMPLATE_ATTRS.functional,
+      WELL_KNOWN_TEMPLATE_ATTRS.lang,
+      WELL_KNOWN_TEMPLATE_ATTRS.src


After changing it to accept complex ordering, could you change it so that lang and src are always ordered last?

e.g.

Suggested change

WELL_KNOWN_TEMPLATE_ATTRS.functional,

WELL_KNOWN_TEMPLATE_ATTRS.lang,

WELL_KNOWN_TEMPLATE_ATTRS.src

"functional",

["!lang", "!src"],

"lang",

"src"

Change other elements in the same way.

ota-meshi · 2022-10-26T00:34:12Z

lib/rules/block-attributes-order.js

+      WELL_KNOWN_TEMPLATE_ATTRS.src
+    ]
+  }
+])


Could you add the following item to force the order of the custom elements as well?

{ element: '*', order: [ ["!lang", "!src"], "lang", "src" ] },

mesqueeb · 2023-05-16T08:56:11Z

@Kingwl friendly bump : )

paescuj · 2023-07-01T09:55:36Z

Hey there, would be great to have this rule 👍 Happy to help! I can also come up with a new pull request if that is preferred.

FloEdelmann · 2023-07-03T12:48:37Z

From our side, a new PR replacing this one would be fine.

FloEdelmann · 2023-07-27T13:57:20Z

I'll close this for now as it seems abandoned and there are already some merge conflicts. Feel free to open another PR 🙂

@paescuj this is your chance! 😉

Thomasan1999 · 2024-09-14T15:53:06Z

@FloEdelmann I was looking for this rule. Has it been implemented since?

FloEdelmann · 2024-09-14T23:12:48Z

No

Add block-attributes-order rule

31666df

Kingwl force-pushed the feat/block-attributes-orders branch from 7c9babb to 31666df Compare September 16, 2022 07:06

Add more tests

fd3a907

Kingwl marked this pull request as ready for review September 16, 2022 07:22

Kingwl added 3 commits September 16, 2022 15:55

Add docs

d98cf6f

Make lint happy

5dd0f4c

Merge branch 'master' into feat/block-attributes-orders

694b7e2

fix: improve docs

3350757

Fix default order

4be649c

ota-meshi requested changes Sep 20, 2022

View reviewed changes

ota-meshi marked this pull request as draft October 4, 2022 04:32

Kingwl added 2 commits October 14, 2022 14:49

Merge branch 'master' into feat/block-attributes-orders

b7fe76e

fix: cr issues

b234ffa

Kingwl marked this pull request as ready for review October 14, 2022 10:02

Kingwl requested a review from ota-meshi October 14, 2022 10:02

fix: make lint happy

e775173

This comment was marked as off-topic.

Sign in to view

FloEdelmann requested changes Oct 19, 2022

View reviewed changes

ota-meshi requested changes Oct 26, 2022

View reviewed changes

ota-meshi marked this pull request as draft January 12, 2023 02:23

FloEdelmann closed this Jul 27, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add block-attributes-order rule #1973

Add block-attributes-order rule #1973

Kingwl commented Sep 16, 2022 •

edited

Loading

mesqueeb commented Sep 17, 2022 •

edited

Loading

Kingwl commented Sep 19, 2022 •

edited

Loading

mesqueeb commented Sep 19, 2022

Kingwl commented Sep 19, 2022 •

edited

Loading

ota-meshi Sep 20, 2022

Kingwl Oct 14, 2022

This comment was marked as off-topic.

FloEdelmann Oct 19, 2022 •

edited

Loading

FloEdelmann Oct 19, 2022

FloEdelmann Oct 19, 2022

FloEdelmann Oct 19, 2022 •

edited

Loading

FloEdelmann Oct 19, 2022 •

edited

Loading

FloEdelmann Oct 19, 2022

ota-meshi Oct 26, 2022

ota-meshi Oct 26, 2022

ota-meshi Oct 26, 2022

ota-meshi Oct 26, 2022

ota-meshi Oct 26, 2022

mesqueeb commented May 16, 2023

paescuj commented Jul 1, 2023

FloEdelmann commented Jul 3, 2023

FloEdelmann commented Jul 27, 2023

Thomasan1999 commented Sep 14, 2024

FloEdelmann commented Sep 14, 2024


		This rule aims to enforce ordering of block attributes.

		### The default order

-function ordersToRegexOrders(item) {
-  return Array.isArray(item) ? item.map((x) => new RegExp(x)) : new RegExp(item)
-}
+const { toRegExp } = require('../utils/regexp')
+/**
+ * @param {string | string[]} item
+ * @return {(str: string) => boolean}
+ */
+function ordersToMatcher(item) {
+    return Array.isArray(item) ? compileMatcher(item) : compileMatcher([item])
+}
+/**
+ * Compile matcher
+ * @param {string[]} pattern
+ * @return {(str: string) => boolean}
+ */
+function compileMatcher(pattern) {
+  const rules = []
+  for (const p of pattern) {
+    let negative, patternStr
+    if (p.startsWith("!")) {
+      // If there is `!` at the beginning, it will be parsed with a negative pattern.
+      negative = true
+      patternStr = p.substring(1)
+    } else {
+      negative = false
+      patternStr = p
+    }
+    const regex = toRegExp(patternStr)
+    rules.push({ negative, match: (str) => regex.test(str) })
+  }
+  return (str) => {
+    // If the first rule is a negative pattern, they are considered to match if they do not match that pattern.
+    let result = Boolean(rules[0]?.negative)
+    for (const { negative, match } of rules) {
+      if (result === !negative) {
+        // Even if it matches, the result does not change, so skip it.
+        continue
+      }
+      if (match(str)) {
+        result = !negative
+      }
+    }
+    return result
+  }
+}

Add block-attributes-order rule #1973

Add block-attributes-order rule #1973

Conversation

Kingwl commented Sep 16, 2022 • edited Loading

mesqueeb commented Sep 17, 2022 • edited Loading

Kingwl commented Sep 19, 2022 • edited Loading

mesqueeb commented Sep 19, 2022

Kingwl commented Sep 19, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

This comment was marked as off-topic.

FloEdelmann Oct 19, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

FloEdelmann Oct 19, 2022 • edited Loading

Choose a reason for hiding this comment

FloEdelmann Oct 19, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mesqueeb commented May 16, 2023

paescuj commented Jul 1, 2023

FloEdelmann commented Jul 3, 2023

FloEdelmann commented Jul 27, 2023

Thomasan1999 commented Sep 14, 2024

FloEdelmann commented Sep 14, 2024

Kingwl commented Sep 16, 2022 •

edited

Loading

mesqueeb commented Sep 17, 2022 •

edited

Loading

Kingwl commented Sep 19, 2022 •

edited

Loading

Kingwl commented Sep 19, 2022 •

edited

Loading

FloEdelmann Oct 19, 2022 •

edited

Loading

FloEdelmann Oct 19, 2022 •

edited

Loading

FloEdelmann Oct 19, 2022 •

edited

Loading