vscode常用插件

桌面打包工具 Nativefier

在线网页打包成桌面APP，原理是用Electron包装一下

PicGo多图床上传工具+smms图床

在线图片服务器

vscode安装插件

vetur

vue语法高亮、智能提示、格式化

vscode-icons

文件树添加图标

Auto Close Tag

自动补全HTML标签

Auto Rename Tag

自动改名标签

Path Intellisense

路径提示

Visual Studio IntelliCode

代码智能提示

GitLens

每一行代码git记录

Todo Tree

左侧栏生成todo树，如todo，bug，NOTE

Bracket Pair Colorizer

括号添加不同颜色

koroFileHeader

文件和函数头部添加注释

ctrl+alt+i 文件头部
ctrl+alt+t 函数头部

eslint+prettier

默认会找用户的文件如.eslintrc或者xx 找不到则用浏览器配置

//保存时自动格式化
// 添加vue支持
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue"
  ],
  // 保存后自动修复格式
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }

Partial Diff

比较两段文本差异

选中一代码，右键Select Text for Compare，选中另外一部分代码，右键Compare Text with Previous Selection即可

Code Spell Checker

代码拼写检查

Indent-Rainbow

代码辅助线采用四种颜色区分

filesize

显示当前文件大小、点击查看创建、修改时间

REST Client

直接发送请求到服务器 并在vscode查看响应

HTML CSS Support

vue文件template里css智能提示

"editor.suggest.snippetsPreventQuickSuggestions": false,
"editor.quickSuggestions": {
    "other": true,
    "comments": true,
    "strings": true
  }
``

##### vue模板设置

```javascript
设置--首选项--代码片段设置
    "Print to console": {
        "prefix": "vue",
        "body": [
            "<template>",
            "  <div class=\"container\">\n",
            "  </div>",
            "</template>\n",
            "<script>",
            "export default {",
            "  props: {},",
            "  components: {},",
            "  data() {",
            "    return {};",
            "  },",
            "  computed: {},",
            "  watch: {},",
            "  created() {},",
            "  methods: {}",
            "}",
            "</script>\n",
            "<style scoped lang=\"scss\">",
            "</style>",
            "$2"
        ],
        "description": "Log output to console"
    }

HJson

hjson文件样式美化

Better Comments

彩色注释

Peacock

不同颜色区分工作区

SVG View

svg预览