123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163 |
- 'use strict'
- const utils = require('../utils')
- const casing = require('../utils/casing')
- const { toRegExp } = require('../utils/regexp')
- const allowedCaseOptions = ['PascalCase', 'kebab-case']
- const defaultCase = 'PascalCase'
- module.exports = {
- meta: {
- type: 'suggestion',
- docs: {
- description:
- 'enforce specific casing for the component naming style in template',
- categories: undefined,
- url: 'https://eslint.vuejs.org/rules/component-name-in-template-casing.html'
- },
- fixable: 'code',
- schema: [
- {
- enum: allowedCaseOptions
- },
- {
- type: 'object',
- properties: {
- ignores: {
- type: 'array',
- items: { type: 'string' },
- uniqueItems: true,
- additionalItems: false
- },
- registeredComponentsOnly: {
- type: 'boolean'
- }
- },
- additionalProperties: false
- }
- ]
- },
-
- create(context) {
- const caseOption = context.options[0]
- const options = context.options[1] || {}
- const caseType =
- allowedCaseOptions.indexOf(caseOption) !== -1 ? caseOption : defaultCase
-
- const ignores = (options.ignores || []).map(toRegExp)
- const registeredComponentsOnly = options.registeredComponentsOnly !== false
- const tokens =
- context.parserServices.getTemplateBodyTokenStore &&
- context.parserServices.getTemplateBodyTokenStore()
-
- const registeredComponents = []
-
- function isVerifyTarget(node) {
- if (ignores.some((re) => re.test(node.rawName))) {
-
- return false
- }
- if (!registeredComponentsOnly) {
-
- if (
- (!utils.isHtmlElementNode(node) && !utils.isSvgElementNode(node)) ||
- utils.isHtmlWellKnownElementName(node.rawName) ||
- utils.isSvgWellKnownElementName(node.rawName)
- ) {
- return false
- }
- return true
- }
-
- if (
- registeredComponents
- .filter((name) => casing.isPascalCase(name))
- .some(
- (name) =>
- node.rawName === name || casing.pascalCase(node.rawName) === name
- )
- ) {
- return true
- }
- return false
- }
- let hasInvalidEOF = false
- return utils.defineTemplateBodyVisitor(
- context,
- {
- VElement(node) {
- if (hasInvalidEOF) {
- return
- }
- if (!isVerifyTarget(node)) {
- return
- }
- const name = node.rawName
- if (!casing.getChecker(caseType)(name)) {
- const startTag = node.startTag
- const open = tokens.getFirstToken(startTag)
- const casingName = casing.getExactConverter(caseType)(name)
- context.report({
- node: open,
- loc: open.loc,
- message: 'Component name "{{name}}" is not {{caseType}}.',
- data: {
- name,
- caseType
- },
- *fix(fixer) {
- yield fixer.replaceText(open, `<${casingName}`)
- const endTag = node.endTag
- if (endTag) {
- const endTagOpen = tokens.getFirstToken(endTag)
- yield fixer.replaceText(endTagOpen, `</${casingName}`)
- }
- }
- })
- }
- }
- },
- {
- Program(node) {
- hasInvalidEOF = utils.hasInvalidEOF(node)
- },
- ...(registeredComponentsOnly
- ? utils.executeOnVue(context, (obj) => {
- registeredComponents.push(
- ...utils.getRegisteredComponents(obj).map((n) => n.name)
- )
- })
- : {})
- }
- )
- }
- }
|