VSCode <template> 在使用 Vetur 和 Prettier 和 Vue-Cli 3 时不会将双引号更改为单引号

Question

我正在尝试设置VSCode编辑器以自动设置Vuejs代码的格式。我正在使用Vetur扩展、Prettier扩展和ESLint扩展。

问题是，当我保存.vue文件时，<template>元素中的单引号会自动更改为双引号：

当我这样写代码然后保存。。。

<template>
<section>
<section v-if='errored'>
...snip...
</template>

VSCode自动将.vuetemplate部分中的单引号更改为双引号，如下所示：

<template>
<section>
<section v-if="errored"> <-------- 
...snip...
</template>

然后，我得到了<template>代码其余部分的警告和错误。但是，.vue单个文件组件的<script>和<style>部分中的代码保持完整/和/或正确固定。。。。只是<template>部分存在上述问题。那么，我的设置正确吗？

我的设置是：

我在项目根目录中设置了Prettier配置文件.prettierrc.js，如下所示：

module.exports = {
singleQuote: true
};

我的.eslintrc.js看起来是这样的：

module.exports = {
root: true,
env: {
node: true
},
extends: [
'plugin:vue/essential',
'plugin:prettier/recommended',
'@vue/prettier'
],
rules: {
'no-console': 'off',
'no-debugger': 'off'
},
parserOptions: {
parser: 'babel-eslint'
}
};

然后在我的VSCode用户设置中，我有：

...snip..
"vetur.validation.template": false, <-- turn off Vetur’s linting feature and rely on ESLint + Prettier, instead
"eslint.validate": [
{
"language": "vue",
"autoFix": true
},
{
"language": "html",
"autoFix": true
},
{
"language": "javascript",
"autoFix": true
}
],
"eslint.autoFixOnSave": true,
"editor.formatOnSave": true

应用程序的package.json文件包含以下devDependencies:

"devDependencies": {
"@vue/cli-plugin-babel": "^3.2.0",
"@vue/cli-plugin-eslint": "^3.2.1",
"@vue/cli-service": "^3.2.0",
"@vue/eslint-config-prettier": "^4.0.1",
"node-sass": "^4.9.4",
"sass-loader": "^7.1.0",
"vue-template-compiler": "^2.5.17"
}

Answer 1

我在运行npmrun serve in的目录中创建了一个名为.prettierrc.js的文件。

此文件包含：

module.exports = {
singleQuote: true,
trailingComma: "es5",
printWidth: 200
};

现在，除了超过200的方法调用外，它基本上可以工作。然后pretier忘记了末尾的逗号。

Answer 2

我找到的唯一方法是从我的.eslintrc.js中删除以下内容

'plugin:prettier/recommended',
'@vue/prettier'

Answer 3

将默认格式化程序从漂亮改为vetur对我来说很有效