寫在前面的話：從事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的代碼提示功能是十分強大的。
上次提到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 Text2解說視頻：http://v.youku.com/v_show/id_XMzU5NzQ5ODgw.html
特別想說的是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開發者的使用習慣來看無法概括所有有意思的功能。編寫代碼的工具很多，每個人都有自己的喜好。無論你用哪個代碼編輯器，用哪個編譯器，我都想說，編程，永遠是一種享受。