前言

其實我平常不會用記事本寫程式，就像設計師不會用小畫家工作一樣。

身為一個專業的碼農，各種工具當然都要摸過。一個軟體的功能越強大，介面就會越複雜。而介面複雜的軟體本來就比較難入門，教學時當然是從最簡單的開始教起。如果我一開始就教你 Photoshop，你可能會覺得太難而不願意學習，但你已經對記事本上手之後，開始感覺到記事本的功能性不足，就會想要使用更高級的工具。現階段你已經知道記事本的侷限，我們真的需要更高級的開發環境。

我了解，在你對一個東西不感興趣之前，我怎麼認真教你，你都不會願意吸收。所以我教的每個東西都會告訴你，為什麼你需要學這個。

認識文字編輯器

昨天說過，電腦儲存文字的方式是透過文字編碼的方式，用一堆位元來表示一個文字。如果一個檔案是以文字編碼的形式儲存的，稱為文字檔。

在電腦裡面，檔案被分為兩大類：

• 文字檔：以文字編碼的形式儲存
• 二進位檔：其他編碼形式儲存

所有能夠編輯文字檔的程式都可以稱為文字編輯器，只是有些強大到你不會這麼稱呼他。不管啦，我就要叫他們為文字編輯器。

常見的文字編輯器

Notepad：Windows 內建的記事本，每個人的電腦裡都應該有。

Notepad++：這是我用的第一款文字編輯器，作者是台灣人，2003年發布第一版，印象中當年中文版的文字編輯器好像沒幾個。

Sublime_Text：2008年發布第一版，因為他是英文版的文字編輯器，所以我比較晚接觸。但是他功能確實強很多，主要是他有很多外掛可以安裝。

Visual Studio Code：2015年發布第一版，由微軟開發的文字編輯器，我最近是用這款。

Vim：1991年發布第一版，聽說神人都用這款。他的特徵是純文字介面，就是跟小黑框一樣的純文字介面。為什麼神人都用這款呢？因為他的客製化可以非常高，如果文字編輯器是工程師手上的武器，那麼他就是會隨著工程師的強度進化的武器。根據神人的說法：「只要用這款，我就不用浪費時間把手從鍵盤移動到滑鼠上囉。」

這邊附上神人的超簡明 Vim 操作介紹：https://gitbook.tw/chapters/command-line/vim-introduction.html。

Atom：2014年發布第一版，是由 Github 開發的文字編輯器，這款好像也蠻多人推的，但我還沒用所以不清楚。

Cloud9 IDE：這是一款被 Amazon 買走的線上的文字編輯器，如果你用 Cloud9 IDE 做網站，你的電腦可以完全不用經歷我們前幾天講過的任何安裝流程，因為你的網頁檔是放在人家的主機裡，而他已經幫你安裝好開發環境，你只需要刷信用卡。若想試用這款，但你又沒有信用卡的朋友，請到這個地方填寫表單：https://goo.gl/forms/JiKwS1ERpC8F7Yvn2。

這些專門設計給碼農用的文字編輯器，功能都差不多就那幾樣，新手應該隨便撿一款都可以用得很爽。因為我接下來的文章會以 Sublime Text 做示範，所以今天先講怎麼安裝 Sublime Text。

安裝 Sublime Text

首先點開 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 協定到底是什麼囉，明天我們會用 Chrome 來觀察 HTTP 協定。