技術筆記

我安裝了Sublime Text,然後呢?

sublime text 3(我安裝了Sublime Text)

在網站開發的第一堂課 HTML+CSS+JS課程中,
是下載sublime text 做練習
但sublime除了當編輯器,
到底還有什麼好用呢(不然就用dremweaver或記事本就好了嘛)
我想它最強大的就是它的外掛plugins了,
外掛搭配快速鍵,可以大大增加你開發的效率

 

但還是建議,如果你是初學者
應該要先會從零開始自己key程式碼
熟了之後,再來用這些工具加速自己開發時間會更好噢

 

以下範例
使用:sublime text3
OS: mac

 

有人問說2跟3有什麼不同,大概就是iphone5跟iphone6的差別吧
所以用當然就是用最新的了

 

Sublime所有的plugins 在點我可看到
他會列出哪個最新、最熱門,點進去會告訴你這外掛如何安裝跟使用等等
至於不同OS之間快速鍵使用法,在這裡也能看到

下載

 

 

安裝Package Control

安裝plugins之前,你必須先安裝Package Control
安裝方法可以看這篇
若你不想看英文 也可以參考我整理出來的

 

1. 先按 ctrl+`,並貼上語法

import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

 

2. 按enter,等個五秒會看到顯示成功(安裝sublime text2的話要重新啓動才會成功)
sublime

 

安裝Plugins

1. 先按commend+shift+p(叫出Package Control),接著輸入install,再按Enter

sublime2

 

2. 接著輸入你要安裝的plugin名稱,按Enter之後,下面狀態列會顯示安裝成功

sublime3

 

看看你裝了哪些plugins

先按commend+shift+p(叫出Package Control),接著輸入list,按Enter

sublime4

 

移除plugins

1. 先按commend+shift+p(叫出Package Control),接著輸入remove,按Enter

sublime5

 

 

2. 這時會列出你安裝的所有外掛,選擇你想刪除的外掛,按Enter

sublime6

 

積下來開始介紹常用Plugins囉

 

Emmet

Emmet 官方文件

Emmet是每個前端工程師必備安裝的外掛了
只要按了特定的字+tab 就自動幫你生成html碼

!
<!-- 按tab會產生以下 -->

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>Document</title>
</head>
<body>

</body>
</html>
<!-- .wrapper>ul --> 
<div class="wrapper"><ul></ul></div>

<!-- li*3 --> 
<li></li><li></li><li></li>

<!-- div>(header>ul>li*2>a)+footer>p --> 

<div>
    <header>
        <ul>
	    <li><a href=""></a></li>
            <li><a href=""></a></li>
	</ul>
    </header>
    <footer>
	<p></p>
    </footer>
</div>

<!-- link:css --> 
<link rel="stylesheet" href="style.css”>

<!-- script:src --> 
<script src=""></script>

在css裡也一樣好用,是不是超方便!

bgc // background-color
w // width
h //height
p //padding
p-r //position: relative;
cu-p //cursor: pointer;

 

SublimeTmpl

讓你可以在folder快速新增空的檔案

點了html就會生一個空的html給你,不需要在自己慢慢打囉
他還有提供空的js,css php…等
sublime7
sublime8

 

HTMLBeautify

幫你把html結構化整理乾淨

有時貼別人程式碼進編輯器就會變亂
HTMLBeautify

這時按Command-Option-Shift-F,程式碼就會瞬間變整齊

HTMLBeautify2

 

Js​Format

針對js的結構化,把亂掉js弄乾淨.快速鍵是Command+alt+f

 

其他快速鍵

ctrl+/ 註解
ctrl+L 點到一個字幫你選一整行

quick2

ctrl+Shift+D 複製光標所在整行
commend+ ] 全部往後移
commend+ [ 全部往前移
ctrl+G 找行數
alt+commend+2 一個視窗變兩個視窗

quick

 

大家有什麼必裝不可的plugins也可以在下面留言交流喔

易歐思創意 的個人頭像

易歐思創意

易歐思創意 數位轉單顧問

看 易歐思創意 的所有文章 →
回文章列表