vscode格式化代码

安装插件：Eslint   Vetur  prettier

加这些到setting.json里去

{
  "editor.fontFamily": "Consolas, 'Courier New', monospace",
  "explorer.confirmDelete": false,
  // 添加 vue 支持
  "editor.fontSize": 16,
  "git.autofetch": true,
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },
  // tab 大小为2个空格
  "editor.tabSize": 2,
  // 100 列后换行
  //"editor.wordWrapColumn": 100,
  // 保存时格式化
  //"editor.formatOnSave": true,
  // tab 大小为2个空格

  // 保存时格式化
  "editor.formatOnSave": true,
  // 开启 vscode 文件路径导航
  "breadcrumbs.enabled": true,
  // prettier 设置语句末尾不加分号
  //"prettier.semi": false,
  // prettier 设置强制单引号
  //"prettier.singleQuote": true,
  // 选择 vue 文件中 template 的格式化工具
  "vetur.format.defaultFormatter.html": "prettyhtml",
  // 显示 markdown 中英文切换时产生的特殊字符
  "editor.renderControlCharacters": true,
  // 设置 eslint 保存时自动修复
  "eslint.autoFixOnSave": true,
  // eslint 检测文件类型
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "react",
      "autoFix": true
    }
  ],
  // vetur 的自定义设置
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "singleQuote": true,
      "semi": false
    }
  }
}

 

 

问题1：

VSCode 的 react 格式化代码后 代码格式就乱了 

补充：出现这种情况的原因，一般是因为童鞋们用了vscode的Beautify插件，这个插件需要手动设置以下截图上的操作。因为vscode一开始默认选中的是JavaScript。

另外说明以下，Prettier插件与Beautify是一类插件，用了某个，另外一个就不起效。

这边补充一个我常用的插件链接：https://blog.csdn.net/hzxOnlineOk/article/details/103767466

 

我设置了保存自动格式化代码，然鹅，格式化后代码简直让我想砸键盘，怎么办？(DIV元素或者组件的排版乱七八糟上蹿下跳。。。)

点击右下角的javaScript， 在弹出的选择框中， 输入选择JavascriptReact或者TypescriptReact

Now, 让我们尝试格式化一下？  OK So beautiful!

鉴于第一次碰到这种情况的新手可能不了解在哪里修改，我下边补充一张截图：