VS Code 代码格式化

这几天在接触学习 sass 的时候，可以将 sass 文件编译成 css 文件，但是当代码过多的时候，看起来并不美观，甚至还有一点乱糟糟的感觉。

对于我这个天秤座的人来说只能接受优雅美观的东西，所以为了让代码看起来更加优美，我们需要配置 vscode 使其具有代码格式化功能。

一：.需要安装三个插件

1.ESLint

2.Prettier - Code formatter

3.Vetur

二：在 setting 下设置

打开 setting 的方式

对于Windows

file --> preferences -->setting

对于MAC

Code --> preferences -->setting

我这里以 Windows 为例

三：打开 setting.json 文件

在 setting 界面中右上角有一个打开图标，点击即可打开 setting.json 文件

在 setting.json 文件中添加配置

配置代码如下：

{
  // tab 大小为2个空格 
  "editor.tabSize": 2,
  // 100 列后换行
  "editor.wordWrapColumn": 100,
  // 保存时格式化
  "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
    }
  ],
  // vetur 的自定义设置  
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "singleQuote": true,
      "semi": false
    }
  }
}
           

四：重启 VS Code 即可。

代码格式化方法：

选中我们需要格式化的代码右击， 会有一个

Format Document

选项，点击一下即可格式化；或者选中代码利用快捷键

Shift + Alt + F

进行格式化

五：效果如下

格式化之前：代码与括号拥挤一行

格式化以后：代码与括号分开，看起来会更加舒畅。

如有错误请联系我，会及时修改，biubiubiu~