美文网首页
9.vscode web开发常用设置

9.vscode web开发常用设置

作者: zouhao1985 | 来源:发表于2022-04-30 19:20 被阅读0次

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

相关文章

网友评论

      本文标题:9.vscode web开发常用设置

      本文链接:https://www.haomeiwen.com/subject/fuiyyrtx.html