VSCode Prettier 单引号设置无效、同时使用 Eslint、Vetur、Prettier 格式化失效 的解决方案

目录

分析

解决

---

分析

• 添加了 Eslint、Vetur、Prettier 三个格式化插件

1. Eslint：Vue项目代码检查
2. Vetur：Vue代码高亮
3. Prettier：格式化代码风格

• Eslint 其实可以在保存时，可以自动格式化代码（比如添加单引号，末尾添加分号，去除空格等等），需要添加下方代码：

  // 开启对.vue 等文件的检查
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "vue",
        "typescript"
    ],
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },

• 但是我的 vscode 就是实现不了，所以我添加了 Prettier插件 用于格式化代码，并将该插件设置为 使用单引号
• 但实际格式化时发现，单引号变成了双引号，保存时也没自动格式化（脏话ing...）

解决

• Google后，在 prettier issue 中发现了原因：
• prettier3.7 以上会优先读取 项目根目录 下的 .editorconfig 或 .prettierrc 文件，如果有，就不会使用 VSCode setting.json 中的配置，所以，最好每个项目都配置一个单独的 .prettierrc文件，内容如下：

{
  "printWidth": 120,
  "tabWidth": 2,
  "singleQuote": true,
  "semi": true,
  "bracketSpacing": true,
  "jsxBracketSameLine": true
}

• 放在根目录下，例如：
• 问题解决w