本來(lái)開(kāi)發(fā)環(huán)境搭建這一節(jié)其實(shí)是可以省略的，畢竟市面上的開(kāi)發(fā)工具和大家各自喜愛(ài)的系統(tǒng),、工具,、配置的開(kāi)發(fā)環(huán)境都是蘿卜青菜各有所愛(ài),，沒(méi)有說(shuō)誰(shuí)的環(huán)境是百分百標(biāo)準(zhǔn)的，也沒(méi)有說(shuō)誰(shuí)的環(huán)境很差,，用都用不了,。但是最近給很多同學(xué)答疑的時(shí)候發(fā)現(xiàn)，大家所用的開(kāi)發(fā)工具和調(diào)試代碼的工具千奇百怪,，雖然這些不是導(dǎo)致代碼報(bào)錯(cuò)的主要原因,，但是看到之后還是忍不住想吐槽吐槽，因?yàn)橐惶渍?guī)的開(kāi)發(fā)工具和環(huán)境可以減少很多不必要的麻煩,，也能在問(wèn)題定位時(shí)節(jié)省很多時(shí)間,，如果你也有下面的幾種情況，請(qǐng)耐心看完此文,，相信會(huì)對(duì)你以后的開(kāi)發(fā)有所幫助,。
看看下面幾種情況，是否自己都已經(jīng)中招了：
明明做的是WebGIS開(kāi)發(fā),，所使用的代碼編輯器卻是桌面端開(kāi)發(fā)的編輯器,，比如Visual Studio；
都到了2022年了,，前端框架早已經(jīng)成為三足鼎立的局面,，自己的項(xiàng)目中還在使用老的技術(shù)框架，比如jQuery,，有的甚至是jQuery和Vue這些框架混在一起使用,；
感覺(jué)自己寫的代碼跟官網(wǎng)的參考代碼或者別的大佬給的代碼沒(méi)區(qū)別，界面上就是運(yùn)行不出預(yù)期的效果,，更惱火的是不知道問(wèn)題出在了哪里,；
多部門、多團(tuán)隊(duì),、多人協(xié)作開(kāi)發(fā)時(shí)搞的代碼一團(tuán)槽,，自己的代碼動(dòng)不動(dòng)就會(huì)被別人修改，或者自己寫的代碼動(dòng)不動(dòng)就會(huì)影響到其他人,，不明白如何做協(xié)同開(kāi)發(fā),；
自己剛畢業(yè)或者從其他行業(yè)轉(zhuǎn)行到WebGIS開(kāi)發(fā)，感覺(jué)WebGIS是一個(gè)新奇的物種,，自己完全不知道如何入坑,；
還有很多新奇的操作，暫不列出……
不管大家有沒(méi)有符合上述的操作,，我們接下來(lái)就先介紹如何正確配置一個(gè)WebGIS的開(kāi)發(fā)環(huán)境,，如果自己公司團(tuán)隊(duì)內(nèi)部已經(jīng)有規(guī)定好的開(kāi)發(fā)工具和開(kāi)發(fā)環(huán)境，可以忽略文章中的此部分,，如果沒(méi)有的話建議按照本文介紹的操作來(lái)開(kāi)發(fā),，相信會(huì)給你省下很多不必要的麻煩,。
1、基礎(chǔ)開(kāi)發(fā)工具及環(huán)境推薦
WebGIS開(kāi)發(fā)說(shuō)白了就是Web開(kāi)發(fā),，只不過(guò)在傳統(tǒng)的Web開(kāi)發(fā)工作中因?yàn)橐肓说貓D相關(guān)的一些操作,，所以我們將其稱之為WebGIS開(kāi)發(fā)。了解了這句話之后我們開(kāi)發(fā)工具的選擇性就已經(jīng)局限在了Web開(kāi)發(fā)工具中,，目前Web開(kāi)發(fā)工具市面上也有很多,，例如Dreamweaver、WebStorm,、Visual Studio Code,、HBuilder、Sublime Text……這些工具有些是付費(fèi)的,、有些是免費(fèi)的,、有些是需要自己安裝很多插件才可以使用、有些是自動(dòng)化配置好項(xiàng)目環(huán)境的……
本文給大家推薦的是微軟免費(fèi)開(kāi)源的Visual Studio Code,，雖然是微軟的東西,，但是在Mac上面照樣可以使用，而且沒(méi)有任何差別,。值得注意的是Visual Studio Code和本文剛開(kāi)始吐槽的VS不是同一個(gè)工具，首先他倆的圖標(biāo)就不一樣,，大家在微軟官網(wǎng)下載安裝的時(shí)候一定要看清楚,，如下：
Visual Studio Code下載安裝完成之后就直接可以上手寫代碼開(kāi)發(fā)，不需要安裝很多的插件,。當(dāng)然,，在文章后面的部分中為了支持一些小功能，我們會(huì)推薦幾個(gè)比較好用的插件,，進(jìn)而優(yōu)化我們寫代碼的體驗(yàn),。
代碼編輯器有了，剩下的就是需要一個(gè)預(yù)覽我們所寫的代碼效果的工具,。前端開(kāi)發(fā)中所有代碼的預(yù)覽都是在瀏覽器中進(jìn)行的,，所以按理來(lái)說(shuō)你無(wú)需安裝其他工具，直接使用系統(tǒng)自帶的瀏覽器就可以,，例如windows自帶的IE或者Edge,、mac自帶的Safari……還有很多我們自己安裝的瀏覽器，例如火狐,、360瀏覽器,、QQ瀏覽器、世界之窗……但是為了統(tǒng)一,，前端有一個(gè)不成文的,，默認(rèn)的規(guī)定（其實(shí)也不是規(guī)定,，就是大家都默認(rèn)的一種習(xí)慣），就是前端開(kāi)發(fā)中所使用的瀏覽器推薦使用谷歌瀏覽器,。因?yàn)?code style="margin: 0px 3px; padding: 2px 4px; outline: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word; font-size: 14px; border-radius: 4px; background-color: rgba(27, 31, 35, 0.05); word-break: break-all; color: rgb(255, 153, 153); font-family: Consolas, Monaco, Menlo, monospace;">谷歌瀏覽器的更新頻率,、對(duì)W3C標(biāo)準(zhǔn)的支持、對(duì)ECMAScript標(biāo)準(zhǔn)的支持都是優(yōu)于其他瀏覽器的,，并且在谷歌瀏覽器中調(diào)試代碼也比較方便,，體驗(yàn)較好，所以本文也推薦谷歌瀏覽器,。
至此,，WebGIS基礎(chǔ)開(kāi)發(fā)工具推薦完畢，是不是很簡(jiǎn)單,，就需要一個(gè)Visual Studio Code的代碼編輯器和一個(gè)效果預(yù)覽的谷歌瀏覽器就完事了,。安裝完這兩個(gè)工具之后，意味著我們就可以肆無(wú)忌憚的編寫WebGIS代碼了,，但是為了我們編寫代碼的體驗(yàn)更加友好,，我們接下來(lái)會(huì)介紹幾個(gè)插件，逐漸的完善我們的開(kāi)發(fā)環(huán)境,，放心,，后續(xù)不會(huì)再需要安裝其余的軟件了，我們的插件安裝全部在Visual Studio Code中進(jìn)行,?？偨Y(jié)一句話：WebGIS開(kāi)發(fā)只需要安裝兩個(gè)工具——Visual Studio Code和谷歌瀏覽器。
2,、基礎(chǔ)插件推薦,，提高編碼體驗(yàn)
推薦插件之前我們先介紹下Visual Studio Code中插件的安裝。在Visual Studio Code中安裝插件其實(shí)很簡(jiǎn)單,，只需要兩步：搜索插件,、安裝插件。具體如下：
了解了插件安裝步驟之后,，我們接下來(lái)介紹幾個(gè)基礎(chǔ)插件,，需要注意的是，上述的插件安裝步驟適用于所有插件,。
自動(dòng)閉合標(biāo)簽,、自動(dòng)重命名標(biāo)簽。html中很多標(biāo)簽都是雙閉合標(biāo)簽,，例如
<div></div>,、<span></span>、<p></p>……
對(duì)于這種雙閉合標(biāo)簽我們?cè)诰帉憰r(shí)寫了第一個(gè)之后不想寫后面的另一個(gè),，這個(gè)時(shí)候就可以使用Auto Close Tag這個(gè)插件來(lái)實(shí)現(xiàn),，同樣的,，這種標(biāo)簽的名稱修改也是，有時(shí)候改了第一個(gè)標(biāo)簽名忘記更改另一個(gè)時(shí)會(huì)導(dǎo)致代碼報(bào)錯(cuò),，在代碼量很多的情況下這種事情經(jīng)常發(fā)生,，這時(shí)候就可以使用Auto Rename Tag這個(gè)插件來(lái)實(shí)現(xiàn)，兩款插件的示例圖如下：
Auto Close Tag：
Auto Rename Tag：
快速啟動(dòng)本地服務(wù)器,。在很早之前我們編寫前端代碼時(shí),，如果一個(gè)html頁(yè)面中有涉及到后臺(tái)請(qǐng)求的話需要將此html文件部署到IIS或者tomcat這種本地服務(wù)器才可以，直接雙擊打開(kāi)html文件會(huì)導(dǎo)致請(qǐng)求失敗,，這就意味著我們還需要在電腦上安裝IIS或者tomcat之類的本地服務(wù)器,，但是現(xiàn)在不需要了，我們只需要安裝一個(gè)Live Server插件,，在需要預(yù)覽的html文件中鼠標(biāo)右擊啟動(dòng)Live Server即可快速啟動(dòng)一個(gè)本地服務(wù)器,，并且瀏覽器會(huì)自動(dòng)打開(kāi)當(dāng)前html文件，如下：
代碼高亮,。Visual Studio Code中其實(shí)已經(jīng)默認(rèn)自帶了代碼高亮的功能,，我們編寫html、css,、js時(shí)都會(huì)有相應(yīng)的代碼高亮,，但是目前前端開(kāi)發(fā)基本使用的是vue、react這種框架,，所以對(duì)于框架的代碼高亮并不支持,，所以我們要根據(jù)框架安裝代碼高亮插件，由于我們的react代碼其實(shí)就是js代碼,，所以默認(rèn)支持代碼高亮，我們只需要針對(duì)vue代碼進(jìn)行安裝代碼高亮插件即可,，此處推薦Vetur插件,。
多人協(xié)作開(kāi)發(fā)時(shí)代碼溯源。多人共同開(kāi)發(fā)項(xiàng)目時(shí),，別人代碼導(dǎo)致自己代碼異?；蜃约捍a影響到他人時(shí)，溯源問(wèn)題代碼及git提交記錄,，我們可以使用GitLens插件,，安裝完這個(gè)插件之后可以清楚地看到每一行代碼的提交記錄，如下：
除此之外,，還可以直接點(diǎn)擊相關(guān)按鈕,，跳轉(zhuǎn)到此行代碼相關(guān)的pr提交歷史中，如下：
以上就是幾個(gè)基礎(chǔ)插件的推薦,，安裝完這幾個(gè)插件之后,，對(duì)于一般的項(xiàng)目開(kāi)發(fā)和學(xué)習(xí)已經(jīng)足夠適用,，當(dāng)然，Visual Studio Code中的插件成百上千個(gè),，大家有興趣的可以按照自己的需求安裝不同的插件,，例如實(shí)現(xiàn)圖片預(yù)覽、代碼片段分享,、docker支持,、markdown預(yù)覽……
3、WebGIS技術(shù)路線推薦
我們之前就說(shuō)過(guò),，WebGIS開(kāi)發(fā)本身就是Web開(kāi)發(fā)的一個(gè)子領(lǐng)域,，所以技術(shù)路線到目前為止也基本相對(duì)固定，前端技術(shù)框架無(wú)非就是vue,、react,、angular，地圖api無(wú)非就是開(kāi)源地圖api或商業(yè)平臺(tái)地圖api,，但是值得注意的是WebGIS還需要做后端的一些開(kāi)發(fā),，說(shuō)白了就是一個(gè)小全棧的工種，除非你是在大公司任職,，有專門的后端同事或部門,，要不然很多gis公司的WebGIS開(kāi)發(fā)崗都要求你會(huì)一些后端開(kāi)發(fā)和數(shù)據(jù)庫(kù)的知識(shí)，所以在此處給大家推薦一些后端技術(shù)路線,。
如果之前是做java開(kāi)發(fā)轉(zhuǎn)行到WebGIS的話,，恭喜你，后端這塊你占優(yōu)勢(shì),，WebGIS開(kāi)發(fā)中的后端接口之類的你完全可以用java來(lái)編寫,，沒(méi)有任何問(wèn)題；如果之前是開(kāi)發(fā)小白,，那推薦后端技術(shù)路線就是NodeJS,，因?yàn)槟悴恍枰賹W(xué)習(xí)另一門語(yǔ)言，直接拿js既可以寫前端,，還可以寫后臺(tái),，而且還可以開(kāi)發(fā)小程序、桌面端應(yīng)用等,，何樂(lè)而不為呢,；如果之前做過(guò).Net或者python數(shù)據(jù)分析等工作轉(zhuǎn)行到WebGIS，那么也恭喜你,，后端照樣可以用C#和python來(lái)寫,。所以大家可以看到，WebGIS的前端技術(shù)路線比較固定，但是涉及到后端開(kāi)發(fā)相關(guān)工作時(shí),，有很多選擇性,，大家按照自身需求選擇一門適合自己的后端路線即可，當(dāng)然,，在公司里面的話肯定首選團(tuán)隊(duì)已經(jīng)定好的后端路線,。
