美文网首页
vscode配置&vue

vscode配置&vue

作者: 云桃桃 | 来源:发表于2019-08-05 21:43 被阅读0次

看文章好多大神推荐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插件,可以参考,配置团队和自己风格的代码格式。

相关文章

网友评论

      本文标题:vscode配置&vue

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