123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281 |
- /**
- * @fileoverview enforce ordering of attributes
- * @author Erin Depew
- */
- 'use strict'
- const utils = require('../utils')
- // ------------------------------------------------------------------------------
- // Rule Definition
- // ------------------------------------------------------------------------------
- const ATTRS = {
- DEFINITION: 'DEFINITION',
- LIST_RENDERING: 'LIST_RENDERING',
- CONDITIONALS: 'CONDITIONALS',
- RENDER_MODIFIERS: 'RENDER_MODIFIERS',
- GLOBAL: 'GLOBAL',
- UNIQUE: 'UNIQUE',
- TWO_WAY_BINDING: 'TWO_WAY_BINDING',
- OTHER_DIRECTIVES: 'OTHER_DIRECTIVES',
- OTHER_ATTR: 'OTHER_ATTR',
- EVENTS: 'EVENTS',
- CONTENT: 'CONTENT'
- }
- /**
- * @param {VAttribute | VDirective} attribute
- * @param {SourceCode} sourceCode
- */
- function getAttributeName(attribute, sourceCode) {
- if (attribute.directive) {
- if (attribute.key.name.name === 'bind') {
- return attribute.key.argument
- ? sourceCode.getText(attribute.key.argument)
- : ''
- } else {
- return getDirectiveKeyName(attribute.key, sourceCode)
- }
- } else {
- return attribute.key.name
- }
- }
- /**
- * @param {VDirectiveKey} directiveKey
- * @param {SourceCode} sourceCode
- */
- function getDirectiveKeyName(directiveKey, sourceCode) {
- let text = `v-${directiveKey.name.name}`
- if (directiveKey.argument) {
- text += `:${sourceCode.getText(directiveKey.argument)}`
- }
- for (const modifier of directiveKey.modifiers) {
- text += `.${modifier.name}`
- }
- return text
- }
- /**
- * @param {VAttribute | VDirective} attribute
- * @param {SourceCode} sourceCode
- */
- function getAttributeType(attribute, sourceCode) {
- let propName
- if (attribute.directive) {
- if (attribute.key.name.name !== 'bind') {
- const name = attribute.key.name.name
- if (name === 'for') {
- return ATTRS.LIST_RENDERING
- } else if (
- name === 'if' ||
- name === 'else-if' ||
- name === 'else' ||
- name === 'show' ||
- name === 'cloak'
- ) {
- return ATTRS.CONDITIONALS
- } else if (name === 'pre' || name === 'once') {
- return ATTRS.RENDER_MODIFIERS
- } else if (name === 'model') {
- return ATTRS.TWO_WAY_BINDING
- } else if (name === 'on') {
- return ATTRS.EVENTS
- } else if (name === 'html' || name === 'text') {
- return ATTRS.CONTENT
- } else if (name === 'slot') {
- return ATTRS.UNIQUE
- } else if (name === 'is') {
- return ATTRS.DEFINITION
- } else {
- return ATTRS.OTHER_DIRECTIVES
- }
- }
- propName = attribute.key.argument
- ? sourceCode.getText(attribute.key.argument)
- : ''
- } else {
- propName = attribute.key.name
- }
- if (propName === 'is') {
- return ATTRS.DEFINITION
- } else if (propName === 'id') {
- return ATTRS.GLOBAL
- } else if (
- propName === 'ref' ||
- propName === 'key' ||
- propName === 'slot' ||
- propName === 'slot-scope'
- ) {
- return ATTRS.UNIQUE
- } else {
- return ATTRS.OTHER_ATTR
- }
- }
- /**
- * @param {VAttribute | VDirective} attribute
- * @param { { [key: string]: number } } attributePosition
- * @param {SourceCode} sourceCode
- */
- function getPosition(attribute, attributePosition, sourceCode) {
- const attributeType = getAttributeType(attribute, sourceCode)
- return attributePosition.hasOwnProperty(attributeType)
- ? attributePosition[attributeType]
- : -1
- }
- /**
- * @param {VAttribute | VDirective} prevNode
- * @param {VAttribute | VDirective} currNode
- * @param {SourceCode} sourceCode
- */
- function isAlphabetical(prevNode, currNode, sourceCode) {
- const isSameType =
- getAttributeType(prevNode, sourceCode) ===
- getAttributeType(currNode, sourceCode)
- if (isSameType) {
- const prevName = getAttributeName(prevNode, sourceCode)
- const currName = getAttributeName(currNode, sourceCode)
- if (prevName === currName) {
- const prevIsBind = Boolean(
- prevNode.directive && prevNode.key.name.name === 'bind'
- )
- const currIsBind = Boolean(
- currNode.directive && currNode.key.name.name === 'bind'
- )
- return prevIsBind <= currIsBind
- }
- return prevName < currName
- }
- return true
- }
- /**
- * @param {RuleContext} context - The rule context.
- * @returns {RuleListener} AST event handlers.
- */
- function create(context) {
- const sourceCode = context.getSourceCode()
- let attributeOrder = [
- ATTRS.DEFINITION,
- ATTRS.LIST_RENDERING,
- ATTRS.CONDITIONALS,
- ATTRS.RENDER_MODIFIERS,
- ATTRS.GLOBAL,
- ATTRS.UNIQUE,
- ATTRS.TWO_WAY_BINDING,
- ATTRS.OTHER_DIRECTIVES,
- ATTRS.OTHER_ATTR,
- ATTRS.EVENTS,
- ATTRS.CONTENT
- ]
- if (context.options[0] && context.options[0].order) {
- attributeOrder = context.options[0].order
- }
- const alphabetical = Boolean(
- context.options[0] && context.options[0].alphabetical
- )
- /** @type { { [key: string]: number } } */
- const attributePosition = {}
- attributeOrder.forEach((item, i) => {
- if (Array.isArray(item)) {
- item.forEach((attr) => {
- attributePosition[attr] = i
- })
- } else attributePosition[item] = i
- })
- /**
- * @typedef {object} State
- * @property {number} currentPosition
- * @property {VAttribute | VDirective} previousNode
- */
- /**
- * @type {State | null}
- */
- let state
- /**
- * @param {VAttribute | VDirective} node
- * @param {VAttribute | VDirective} previousNode
- */
- function reportIssue(node, previousNode) {
- const currentNode = sourceCode.getText(node.key)
- const prevNode = sourceCode.getText(previousNode.key)
- context.report({
- node: node.key,
- loc: node.loc,
- message: `Attribute "${currentNode}" should go before "${prevNode}".`,
- data: {
- currentNode
- },
- fix(fixer) {
- const attributes = node.parent.attributes
- const shiftAttrs = attributes.slice(
- attributes.indexOf(previousNode),
- attributes.indexOf(node) + 1
- )
- return shiftAttrs.map((attr, i) => {
- const text =
- attr === previousNode
- ? sourceCode.getText(node)
- : sourceCode.getText(shiftAttrs[i - 1])
- return fixer.replaceText(attr, text)
- })
- }
- })
- }
- return utils.defineTemplateBodyVisitor(context, {
- VStartTag() {
- state = null
- },
- VAttribute(node) {
- let inAlphaOrder = true
- if (state && alphabetical) {
- inAlphaOrder = isAlphabetical(state.previousNode, node, sourceCode)
- }
- if (
- !state ||
- (state.currentPosition <=
- getPosition(node, attributePosition, sourceCode) &&
- inAlphaOrder)
- ) {
- state = {
- currentPosition: getPosition(node, attributePosition, sourceCode),
- previousNode: node
- }
- } else {
- reportIssue(node, state.previousNode)
- }
- }
- })
- }
- module.exports = {
- meta: {
- type: 'suggestion',
- docs: {
- description: 'enforce order of attributes',
- categories: ['vue3-recommended', 'recommended'],
- url: 'https://eslint.vuejs.org/rules/attributes-order.html'
- },
- fixable: 'code',
- schema: {
- type: 'array',
- properties: {
- order: {
- items: {
- type: 'string'
- },
- maxItems: 10,
- minItems: 10
- }
- }
- }
- },
- create
- }
|