VS Code 高效撸码

如果曾经配置过，请直接同步配置和插件

所有的配置(代码片段,快捷键，设置）在：/Users/xxx/.config/Code/User 下(Windows: C:\Users\xxx\AppData\Roaming\Code\User)

所有的插件的文件在：/Users/xxx/.vscode/extensions 下(Windows: C:\Users\xxx\.vscode)

常用设置

2个空格设置，且一键格式化
a. 打开文件——》首选——》设置 ——》打开 User Setting.json
b. 添加如下配置。

{
    "editor.detectIndentation": false,
    "editor.tabSize": 2,
}

vue 文件支持一键格式化功能
a. 安装 Vetur 插件
b. 打开文件——》首选——》设置 ——》打开 User Setting.json
c. 添加如下配置。

{
    "vetur.format.defaultFormatter.html": "prettyhtml"
}

常用插件

1. 常用插件安装
   插件介绍也在图片里面
   

常用快捷键

1. 代码展开和收缩
   代码展开：ctrl+k and ctrl+j
   mac：cmd+k and cmd+j
   代码收缩：ctrl+k and ctrl+num（收缩级别）
   mac: cmd+k and cmd+num

代码块设置

vscode 创建 vue 代码片段
a, 安装VueHelper扩展，安装后重启以下vscode

b, 打开用户代码片段
Ctrl+Shift+P打开命令输入 snippets; 在搜索框输入vue选择‘vue’
c, 复制粘贴以下代码片段

"Print to console": {
    "prefix": "vue",
    "body": [
        "<template>",
        "  <div>\n",
        "  </div>",
        "</template>\n",
        "<script>",
        "export default {",
        "  data () {",
        "    return {\n",
        "    }",
        "  },",
        "  components: {\n",
        "  }",
        "}",
        "</script>\n",
        "<style>\n",
        "</style>",
        "$2"
    ],
    "description": "Log output to console"
  }

d, 新建.vue文件, 输入vue, 按tab即可创建vue模板

vscode 创建 js 代码片段
如创建 vuex文件模板
a, Ctrl+Shift+P打开命令输入 snippets; 在搜索框输入 JavaScript 选择‘JavaScript.json’
b, 复制粘贴以下代码片段

  "Print to console": {
    "prefix": "vuex",
    "body": [
      "export default {",
          "  state: {",
          "  },",
          "  getters: {",
          "  },",
          "  mutations: {",
          "  },",
          "  actions: {",
          "  }",
          "}\n",
    ],
    "description": "Log output to console"
  }

文件关联，高亮配置

1. .tpl文件
   点击菜单 文件->首选项->设置 输入如下代码

"files.associations": {
    "*.tpl": "html"
}