9.vscode web开发常用设置

1.常用插件

工欲善其事必先利其器

• Vetur
• Vue 3 Snippets
• Prettier
• Auto Close Tag
• Bracket Pair Colorizer
• ESlint
• Git History
• vscode-icons

2.格式化配置

帮忙我们解决如下问题

• 自动格式化html
• 单引号和双引号使用自动转换
• 删除每行代码的分号
  Prettier和Vetur插件默认的格式化功能需要配置后才能满足我们的使用要求，进入settings.json文件进行修改。配置一个就可以了，效果一样。

2.1 Prettier格式化配置

    // settings.json
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    // prettier 选项配置
    "prettier.semi": false, // 语句末尾添加分号
    "prettier.singleQuote": true, // 使用单引号
    "prettier.trailingComma": "none", // 去掉结尾逗号

2.2 Vetur格式化配置

# settings.json
"vetur.format.defaultFormatterOptions": {
  "js-beautify-html": {
    "wrap_attributes": "auto",
    "end_with_newline": false,
    "wrap_line_length": 500
  },
  "prettier": {
    "singleQuote": true,
    "semi": false,
    "trailingComma": "none"
  }
}

3.其他设置

• 快速关闭/打开资源管理器窗口 ctrl + b
• 快速关闭/打开终端窗口 ctrl + ` (数字键1左边的符号）

• 设置终端窗口类型为git bash

  
  image.png