Web開發人員用什麼編輯器？

標籤：線上代碼   最大   編譯器   換行   複製粘貼   同事   ext   lock   mat   

寫在前面的話：從事web前端開發也有一段時間了，今天主要想分享的是文字（代碼）編輯器。對於編輯器每個人都有自己的偏愛，也分不同語言的編碼者，這裡我就拿我接觸過的來說說吧！

Web開發人員用什麼編輯器？

相信這個問題如果在幾年之前被問出來，一定會有人毫不猶豫地回答Adobe的Dreamweaver。沒錯，直至現在，我們都不得不說Dreamweaver是一個非常易於上手的編輯器，而且它提供的功能非常有特色。我也是從Dreamweaver開始編程的，在我一開始接觸前端行業的時候官方版本是需要收費的，當然那時的你也可以使用破解版，最近Dreamweaver新推出的版本是Dreamweaver CC 2017，貌似是免費的，具體我也沒有去下載，你可以試試哦！好長時間不用了。但是需要使用 Adobe ID 登入，如果您沒有 Adobe ID，註冊即可。  

註：注意閱讀註冊協議即可；

按著步驟下載安裝即可；

安裝完成之後就是這樣的了；

管理網站-建立個人項目空間（倉庫）

介面是這樣的：

在拋棄了Dreamweaver之後我又使用了HBuilder編輯器。HBuilder是DCloud（數字天堂）推出的一款支援HTML5的Web開發IDE。

推薦Hbuilder：國產免費，適合新手，mac和win版本都有，不需要太多的配置可以直接使用，文法提示很齊全，編寫html頁面時可以直接顯示頁面內容，也可以用瀏覽器直接開啟當前編寫的這個頁面，查看頁面效果。

它的介面是這樣的：

更多關於HBuilder的內容可以到hbuilder官方網站學習。值得提醒的是hbuilder的代碼提示功能是十分強大的。

網址：http://www.dcloud.io/

上次提到GitHub這個集新手和大神為一體的網站。沒錯，它本身也附帶了一個簡單的線上代碼編輯器，顏色標註和代碼排版等功能齊全。顯示的大概效果如下：

效果還是不錯的。每次修改別忘了commit哦！

 

之前聽到同事提到最多的編輯器就是微軟最新的Visual Studio Code開源編輯器了。這款編輯器以自己的模組化作為賣點，各種主題和外掛程式很多，也很實用。介面如下：

這款編輯器的介面不是很有特色，但是滿滿的都是Visual Studio的影子，可它的整體體驗非常好，包括介面，效率以及代碼的可讀性都是非常優質的。這裡要著重說的也是我用的比較多的功能，就是Visual Studio Code內建的格式化代碼功能。這項功能在HTML裡可能不是最有用（把我辛辛苦苦寫在後面的注釋全部換行了，根本看不見），但是CSS和JavaScript的使用效果極佳。有時候你是複製粘貼其他地方的代碼，或者是代碼比較亂自己都看不清楚哪個標籤對應哪個標籤的時候，只需要輕輕右鍵—Format Code（格式化代碼）或者使用快速鍵Alt+Shift+F就可以讓代碼變得乾淨易讀。這點在之後要介紹的Atom編輯器中沒有內建，但是仍然有擴充程式可以支援。另一個很有用的功能就是“Change All Occurrences”（改變所有同樣的文字[更改所有匹配項]）。

比如說，你在寫JavaScript時突然想重新命名一個變數，或者一個函數，怎麼辦？這個名字在你的代碼中被使用了千萬次，你總不見得去一個一個重新命名吧？這時候只需要選中一個變數，然後按下Ctrl+F2（或者右鍵找到Change All Occurrences）就可以同時編輯整個文檔裡的同質資料。如：

Visual Studio Code就告一段落了，在講我最近在搗鼓的Atom之前，先帶過兩個不得不說，但我又沒怎麼使用的編輯器：一就是大家都知道的Notepad++。Notepad++是一個可謂全能的編輯器，各種功能齊全，主要可以用來代替Windows內建記事本。但是感覺外掛程式系統不是很完善，導致部分功能缺失。介面如下：

特別想說一句，之前認識的一個王老師在教學的時候用的基本就是Notepad++了。可能是因為便捷吧，也沒有很多複雜的外掛程式需要安裝，所以第一印象還是非常好的，本人也是這種態度，所以時不時還是會用的哦。

 

第二個我要帶過的就是Sublime Text。

概念：

Sublime Text是一個代碼編輯器（Sublime Text 2是收費軟體，但可以無限期試用），也是HTML和散文先進的文字編輯器。Sublime Text 是一個跨平台的編輯器，同時支援Windows、Linux、Mac OS X等作業系統。Sublime Text具有漂亮的使用者介面和強大的功能，例如代碼縮圖，Python的外掛程式，程式碼片段等。還可自訂鍵綁定，菜單和工具列。Sublime Text 的主要功能包括：拼字檢查，書籤，完整的Python API，Goto功能，即時項目切換，多選擇，多視窗等。2012年6月26日推出的版本Sublime Text 2.0，與之前版本相比主要有較大的改善：支援Retina視網膜屏、快速跳到下一個、文本拖放等。在這裡介紹是因為這款軟體的速度很快，功能性也很全。我不怎麼使用的原因是因為收費，好像直接購買要70美金吧……！

它的介面如下：

特別想說的是Sublime Text的外掛程式功能很強大。需要自己下載外掛程式安裝包來實現！

外掛程式舉例：Sublime Text漢化包、代碼提示等等快速鍵。

Sublime Text漢化包：http://www.cnblogs.com/kingwell/archive/2012/11/22/2782991.html

 

最後就是我在最近開始使用的一款開源編輯器，Atom，也是出自GitHub大神爸爸們之手。這軟體我一拿到手就愛上了它的外觀——在使用了將近半年的Visual Studio Code之後我發現上手Atom非常簡單（畢竟Sublime，Visual Studio Code和Atom的操作習慣和介面高度相似），因為它和Visual Studio Code非常接近，只是聽說Atom好像是一個WebApp打包出來的。Atom最大的問題就是不穩定，雖然我現在在用Beta版本，但是哪怕我在用穩定版，也會碰到程式突然閃退的問題（沒錯，閃退）。雖然好像資料不會掉，但是也是一件麻煩事不是嗎？

除了外觀之外，Atom讓我非常滿意的還有它的Preview HTML功能。這個功能可以在你編輯HTML代碼的時候即時預覽輸出結果。我再Visual Studio Code上找了半天好像都沒個方法，這裡的外掛程式Atom-html-preview可以做到這一功能（雖然Javascript和Ajax好像不能完整載入）。這個程式的Debug功能也是非常的實用（居然可以調試HTML我也是非常驚訝啊），具體各位去嘗試一下也就明白我的意思了。

主代碼介面是這樣的：

外掛程式介面是這樣的：

Atom外掛程式舉例：

　　①Emmet

　　Web開發人員必不可少的工具，據說是神器，強烈推薦

　　②color-picker

　　色彩選擇工具

　　③minimap

　　推薦 就是Sublime右邊那一豎塊，顯示縮小版的代碼

　　④vim-mode

　　用過vim的都知道好,基本實現了大部分的功能,不過造成許多快速鍵衝突，這也是其他編輯器不具備的功能

　　⑤git-plus

　　Git的外掛程式與Sublime Text 的sublimegit功能基本一致

　　命令控制台快速鍵

　　MacOS快速鍵：Cmd+Shift+H

　　Windows + Linux快速鍵：Ctrl+Shift+H

　　⑥file-icons

　　讓檔案前面邊好看點的圖片

　　⑦docblockr

　　方便寫代碼注釋

　　⑧autocomplete-plus

　　當輸入的時候，提供可能的候選項

　　⑨atom-cht-menu

　　功能選項菜單與右鍵菜單漢化

 

匯總：

　　Dreamweaver

　　HBuilder

　　GitHub線上代碼編輯

　　Visual Studio Code

　　Notepad++

　　Sublime Text 2

　　Atom

 

今天一共介紹了7種不同的編輯器。其中，Visual Studio Code，Sublime Text2，Atom，都是全平台的（包括Windows，Linux和Mac），Dreamweaver暫無Linux版本，Notepad++只有Windows。這些大大小小的公司和開發人員開發的產品各有各的特點，當然以我一個小型Web開發人員的使用習慣來看無法概括所有有意思的功能。編寫代碼的工具很多，每個人都有自己的喜好。無論你用哪個代碼編輯器，用哪個編譯器，我都想說，編程，永遠是一種享受。

Web開發人員用什麼編輯器？