VSCode配置代码格式化

通常，写代码的时候，我们都期望能够自动对代码的结构进行自动的调整，比如缩进之类的，这样我们就能够更多的去关注代码的逻辑的书写，而不用去关注其他；因此，代码的格式化是很必要的一个工具，这里将介绍VSCode配置代码格式化的一些简单配置

1. 首先，安装插件Prettier - Code formatter
   

   插件安装截图

2. 然后，对格式化代码进行配置
   进入VSCode的设置页面，如下图从文件>首选项>设置进入，或者使用快捷键Ctrl+,进入
   

   进入VScode设置页面

3. 进入settings.json中
   

   进入settings.json

4. 在settings.json中添加配置信息

{
    // 编辑器配置
    "editor.detectIndentation": false,
    "editor.fontSize": 16,
    "editor.tabSize": 4,
    "editor.formatOnSave": true,
    // "editor.defaultFormatter": "esbenp.prettier-vscode",

    // 代码格式化配置
    "prettier.tabWidth": 4,
    "[html]": {
        "editor.suggest.insertMode": "replace",
        "editor.defaultFormatter": "esbenp.prettier-vscode",
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[css]": {
        "editor.suggest.insertMode": "replace",
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[less]": {
        "editor.suggest.insertMode": "replace",
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}

至此，VSCode应该就能够实现代码格式化了