第十一天：認識文字編輯器（ 2018 iT邦幫忙鐵人賽－只要有心，人人都可以作卡米狗 ）

markdown # 前言 其實我平常不會用記事本寫程式，就像設計師不會用小畫家工作一樣。 身為一個專業的碼農，各種工具當然都要摸過。一個軟體的功能越強大，介面就會越複雜。而介面複雜的軟體本來就比較難入門，教學時當然是從最簡單的開始教起。如果我一開始就教你 Photoshop，你可能會覺得太難而不願意學習，但你已經對記事本上手之後，開始感覺到記事本的功能性不足，就會想要使用更高級的工具。現階段你已經知道記事本的侷限，我們真的需要更高級的開發環境。 我了解，在你對一個東西不感興趣之前，我怎麼認真教你，你都不會願意吸收。所以我教的每個東西都會告訴你，為什麼你需要學這個。 # 認識文字編輯器 昨天說過，電腦儲存文字的方式是透過文字編碼的方式，用一堆位元來表示一個文字。如果一個檔案是以文字編碼的形式儲存的，稱為文字檔。 在電腦裡面，檔案被分為兩大類： - 文字檔：以文字編碼的形式儲存 - 二進位檔：其他編碼形式儲存 所有能夠編輯文字檔的程式都可以稱為文字編輯器，只是有些強大到你不會這麼稱呼他。不管啦，我就要叫他們為文字編輯器。 # 常見的文字編輯器  Notepad：Windows 內建的記事本，每個人的電腦裡都應該有。  Notepad++：這是我用的第一款文字編輯器，作者是台灣人，2003年發布第一版，印象中當年中文版的文字編輯器好像沒幾個。  Sublime_Text：2008年發布第一版，因為他是英文版的文字編輯器，所以我比較晚接觸。但是他功能確實強很多，主要是他有很多外掛可以安裝。  Visual Studio Code：2015年發布第一版，由微軟開發的文字編輯器，我最近是用這款。  Vim：1991年發布第一版，聽說神人都用這款。他的特徵是純文字介面，就是跟小黑框一樣的純文字介面。為什麼神人都用這款呢？因為他的客製化可以非常高，如果文字編輯器是工程師手上的武器，那麼他就是會隨著工程師的強度進化的武器。根據神人的說法：「只要用這款，我就不用浪費時間把手從鍵盤移動到滑鼠上囉。」 這邊附上神人的超簡明 Vim 操作介紹：[https://gitbook.tw/chapters/command-line/vim-introduction.html](https://gitbook.tw/chapters/command-line/vim-introduction.html)。  Atom：2014年發布第一版，是由 Github 開發的文字編輯器，這款好像也蠻多人推的，但我還沒用所以不清楚。  Cloud9 IDE：這是一款被 Amazon 買走的線上的文字編輯器，如果你用 Cloud9 IDE 做網站，你的電腦可以完全不用經歷我們前幾天講過的任何安裝流程，因為你的網頁檔是放在人家的主機裡，而他已經幫你安裝好開發環境，你只需要刷信用卡。若想試用這款，但你又沒有信用卡的朋友，請到這個地方填寫表單：[https://goo.gl/forms/JiKwS1ERpC8F7Yvn2](https://goo.gl/forms/JiKwS1ERpC8F7Yvn2)。 這些專門設計給碼農用的文字編輯器，功能都差不多就那幾樣，新手應該隨便撿一款都可以用得很爽。因為我接下來的文章會以 Sublime Text 做示範，所以今天先講怎麼安裝 Sublime Text。 # 安裝 Sublime Text 首先點開 [https://www.sublimetext.com/](https://www.sublimetext.com/)。  點 `DOWNLOAD FOR WINDOWS` 下載安裝檔，下載完成後點開安裝檔。  歡迎光臨，按 `Next`。  選擇安裝路徑，能不改就別改吧，按 `Next`。  要不要加到右鍵選單上？這裡要打勾再按 `Next`。  確認點餐內容，按 `Install`。  安裝完成！馬上來試用看看。 # 開啟 Sublime Text 如果你在安裝的時候沒有切換目錄的話，他會在 `C:\Program Files\Sublime Text 3`。  點兩下 `sublime_text.exe` 就能開啟他了。  這是開啟之後的畫面。 除了這樣開啟他之外，你也可以對想要編輯的檔案點右鍵：  這是檔案總管，目前所在的目錄是：`C:\Ruby24-x64\lib\ruby\gems\2.4.0\gems\railties-5.1.4\lib\rails\templates\rails\welcome`，我正準備要編輯 index.html。 選單的第二項：`Open with Sublime Text`(用 Sublime Text 開啟)，點下去。  喔喔！看到亂碼啦～這是因為我們使用了錯誤的文字編碼去解讀這個檔案。 # 介紹 Sublime Text  左下角寫著 `UTF-8`，代表目前使用的文字編碼，我們可以把他換掉。  點左上角的 `File`(檔案)，然後選 `Reload with Encoding`(用文字編碼重新載入)，再選 `Chinese Traditional(BIG5)`(繁體中文(BIG5))。  看到「只要有心，人人都可以作卡米狗」了！ 但是這是BIG5編碼下的結果，我們需要的是 UTF-8 下的「只要有心，人人都可以作卡米狗」，像這樣：  只要再次調整文字編碼就可以了。  在後面多打一點字：  讓我們再次開啟網站伺服器，來檢查看看是不是成功修改。 # 開啟網頁伺服器 先開啟檔案總管(`Windows`+`E`)，移動到 `D:\只要有心，人人都可以作卡米狗\ironman` 這個資料夾下。  然後在網址列輸入 `cmd` 開啟小黑框。 ``` D:\只要有心，人人都可以作卡米狗\ironman> ``` 輸入 `rails s`(rails server 的簡寫)，然後按 `Enter`。 ``` D:\只要有心，人人都可以作卡米狗\ironman>rails s => Booting Puma => Rails 5.1.4 application starting in development => Run `rails server -h` for more startup options *** SIGUSR2 not implemented, signal based restart unavailable! *** SIGUSR1 not implemented, signal based restart unavailable! *** SIGHUP not implemented, signal based logs reopening unavailable! Puma starting in single mode... * Version 3.11.0 (ruby 2.4.2-p198), codename: Love Song * Min threads: 5, max threads: 5 * Environment: development * Listening on tcp://0.0.0.0:3000 Use Ctrl-C to stop ``` # 開啟網頁 點開[http://localhost:3000/](http://localhost:3000/)。  大成功！ # 下集預告 由於我們已經同時擁有瀏覽器以及網頁伺服器，所以我們可以開始觀察 HTTP 協定到底是什麼囉，明天我們會用 Chrome 來觀察 HTTP 協定。