VSCode和HBuilder编辑器

1.VSCode：因其控制、调试和插件功能丰富而被开发者信赖，
（1）常用插件：代码美化 Beautify、代码检查工具 ESLint/Prettier、调试工具 Debugger for Chrome、Auto close Tag、css Support等。
优点：快速注释 Document This、代码拼写检查 Code Spell Checker，其他（模板快速生成、tag检查、内部集成Git、ES6code检索与版本兼容、snippets提示）、查看大纲的html树，less的层序、每个js方法
调试：DeBug单步调试，结合真机浏览器的单元测试（和浏览器断点类似），谷歌浏览器的调试插件，结合真机断点联调，可以在实现热更新的情况下实时调试，并可以查看相关堆栈的返回情况，数据处理情况等。
主要说明：
1.live server（单页面调试，Webpack自助构建项目，相关无法调试，必须打完包后调试。不建议使用（单页面的项目可以使用）。）
1）.安装 live server 插件
2）、vscode右下角会有 Go Live 标识点击
3）、cmd ipconfig 查询自己电脑的ip地址
4）、复制地址替换端口前的地址
5）、移动端即可预览
2.可以调试样式展示，框架兼容，也可以实现热更新，接口类要结合VScode内断点使用）
{//变量配置，可以实现局域网内调试
“name”: “chrome”,
“type”: “chrome”,
“request”: “launch”,
“url”: “http://localhost:8080/”,
“webRoot”: “${workspaceRoot}”
}

2.HBuilder：编写快速，代码块完整
开发优势：开发一次同时生成App、小程序、H5等
css友好提示，完整的语法提示和代码输入法、代码块等，大幅提升HTML、js、css的开发效率。
调试：可以使用浏览器、可以自行配置服务器、也可以使用真机，支持HTML5的Web开发IDE，它基于Eclipse，所以顺其自然地兼容了Eclipse的插件（Eclipse插件少，且对前端没什么实质的作用）。