iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 11
4

前言

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

身為一個專業的碼農,各種工具當然都要摸過。一個軟體的功能越強大,介面就會越複雜。而介面複雜的軟體本來就比較難入門,教學時當然是從最簡單的開始教起。如果我一開始就教你 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 協定。


上一篇
第十天:認識文字編碼
下一篇
第十二天:從瀏覽器認識 HTTP 協定
系列文
只要有心,人人都可以做卡米狗33
1
tarzan
iT邦新手 5 級 ‧ 2018-02-03 15:58:47

米大沒介紹到Sublime Text須安裝Package Control套件的程序。
若讀者和小弟一樣,遇到Sublime Text功能表內容和米大不一樣的情況,可依照下列網頁說明安裝必要的外掛:
https://www.jinnsblog.com/2017/03/sublime-text-package-control-big5-utf8.html

疑 我沒有安裝這個外掛呢

疑 我有 但我不知道我何時裝了XD

感謝回報

0
nt31824
iT邦新手 5 級 ‧ 2018-03-08 12:31:12

https://imgur.com/a/gPwhB
https://imgur.com/a/iSxej
請問我進行到安裝外掛的時候沒辦法找到Codecs33,請問該如何排除這個問題呢?
麻煩前輩解答 謝謝

看更多先前的回應...收起先前的回應...

sublime text2 好像沒有 codecs33

nt31824 iT邦新手 5 級‧ 2018-03-08 23:42:04 檢舉

謝 卡米大回答,但我用的是3沒錯欸

還是請問有什麼其他方法可以解決嗎?

找別的套件嗎?如果你不專注在 sublime text 的功能上,你可以用記事本開啟後複製內文,再貼到 sublime text。

或者用記事本另存新檔時,編碼選擇用 utf-8

nt31824 iT邦新手 5 級‧ 2018-03-09 19:50:47 檢舉

好 謝謝卡米大 我再試試看!

我測試了一下 如果是找不到 那就應該代表已經有了
還有 你下面的那張圖是reopen with encoding
應該是要開啟 reload with encoding

我的沒有relode with encoding

好像要裝一下套件 XD

我要留言

立即登入留言