我正在尝试将我的VSCode编辑器设置为autoformat我的Vuejs代码 . 我正在使用Vetur扩展，Prettier extension和ESLint extension .
The problem is that when I save my .vue files, the single quotes are automatically changed to double quotes in my <template> elements:
当我像这样编写代码然后保存...
<template>
<section>
<section v-if='errored'>
...snip...
</template>
VSCode自动将单引号更改为.vue template 部分中的双引号，如下所示：
<template>
<section>
<section v-if="errored"> <--------
...snip...
</template>
然后我会收到其他 <template> 代码的警告和错误 . 但是， .vue 单个文件组件的 <script> 和 <style> 部分中的代码保持不变/和/或正确固定....它只是具有上述问题的 <template> 部分 . 那么，我的设置是否正确？
我的设置是：
我在项目根 .prettierrc.js 中设置了我的Prettier配置文件，如下所示：
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 user settings 我有：
...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"
}