vscode配置&vue

看文章好多大神推荐vscode和vue更配，所以我也来学习一下下。

• 官网下载安装

• 插件安装。快捷键：ctrl+shift+x（文件-首选项-扩展）

• 映射webstorm快捷键。因为之前用的是webstorm，所以首先下载了一个webstrom版本的快捷键，ctrl+k,ctrl+M快捷键映射，打开如图。
  然后搜索IntelliJ IDEA Key Bindings，install。
  Snipaste_2019-08-05_20-53-28.png
• 安装vetur。vue高亮的。
• 配置vue文件emmet。打开一个vue文件，输div tab，发现emmet语法失效，其实emmet vscode是内置了的，但是需要设置一下vue文件才可以生效。打开文件-首选项-设置，搜索：emmet.includeLanguages,输入如下内容,保存即可。

{emmet.triggerExpansionOnTab": true,
"emmet.includeLanguages": {
    "vue-html": "html",
    "vue": "html"
}

• 安装esLint。文件-首选项-设置，搜索esLint，install。

• 安装pretty。代码优化工具。

• 搜索文件settings.json输入以下内容。分别对eslint,vetur,prettier进行设置

{
    "files.autoSave":"off",
    "eslint.validate": [
       "javascript",
       "javascriptreact",
       "html",
       { "language": "vue", "autoFix": true }
     ],
     "eslint.options": {
        "plugins": ["html"]
     }
    // 每行在这个字符数内整合代码,根据自己屏幕情况设定
    "prettier.printWidth": 120,
    // 是否在每行末尾加上分号
    "prettier.semi": false,
    // 如果为true，将使用单单引号否则使用双引号
    "prettier.singleQuote": true,
    // 对html的内容使用js-beautify-html
    "vetur.format.defaultFormatter.html": "js-beautify-html"
}

• 此时，找到一个vue文件，Alt+Shift+F，代码会按照指定的规则格式化。
• 使用snippet生成代码块。
  • ctrl+shift+p,搜索snippet,选择user snippets,输入vue,选择vue.json,然后输入以下内容。

  • 成功后，创建一个vue空白文件，输入vue,出现如下选择然后回车，即可生成vue片段模板。

    
    代码片段生成.png

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

• 大神github上有一份很全的vscode插件，可以参考,配置团队和自己风格的代码格式。