目录

分析

解决


分析

  • 添加了 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
}
  • 放在根目录下,例如:image.png
  • 问题解决w
Logo

前往低代码交流专区

更多推荐