Add extension rule vue/quotes

docs/rules/index.md

@@ -328,6 +328,7 @@ The following rules extend the rules provided by ESLint itself and apply them to
 | [vue/operator-linebreak](./operator-linebreak.md) | Enforce consistent linebreak style for operators in `<template>` | :wrench: | :lipstick: |
 | [vue/prefer-template](./prefer-template.md) | Require template literals instead of string concatenation in `<template>` | :wrench: | :hammer: |
 | [vue/quote-props](./quote-props.md) | Require quotes around object literal property names in `<template>` | :wrench: | :lipstick: |
+| [vue/quotes](./quotes.md) | Enforce the consistent use of either backticks, double, or single quotes in `<template>` | :wrench: | :lipstick: |
 | [vue/space-in-parens](./space-in-parens.md) | Enforce consistent spacing inside parentheses in `<template>` | :wrench: | :lipstick: |
 | [vue/space-infix-ops](./space-infix-ops.md) | Require spacing around infix operators in `<template>` | :wrench: | :lipstick: |
 | [vue/space-unary-ops](./space-unary-ops.md) | Enforce consistent spacing before or after unary operators in `<template>` | :wrench: | :lipstick: |

docs/rules/quotes.md

@@ -0,0 +1,28 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/quotes
+description: Enforce the consistent use of either backticks, double, or single quotes in `<template>`
+---
+
+# vue/quotes
+
+> Enforce the consistent use of either backticks, double, or single quotes in `<template>`
+
+- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> _**This rule has not been released yet.**_ </badge>
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+
+This rule is the same rule as stylistic [quotes] rule but it applies to the expressions in `<template>`.
+
+## :book: Rule Details
+
+- [quotes]
+
+[quotes]: https://eslint.style/rules/js/quotes
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/quotes.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/quotes.js)
+
+<sup>Taken with ❤️ [from ESLint Stylistic](https://eslint.style/rules/ts/quotes)</sup>

lib/configs/no-layout-rules.js

@@ -46,6 +46,7 @@ module.exports = {
     'vue/padding-line-between-tags': 'off',
     'vue/padding-lines-in-component-definition': 'off',
     'vue/quote-props': 'off',
+    'vue/quotes': 'off',
     'vue/script-indent': 'off',
     'vue/singleline-html-element-content-newline': 'off',
     'vue/space-in-parens': 'off',

lib/index.js

@@ -207,6 +207,7 @@
     'prefer-true-attribute-shorthand': require('./rules/prefer-true-attribute-shorthand'),
     'prop-name-casing': require('./rules/prop-name-casing'),
     'quote-props': require('./rules/quote-props'),
+    quotes: require('./rules/quotes'),
     'require-component-is': require('./rules/require-component-is'),
     'require-default-prop': require('./rules/require-default-prop'),
     'require-direct-export': require('./rules/require-direct-export'),
@@ -277,7 +278,7 @@
     vue: require('./processor')
   },
   environments: {
     // TODO Remove in the next major version
     /** @deprecated */
     'setup-compiler-macros': {
       globals: {

lib/rules/quotes.js

@@ -0,0 +1,10 @@
+/**
+ * @author Nhan Nguyen
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const { wrapStylisticOrCoreRule } = require('../utils')
+
+// eslint-disable-next-line internal/no-invalid-meta
+module.exports = wrapStylisticOrCoreRule('quotes')

tests/lib/rules/quotes.js

@@ -0,0 +1,113 @@
+/**
+ * @author Nhan Nguyen
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('../../eslint-compat').RuleTester
+const rule = require('../../../lib/rules/quotes')
+
+const tester = new RuleTester({
+  languageOptions: {
+    parser: require('vue-eslint-parser'),
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
+})
+
+tester.run('quotes', rule, {
+  valid: [
+    `<template>
+      <div>{{ "hello" }}</div>
+    </template>`,
+    `<template>
+      <div>'This string contains "single" quotes'</div>
+    </template>`,
+    {
+      code: `
+        <template>
+          <div>{{ 'hello' }}</div>
+        </template>`,
+      options: ['single']
+    },
+    {
+      code: `
+        <template>
+          <div>{{ \`hello\` }}</div>
+        </template>`,
+      options: ['backtick']
+    },
+    {
+      code: `
+        <template>
+          <div>"This string contains 'single' quotes"</div>
+        </template>`,
+      options: ['single', { avoidEscape: true }]
+    },
+    {
+      code: `
+        <template>
+          <div>'This string contains "double" quotes'</div>
+        </template>`,
+      options: ['double', { avoidEscape: true }]
+    }
+  ],
+  invalid: [
+    {
+      code: `
+      <template>
+        <div>{{ 'hello' }}</div>
+      </template>
+      `,
+      output: `
+      <template>
+        <div>{{ "hello" }}</div>
+      </template>
+      `,
+      errors: [
+        {
+          message: 'Strings must use doublequote.',
+          line: 3
+        }
+      ]
+    },
+    {
+      code: `
+      <template>
+        <div>{{ "hello" }}</div>
+      </template>
+      `,
+      output: `
+      <template>
+        <div>{{ 'hello' }}</div>
+      </template>
+      `,
+      options: ['single'],
+      errors: [
+        {
+          message: 'Strings must use singlequote.',
+          line: 3
+        }
+      ]
+    },
+    {
+      code: `
+      <template>
+        <div>{{ 'hello' }}</div>
+      </template>
+      `,
+      output: `
+      <template>
+        <div>{{ \`hello\` }}</div>
+      </template>
+      `,
+      options: ['backtick'],
+      errors: [
+        {
+          message: 'Strings must use backtick.',
+          line: 3
+        }
+      ]
+    }
+  ]
+})