eslint-plugin-vue/lib/rules/attribute-hyphenation.js

Official ESLint plugin for Vue.js

/**
 * @fileoverview Define a style for the props casing in templates.
 * @author Armano
 */
'use strict'

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

// ------------------------------------------------------------------------------
// Rule Definition
// ------------------------------------------------------------------------------

function create (context) {
  const sourceCode = context.getSourceCode()
  const options = context.options[0]
  const useHyphenated = options !== 'never'

  const caseConverter = casing.getConverter(useHyphenated ? 'kebab-case' : 'camelCase')

  function reportIssue (node, name) {
    const text = sourceCode.getText(node.key)

    context.report({
      node: node.key,
      loc: node.loc,
      message: useHyphenated ? "Attribute '{{text}}' must be hyphenated." : "Attribute '{{text}}' cann't be hyphenated.",
      data: {
        text
      },
      fix: fixer => fixer.replaceText(node.key, text.replace(name, caseConverter(name)))
    })
  }

  function isIgnoredAttribute (value) {
    if (value.indexOf('data-') !== -1 || value.indexOf('aria-') !== -1) {
      return true
    }
    return useHyphenated ? value.toLowerCase() === value : !/-/.test(value)
  }

  // ----------------------------------------------------------------------
  // Public
  // ----------------------------------------------------------------------

  utils.registerTemplateBodyVisitor(context, {
    VAttribute (node) {
      if (!utils.isCustomComponent(node.parent.parent)) return

      const name = !node.directive ? node.key.rawName : node.key.name === 'bind' ? node.key.raw.argument : false
      if (!name || isIgnoredAttribute(name)) return

      reportIssue(node, name)
    }
  })

  return {}
}

module.exports = {
  meta: {
    docs: {
      description: 'Define a style for the props casing in templates.',
      category: 'Stylistic Issues',
      recommended: false
    },
    fixable: 'code',
    schema: [
      {
        enum: ['always', 'never']
      }
    ]
  },

  create
}