VSCode 前端开发环境安装及配置

兰玉磊

4 年前

开发工具介绍

HBuilder

HBuilder是专为前端打造的开发工具，编码速率快、最全的语法库和浏览器兼容数据、与MUI一起使用可以方便的制作手机APP、柔设计等特点。支持HTML、CSS、JS、PHP的快速开发。对Vue的支持非常好。同时如果你要进行多端开发的话，推荐使用这个开发工具。

Visual Studio Code （推荐）

简称 VS Code / VSC，是一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义快捷键、括号匹配和颜色区分、代码片段、代码对比 Diff、GIT命令等特性，支持插件扩展，并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux，运行流畅，可谓是微软的良心之作。插件、主题非常的多，而且不像WebStorm那么吃内存。

WebStorm

WebStorm 是 JetBrains 推出的一款商业的 JavaScript 开发工具，不像前面介绍的两个开发工具是免费的，WebStorm是收费，但是WebStorm的功能还是非常强大的，支持自动代码完成，动态代码分析，重构支持以及VCS集成，被誉为最智能的JavaScript IDE。WebStorm最大的特点是支持一系列最新的技术，比如HTML5，CSS3，Node.js，AngularJS，Dart，CoffeeScript，TypeScript，LESS，Sass，手写笔，Karma，mocha，Emmet，RequireJS等等，可谓前端开发的“神器”，非常的强大！如果经济能力比较不错的话，还是可以支持一下正版的。因为我经济能力有限，所有就用了功能同样也非常强大而且非常灵活的VSCode。

VSCode 配置安装

VSCode下载

VSCode下载地址

开发小技巧

配置快捷输入

在vs code中，使用快捷键Command+Shift+P打开搜索栏–>输入snippet–>选择首选项

打开了snippet搜索栏–>输入vue–>选择vue.json

在打开的vue.json中输入下面内容

{
    "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": "创建一个自定义的vue组件代码块"
    }
}

准备完毕，现在来试一下，创建demo.vue文件，输入vue，然后按回车键