Visual Studio Code配置自动规范代码格式-超级详细教程！！！

前言

代码的格式如果是少量需要调整的话还好，但是如果写了很多代码，不一定哪里就没有规范到格式，显得很不专业，一键自动规范格式功能简直不能再爽了，下面我自己使用的是Prettier - Code formatter这个插件来实现的自动规范格式

1. 安装插件

Prettier - Code formatter

在VSCode的插件库中搜索安装：

长这个样子：

2. 配置个性化设置

2.1 打开settings.json文件：

2.1.1 在左下角点击设置按钮

2.1.2 点击命令面板（或者也可以之间按快捷键Ctrl+Shift+P）

2.1.3 在弹出的搜索框输入 settings.json，打开箭头所指选项

2.2 在settings.json文件中添加如下配置并保存

{
    "workbench.sideBar.location": "left",
    "cssrem.rootFontSize": 80,
    "git.ignoreWindowsGit27Warning": true,
    "eslint.codeAction.showDocumentation": {
      "enable": true
    },
    //改变注释颜色
    // "editor.tokenColorCustomizations": {
    //   "comments": "#ff4f81" // 注释
    // }, 
      
      //导入文件时是否携带文件的扩展名
      "path-autocomplete.extensionOnlmport": true,
      //配置@的路径提示
      "path-autocomplete.pathMappings": {
          "@": "${folder}/src"
      },
    //配置eslint
    "eslint.validate": ["javascript", "javascriptreact", "html", "vue"],
    // "eslint.run": "onSave",
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": "explicit"
    },
    "editor.mouseWheelZoom": true,
    "editor.minimap.renderCharacters": false,
    "debug.javascript.defaultRuntimeExecutable": {
      "pwa-node": "node"
    },
    "open-in-browser.default": "{\"open-in-browser.default\":\"Chrome\"}",
    "files.associations": {
      "*.cjson": "jsonc",
      "*.wxss": "css",
      "*.wxs": "javascript"
    },
    "emmet.includeLanguages": {
      "wxml": "html"
    },
    "minapp-vscode.disableAutoConfig": true,
    "[python]": {
      "editor.formatOnType": true
    },
    "editor.detectIndentation": false,
    "explorer.compactFolders": false,
    // html使用prettier格式化
    "[html]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[vue]": {
      // "editor.defaultFormatter": "Vue.volar"
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    // json使用prettier格式化
    "[json]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[jsonc]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "editor.tabSize": 2,
    "[scss]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "px2rem.rootFontSize": 64,
    "px2rem.autoRemovePrefixZero": false,
    "editor.formatOnSave": true // 保存时自动规范代码
  }

2.3 重启VSCode

现在就可以实现点击**Ctrl+**s，保存文件的同时自动格式化啦

如果第一次使用保存时没有效果，需要按Shift+Alt+F，它会弹出让你设置默认的格式化程序，设置后后续就能正常使用保存时自动格式化功能啦，记得选第一个选项

3. 不想保存时自动格式化？

把settings.json文件最后一行

"editor.formatOnSave": true // 保存时自动规范代码

去掉后，

你可以按Shift+Alt+F来实现规范代码