Sublime編輯器環境安裝教學 跳到主要內容

Sublime編輯器環境安裝教學

 


環境安裝

安裝好 Sublime 之後,在未安裝 Plugins 之前 Sublime 與一般文字編輯器沒有其他差別,然而安裝 plugins 之前,我們必須先安裝 PackageControl 這個插件,這個插件可以快速地下載以及管理所有其他的插件。


▲未安裝 Plugings 


第一步:安裝PackageControl

本文採用 mac OS 來作為我們說明的系統環境,首先我們在編輯器上使用快捷鍵 Command + Shift + P 可以叫出選項。

  1. Open the command palette
    Win/Linux: ctrl+shift+p, Mac: cmd+shift+p
  2. Type Install Package Control, press enter

補充說明一下這是 Sublime text3 最新版的安裝方式,網路上有很多舊的文章還是 text2 版本須貼上語法的方式。


▲開啟介面 

▲輸入 PackageControl 並點擊 Install Package

第二步:安裝必要插件

待安裝完畢後,會看到跳到下方這個畫面,此時就可以來安裝各種 Plugins。還記得上一篇:HTML前端學習的第一步 中有提到在 PackageControl官網 中的 popular中可以看到目前最常被下載使用到的插件。



首先我們來看看有哪些推薦的插件:


1.Emmet

功能:編碼快捷鍵,可以快速完成編碼,實用性非常高。

說明頁面:https://packagecontrol.io/packages/Emmet


▲輸入 Emmet 並點擊安裝

▲Emmet功能展示

2.AutoFileName

功能:快速自動輸入文件名稱。

說明頁面:https://packagecontrol.io/packages/AutoFileName


▲AutoFileName功能展示

3.ConvertToUTF8

功能:文件自動轉碼成UTF-8。

說明頁面:https://packagecontrol.io/packages/ConvertToUTF8


4.JQuery

功能:JQuery函數提示。

說明頁面:https://packagecontrol.io/packages/jQuery


以上是初學者比較常用到的插件

若有需要可以自行在 PackageControl 上尋找自己所需要用到的插件

https://packagecontrol.io/browse/popular






留言

這個網誌中的熱門文章

如何在網頁中加入一個回到頂端的按鈕

網頁Top按鈕 (網頁回到頂端)

HTML前端學習的第一步

一個好的編輯器能幫助我們輕鬆地進行學習程式撰寫 大部分剛接觸電腦程式的人,會對編輯器產生一些疑問,下面來帶大家一步步認識 什麼是編輯器? 電腦儲存文字的方式是透過文字編碼的方式,用位元來表示文字。而如果一個檔案是以文字編碼的形式儲存的,稱為文字檔。  在我們的電腦裡面,檔案被分為兩大部分: 文字檔:以文字編碼的形式儲存 二進位檔:其他編碼形式儲存 而文字編輯器,顧名思義就是用來讓我們輸入文字可以進行編輯的應用程式,Word、記事本、Pages…等或是線上的 Google Docs 都可以算是文字編輯器。 為什麼要用編輯器? Microsoft 的 Front Page 和 Adobe Dreamweaver 都是非常快速且容易入門的軟體,但是遇到複雜結構的HTML時,設計頁面往往都不是很正確的顯示,最重要的一點是這兩款都是付費的軟體,公司不見得都會提供使用。 我過去個人的經驗是使用  Dreamweaver 來製作 wireframe ,當時不算是做正式的網頁,只是快速的製作與RD溝通的介面來討論後台介面,而  Dreamweaver 在對應一些簡單的畫面時是蠻方便的,可以快速的選取以及修改,但當頁面越來越多層的時候畫面就開始不明原因的跑掉,後面都是直接開html使用瀏覽器來做確認,這樣的情況下軟體就沒什麼使用價值了。 而近年來的編輯器除了撰寫 HTML 以及 CSS 之外,也提供了非常多的插件供不同的語法使用,非常方便。 編輯器選擇 編輯器種類其實蠻多的,包括常見的  Visual Studio Code 、  Notepad++ 、   Brackets 、 Sublime  等等,  Survery的過程中,我首先選澤了 Sublime 作為第一次學習接觸的工具,最後選擇  Sublime 的原因其實也蠻簡單的,就只是買的線上課程講師使用這個編輯器XD,不過當然也是想使用看看來做比較,後續應該也會嘗試著使用  Visual Studio Code 以 及  Brackets 來做比較。 Sublime 官網下載點 https://www.sublimetext.com/3 ▲Sublime官網 另外其實也有蠻多線上編輯器可以選擇,我個人是推薦...