Eslint 单引号规则不适用于 vue 模板

Question

为什么 eslint 单引号规则不适用于 .vue？

.vue（我在这里没有收到警告。应该是

t('...')

）

<template>
    <span class="myClass">{{ t("myLabel") }}</span>
</template>

eslint规则

module.exports = {
  root: true,
  'extends': [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-typescript'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    quotes: ['warn', 'single'],
  },
  ignorePatterns: ['dist/']
}

package.json 脚本

"lint": "eslint . --ext .ts,.vue src/"

Answer 1

您应该使用

vue/html-quotes

将单引号规则添加到 .vue。

module.exports = {
  root: true,
  'extends': [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-typescript'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    quotes: ['warn', 'single'],
    'vue/html-quotes': [ 'warn', 'single']
  },
  ignorePatterns: ['dist/']
}

vue/html-quotes