开发工具介绍

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下载地址

推荐插件

1. Chinese（Simplified）language 简体中文插件
2. One Monokai Theme 界面主题
3. Settings Sync 环境配置同步
4. TODO Highlight 待办高亮
5. Open in Browser 快速在浏览器打开
6. Auto Rename Tag 自动重命名配对的HTML / XML标记
7. Auto Close Tag 输入完整左标签后，结束标签将被自动插入
8. CSS Peek 追踪至样式表中CSS类和id定义的地方
9. JavaScript (ES6) code snippets 用于 Vscode 编辑器的 ES6 语法的 JavaScript 代码片段
10. Vetur vue开发必备, 可以格式化.vue文件, 由官方维护
11. Vue 2 Snippets 将Vue 2代码片段和语法突出显示添加到Visual Studio代码中
12. WakaTime 统计开发时间和效率
13. ESLint 代码规范
14. Prettier 目前 Web 开发中最受欢迎的代码格式化程序。它就能够自动应用 Prettier，并将整个 JS 和 CSS 文档快速格式化为统一的代码样式。
15. Editor Config 可以让团队开发时统一约定好一种规范，这个主流的编辑器都支持
16. Markdown 如果你经常使用 Markdown 的话，还可以使用安装markdownlint和Markdown All in One这两个插件，前者可以约束编写的格式，后者提供方便的键盘快捷方式，目录，自动预览等
17. NPM 帮助管理依赖包的。有助于管理Package.json，当生产环境依赖包未安装时会发出警告，并确保安装的版本正确
18. Live Sass Compiler 它可以将SASS /SCSS文件实时编译为CSS文件，并在浏览器中展示已编译样式的实时预览
19. Debugger for Chrome 通过这个插件，开发者可以直接在VS Code中进行以上测试和调试代码
20. Beautify 它同Prettier十分类似，是一种出色的代码格式化扩展插件。可以用它格式化以JavaScript，JSON，CSS，Sass和HTML编写的代码。
21. Live Server 开启一个本地开发服务器，为静态网页和动态网页提供服务。使用编辑器中的go-live按钮，开发者可以立即把代码放到服务器上，该扩展插件还支持实时刷新页面
22. Project Manager 多项目管理。
23. Auto Import 自动导入包
24. Bracket Pair Colorizer 为代码中的首尾括号添上一抹亮色
25. GitLens 能增强Visual Studio代码中内置的Git功能
26. Material Icon Theme 对当前流行语言和后缀名进行单独匹配好看又丰富的图标
27. vscode-element-helper 一款针对Element的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，然后按回车键

接下来就可以看到一段完整的vue组件代码被生成了

可根据自己的需求来定制vue，当然也可以创建其它的代码块

HTML代码快速生成

使用一个 “!” 生成HTML代码块

接下来就可以看到一段完整的HTML代码被生成了

更多技巧，自己百度或者Google即可。