前言：vscode徒手写代码，发现界面看着很是别扭，譬如，代码缩进问题，代码格式化或者tab都是默认缩进2格，那么如果配置成默认缩进4格呢？对比图如下：
    image.png

    步骤：

    1. 找到配置文件settings.json

    image.png

    1. 配置settings.json信息
      1. {
      2.  // vscode默认启用了根据文件类型自动设置tabsize的选项
      3.  "editor.detectIndentation": false,
      4.  // 重新设定tabsize
      5.  "editor.tabSize": 4,
      6.  // #值设置为true时，每次保存的时候自动格式化；值设置为false时，代码格式化请按shift+alt+F
      7.  "editor.formatOnSave": false,
      8.  // #每次保存的时候将代码按eslint格式进行修复
      9.  "eslint.autoFixOnSave": true,
      10.  // 添加 vue 支持
      11.  "eslint.validate": [
      12.      "javascript",
      13.      "javascriptreact",
      14.      {
      15.          "language": "vue",
      16.          "autoFix": true
      17.      }
      18.  ],
      19.  //  #让prettier使用eslint的代码格式进行校验
      20.  "prettier.eslintIntegration": true,
      21.  //  #去掉代码结尾的分号
      22.  "prettier.semi": false,
      23.  //  #使用带引号替代双引号
      24.  "prettier.singleQuote": true,
      25.  "prettier.tabWidth": 4,
      26.  //  #让函数(名)和后面的括号之间加个空格
      27.  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
      28.  // #这个按用户自身习惯选择
      29.  "vetur.format.defaultFormatter.html": "js-beautify-html",
      30.  // #让vue中的js按"prettier"格式进行格式化
      31.  "vetur.format.defaultFormatter.js": "prettier",
      32.  "vetur.format.defaultFormatterOptions": {
      33.      "js-beautify-html": {
      34.          // #vue组件中html代码格式化样式
      35.          "wrap_attributes": "force-aligned", //也可以设置为“auto”，效果会不一样
      36.          "wrap_line_length": 200,
      37.          "end_with_newline": false,
      38.          "semi": false,
      39.          "singleQuote": true
      40.      },
      41.      "prettier": {
      42.          "semi": false,
      43.          "singleQuote": true
      44.      }
      45.  },
      46.  "[jsonc]": {
      47.      "editor.defaultFormatter": "esbenp.prettier-vscode"
      48.  },
      49.  // 格式化stylus, 需安装Manta's Stylus Supremacy插件
      50.  "stylusSupremacy.insertColons": false, // 是否插入冒号
      51.  "stylusSupremacy.insertSemicolons": false, // 是否插入分号
      52.  "stylusSupremacy.insertBraces": false, // 是否插入大括号
      53.  "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
      54.  "stylusSupremacy.insertNewLineAroundBlocks": false,
      55.  "prettier.useTabs": true,
      56.  "files.autoSave": "off",
      57.  "explorer.confirmDelete": false,
      58.  "[javascript]": {
      59.      "editor.defaultFormatter": "esbenp.prettier-vscode"
      60.  },
      61.  "[json]": {
      62.      "editor.defaultFormatter": "esbenp.prettier-vscode"
      63.  },
      64.  "diffEditor.ignoreTrimWhitespace": false // 两个选择器中是否换行
      65. }
      参考资料：vsCode格式化插件