01 學習使用Sublime Text 3

01 Learn How to Use Sublime Text 3

嗨!我是Weiting,接下來的許多日子,我將開始把我的網頁學習過程記錄在Medium上。會這樣做的原因,是希望可以透過有系統的把上課內容的條理釐清,也為自己的學習過程留下一些足跡。不然我怕我寫的筆記,總有一天會被我弄丟的!😆
因為以前就讀科系為英文系,所以也想藉由寫Medium文章,來練寫一下英文文章,深怕沒練習就會逐漸的忘光光!所以文章會中英並進,此篇會試寫一下,看一下中英排版的狀況!英文版的語意會盡量與中文87%像,但個人喜好的關係,英文版可能會略有不同!

Hellooooo! I’m Weiting. In the future, I will note about my website design learning process on Medium (here👇). Why I want to do this is that I hope to organize my notes of website design clearly. Also, help myself leaves some learning footprints. Otherwise, I’m afraid that I can’t keep my handwriting notes someday. (LOL)
In the meanwhile, my mother language is Mandarine, but I am major in English in my university. I would like to practice my English writing skill here, too. Articles will be available in two languages. This is my first article and let’s see what will happen on the layout. Hopefully, it won’t look so messy. (If you also read Chinese version, the meaning won’t be exactly the same because I do these with my free will. 😆

因為我是使用Mac系統,所以選擇了連Windows都能使用的Sublime Text 3,官網上方有著大大的Download字樣,點進去後尋找與你系統符合的檔案下載並安裝即可。

My laptop is Mac, so I choose Sublime Text 3, which can be also installed on Windows. In Sublime Text 3 official website, the right of navigation shows a download button. Click and check which version is for your computer; then finish software installation. Boom! First step is done!

Sublime Text 3 Download Page Screenshot 官方下載頁面截圖

安裝過程就不贅述啦!相信大家跟自己的電腦非常熟悉的!(拇指)

The installation process won’t be noted here. I believe everyone is their computer’s best friend! (Thumbs up)

雖然線上課程中,是先提到視窗外觀設定功能,但因為我個人非常熱愛使用快捷鍵,所以想先將常用快捷鍵背下來,會比較有幫助,因為我想快點熟悉工具,然後進入正式的學習,所以在此先筆記一下快捷鍵,以及快捷鍵原本的位置。

In the online class, mentioned the preference setting first, but I would like to learn the hot keys first because I think these hot keys are the “key” to help me focus on learning. So I want to note hot key and where these functions are located in Sublime Text 3.

接下來以下內容,主要還是以Mac為主,會有截圖告知Windows使用者可以在哪個位置找到對應功能!
The following content is still for Mac, but I will put the Mac screenshot to help Windows user to find out relative functions.

Edit > Line

・下一行 Next Line
shift+return (enter)
[這個是基本的快捷功能,任何文字輸入工具都可以用]
[This is a basic shortcut in any text tool.]

・向右縮排 Indent / 向左縮排 Unindent
command(ctrl)+] / [

・複製這一行 Duplicate line
shift+command (ctrl)+D

・刪除這一行 Delet Line
ctrl+shift+K

Sublime Text 3 screenshot of “Edit > Line”

Edit > Code Folding

這一部分的快捷鍵都需要連續按兩個快捷鍵組合
In these functions, need to press two shortcut in succession

・全部收起 Fold All
command(ctrl)+K , command(ctrl)+1

・收起層級2~9 Fold Level 2~9
command(ctrl)+K , command(ctrl)+2~9

・全部打開 Unfold All
command(ctrl)+K , command(ctrl)+J

Sublime Text 3 screenshot of “Edit > Code Folding”

為了讓Sublime Text 3更加的好用,加入插件可以更方便並且降低寫程式碼的錯誤。
In order to let Sublime Text 3 easier to use, installing plugins is helpful to write codes correctly and decrease the risk of wrong coding.

1.打開Console
Open Console

View > Show Console

下方會多一個可輸入文字的視窗
The console will show up at the bottom.

2. 安裝“Package Control”
Install “Package control”

搜尋“Package Control”
> 找到Package Control — the Sublime Text package manager
> 並點開右上角的「Installation」
> 複製左邊Sublime Text 3 標籤下的文字

Search “Package control”
> “Package Control — the Sublime Text package manager
> click “Installation” on the right top
> Copy the text under the Sublime Text 3 tag

Copy the text 複製文字

> 回到Sublime Text 3軟體中,貼進Console
> 按Enter

> Back to Sublime Text 3 and paste text in the Console
> Press Enter!

3. 安裝插件
Install Plugins

按下 Command (Ctrl) +Shift+P
> 輸入Package Control
> 尋找任一插件
> 點選該插件
> 安裝完成

Press Command (Ctrl) + Shift + P
> Search Package Control
> Search the plugins you want
> Click on the plugin’s name
> Finished Installation

安裝插件畫面截圖 Installing Plugin Screenshot

以下推薦幾個插件讓大家試試看:
Recommend few plugins to let you try:

Emmet
是可以邊寫邊提示Coding文字的插件,可以減少寫錯的機率喔!
It is a hint plugin. It directly shows you the right name of the coding tag.

AutoFileName
是個快速尋找檔案路徑的插件,這樣就可以快速建立連結至我們的Coding中。
It is a plugin for directly searching files in Sublime Text 3. Help us to find the right file and set the right link in the coding.

好啦我還是截圖使用方法的快捷鍵了

ColorPicker
輕鬆快速的找到想要的顏色並插入至Coding中,點選插件名稱可以至網站查看使用方法!
Easier to pick the colors you want and put Hex in the coding. Click the Plugin’s name to learn how to use it.

如果還想要尋找更多插件的話,一樣是在Package Control — the Sublime Text package manager網站上尋找,再回到Sublime Text 3安裝。而每一個插件的安裝條件(Installation),還是要仔細的看一下喔!

If you want to find out more plugins, search on Package Control — the Sublime Text package manager. Then, get back to Sublime Text 3 to install plugins, but still need to read “Installation” section in each plugin’s page.

呦!終於來到最後一步了,雖說我自己在這邊只有把字放大,但大家還是可以去試看看,妝點一下自己的Sublime Text 3介面囉!
Weeeee! Finally! Although I only increase my font size, everybody still can try and decorate your Sublime Text 3!

Preference Screenshot 偏好設定截圖

在Preferences中,可以找到一些基本設定,這部分我簡單講一下字體放大跟介面顏色改變。
In the preferences, I only talk about increasing font size and color changing.

字體大小 Font Size

按Command + “+/-”可放大縮小字體,也可以在Preferences中的Font直接按。
Pressing Command + “+/-” can increase/decrease font size. Also this function can be found in Preferences > Font.

顏色主題 Color Scheme

Preferences > Color Scheme > 選擇主題名稱 > 完成
Preferences > Color Scheme > Choose the Scheme Name > Done

想要更多顏色的話,可以上Package Control的網站搜尋「Scheme」,上面會有許多熱心網友自製的顏色主題,點進去後,可以先看一下配色是否喜歡,再回到Sublime Text 3,以安裝插件的方式安裝,完成後再去Preference設定你的Color Scheme!
Search “Scheme” and find the color you like on Package Control Website. Then install the color scheme in Sublime Text 3. The way is as the same as installing plugins. After that, go back to preference to set up your color scheme.

終於完成第一篇網站學習筆記了!老實說!如果沒有這樣慢慢寫下來,其實我還是真的忘記怎麼安裝插件了!很多部分沒有提到的原因,是因為我目前還沒使用到,之後如果使用到更多的功能,會再回頭來補充的!

謝謝你們的閱讀啦!

Finally! Finish my first learning note of Website Design. Honestly, if I don't write these words down, I've already forget how to install plugins! Why I didn't mention lots of parts because I've been so good yet! I will be back to enrich this article when I learn more knowledge (or found more)!

Thanks for reading!

ps. 推薦超詳細的Sublime Text 3課程影片 Video Class (Madarine)
六角學院 — 一小時上手 Sublime Text 3 網頁編輯器

--

--

Anything is possible, even a pencil can walk. The founder of Pencil Leg Design. 任何事都有可能,連鉛筆也會走路。 鉛筆腳設計主理人

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Weiting

Anything is possible, even a pencil can walk. The founder of Pencil Leg Design. 任何事都有可能,連鉛筆也會走路。 鉛筆腳設計主理人