VsCode 自定义格式化样式

step1:

打开设置 —> 在搜索栏中输入setting

setp2：

复制以下代码在setting.json 中

{
  "workbench.startupEditor": "none",
  "workbench.iconTheme": "vscode-icons",
  "vetur.completion.scaffoldSnippetSources": {
    "workspace": "",
    "user": "️",
    "vetur": "✌"
  },

  // vetur 插件配置
  "emmet.syntaxProfiles": {
    "vue-html": "html",
    "vue": "html"
  },
  // eslint插件配置
  "eslint.validate": ["javascript", "gavesciptreact", "html", "vue"],
  "eslint.run": "onType",
  "eslint.options": {
    "plugins": ["html"],
    "extensions": [".js", ".vue", ".jsx", ".tsx"] //格式化
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  // "[vue]": {
  //   "editor.defaultFormatter": "esbenp.prettier-vscode"
  // },
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "editor.unicodeHighlight.allowedCharacters": {
    " ": true
  },
  "files.autoSave": "onFocusChange", // 保存时格式化
  "editor.formatOnType": true,
  "cssrem.rootFontSize": 80,
  "editor.fontSize": 16,
  "emmet.preferences": {
    "editor.formatOnType": true,
    "editor.formatOnSave": true
  },
  //
  "vetur.format.defaultFormatter.css": "none",
  "vetur.format.defaultFormatter.scss": "none",
  "vetur.format.defaultFormatter.less": "none",
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "workbench.colorTheme": "Moonlight II",
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "prettier.tabWidth": 4, // 缩进字节数

  // 函数声明时小括号前后要加空格
  // 如果你使用prettier这一项是不能做选择的，导致和eslint默认配置的冲突
  // 可以在百度中搜到很多的记录： https://www.baidu.com/s?wd=prettier%20%E5%87%BD%E6%95%B0%E7%A9%BA%E6%A0%BC
  "prettier.spaceBeforeFunctionParen": true,

  // react的jsx让>与结束标签同行
  "prettier.jsxBracketSameLine": true,
  "prettier.bracketSpacing": false, // 去掉数组内部前后的空格
  "prettier.semi": false, // 不要给语句加;
  "prettier.singleQuote": true, // 采用单引号
  "prettier.trailingComma": "none", // 不要尾随逗号,
  "prettier.printWidth": 180, // 每行超过80列就换行

  // 在.js中，写div按下tab就可以自动补全，而不需要写