本来开发环境搭建这一节其实是可以省略的，毕竟市面上的开发工具和大家各自喜爱的系统、工具、配置的开发环境都是萝卜青菜各有所爱，没有说谁的环境是百分百标准的，也没有说谁的环境很差，用都用不了。但是最近给很多同学答疑的时候发现，大家所用的开发工具和调试代码的工具千奇百怪，虽然这些不是导致代码报错的主要原因，但是看到之后还是忍不住想吐槽吐槽，因为一套正规的开发工具和环境可以减少很多不必要的麻烦，也能在问题定位时节省很多时间，如果你也有下面的几种情况，请耐心看完此文，相信会对你以后的开发有所帮助。
看看下面几种情况，是否自己都已经中招了：
明明做的是WebGIS开发，所使用的代码编辑器却是桌面端开发的编辑器，比如Visual Studio；
都到了2022年了，前端框架早已经成为三足鼎立的局面，自己的项目中还在使用老的技术框架，比如jQuery，有的甚至是jQuery和Vue这些框架混在一起使用；
感觉自己写的代码跟官网的参考代码或者别的大佬给的代码没区别，界面上就是运行不出预期的效果，更恼火的是不知道问题出在了哪里；
多部门、多团队、多人协作开发时搞的代码一团槽，自己的代码动不动就会被别人修改，或者自己写的代码动不动就会影响到其他人，不明白如何做协同开发；
自己刚毕业或者从其他行业转行到WebGIS开发，感觉WebGIS是一个新奇的物种，自己完全不知道如何入坑；
还有很多新奇的操作，暂不列出……
不管大家有没有符合上述的操作，我们接下来就先介绍如何正确配置一个WebGIS的开发环境，如果自己公司团队内部已经有规定好的开发工具和开发环境，可以忽略文章中的此部分，如果没有的话建议按照本文介绍的操作来开发，相信会给你省下很多不必要的麻烦。
1、基础开发工具及环境推荐
WebGIS开发说白了就是Web开发，只不过在传统的Web开发工作中因为引入了地图相关的一些操作，所以我们将其称之为WebGIS开发。了解了这句话之后我们开发工具的选择性就已经局限在了Web开发工具中，目前Web开发工具市面上也有很多，例如Dreamweaver、WebStorm、Visual Studio Code、HBuilder、Sublime Text……这些工具有些是付费的、有些是免费的、有些是需要自己安装很多插件才可以使用、有些是自动化配置好项目环境的……
本文给大家推荐的是微软免费开源的Visual Studio Code，虽然是微软的东西，但是在Mac上面照样可以使用，而且没有任何差别。值得注意的是Visual Studio Code和本文刚开始吐槽的VS不是同一个工具，首先他俩的图标就不一样，大家在微软官网下载安装的时候一定要看清楚，如下：
Visual Studio Code下载安装完成之后就直接可以上手写代码开发，不需要安装很多的插件。当然，在文章后面的部分中为了支持一些小功能，我们会推荐几个比较好用的插件，进而优化我们写代码的体验。
代码编辑器有了，剩下的就是需要一个预览我们所写的代码效果的工具。前端开发中所有代码的预览都是在浏览器中进行的，所以按理来说你无需安装其他工具，直接使用系统自带的浏览器就可以，例如windows自带的IE或者Edge、mac自带的Safari……还有很多我们自己安装的浏览器，例如火狐、360浏览器、QQ浏览器、世界之窗……但是为了统一，前端有一个不成文的，默认的规定（其实也不是规定，就是大家都默认的一种习惯），就是前端开发中所使用的浏览器推荐使用谷歌浏览器。因为谷歌浏览器的更新频率、对W3C标准的支持、对ECMAScript标准的支持都是优于其他浏览器的，并且在谷歌浏览器中调试代码也比较方便，体验较好，所以本文也推荐谷歌浏览器。
至此，WebGIS基础开发工具推荐完毕，是不是很简单，就需要一个Visual Studio Code的代码编辑器和一个效果预览的谷歌浏览器就完事了。安装完这两个工具之后，意味着我们就可以肆无忌惮的编写WebGIS代码了，但是为了我们编写代码的体验更加友好，我们接下来会介绍几个插件，逐渐的完善我们的开发环境，放心，后续不会再需要安装其余的软件了，我们的插件安装全部在Visual Studio Code中进行。总结一句话：WebGIS开发只需要安装两个工具——Visual Studio Code和谷歌浏览器。
2、基础插件推荐，提高编码体验
推荐插件之前我们先介绍下Visual Studio Code中插件的安装。在Visual Studio Code中安装插件其实很简单，只需要两步：搜索插件、安装插件。具体如下：
了解了插件安装步骤之后，我们接下来介绍几个基础插件，需要注意的是，上述的插件安装步骤适用于所有插件。
自动闭合标签、自动重命名标签。html中很多标签都是双闭合标签，例如
<div></div>、<span></span>、<p></p>……
对于这种双闭合标签我们在编写时写了第一个之后不想写后面的另一个，这个时候就可以使用Auto Close Tag这个插件来实现，同样的，这种标签的名称修改也是，有时候改了第一个标签名忘记更改另一个时会导致代码报错，在代码量很多的情况下这种事情经常发生，这时候就可以使用Auto Rename Tag这个插件来实现，两款插件的示例图如下：
Auto Close Tag：
Auto Rename Tag：
快速启动本地服务器。在很早之前我们编写前端代码时，如果一个html页面中有涉及到后台请求的话需要将此html文件部署到IIS或者tomcat这种本地服务器才可以，直接双击打开html文件会导致请求失败，这就意味着我们还需要在电脑上安装IIS或者tomcat之类的本地服务器，但是现在不需要了，我们只需要安装一个Live Server插件，在需要预览的html文件中鼠标右击启动Live Server即可快速启动一个本地服务器，并且浏览器会自动打开当前html文件，如下：
代码高亮。Visual Studio Code中其实已经默认自带了代码高亮的功能，我们编写html、css、js时都会有相应的代码高亮，但是目前前端开发基本使用的是vue、react这种框架，所以对于框架的代码高亮并不支持，所以我们要根据框架安装代码高亮插件，由于我们的react代码其实就是js代码，所以默认支持代码高亮，我们只需要针对vue代码进行安装代码高亮插件即可，此处推荐Vetur插件。
多人协作开发时代码溯源。多人共同开发项目时，别人代码导致自己代码异常或自己代码影响到他人时，溯源问题代码及git提交记录，我们可以使用GitLens插件，安装完这个插件之后可以清楚地看到每一行代码的提交记录，如下：
除此之外，还可以直接点击相关按钮，跳转到此行代码相关的pr提交历史中，如下：
以上就是几个基础插件的推荐，安装完这几个插件之后，对于一般的项目开发和学习已经足够适用，当然，Visual Studio Code中的插件成百上千个，大家有兴趣的可以按照自己的需求安装不同的插件，例如实现图片预览、代码片段分享、docker支持、markdown预览……
3、WebGIS技术路线推荐
我们之前就说过，WebGIS开发本身就是Web开发的一个子领域，所以技术路线到目前为止也基本相对固定，前端技术框架无非就是vue、react、angular，地图api无非就是开源地图api或商业平台地图api，但是值得注意的是WebGIS还需要做后端的一些开发，说白了就是一个小全栈的工种，除非你是在大公司任职，有专门的后端同事或部门，要不然很多gis公司的WebGIS开发岗都要求你会一些后端开发和数据库的知识，所以在此处给大家推荐一些后端技术路线。
如果之前是做java开发转行到WebGIS的话，恭喜你，后端这块你占优势，WebGIS开发中的后端接口之类的你完全可以用java来编写，没有任何问题；如果之前是开发小白，那推荐后端技术路线就是NodeJS，因为你不需要再学习另一门语言，直接拿js既可以写前端，还可以写后台，而且还可以开发小程序、桌面端应用等，何乐而不为呢；如果之前做过.Net或者python数据分析等工作转行到WebGIS，那么也恭喜你，后端照样可以用C#和python来写。所以大家可以看到，WebGIS的前端技术路线比较固定，但是涉及到后端开发相关工作时，有很多选择性，大家按照自身需求选择一门适合自己的后端路线即可，当然，在公司里面的话肯定首选团队已经定好的后端路线。
