ATOM 常用快速鍵
ctrl + p 搜尋專案內檔案
- 可以使用 (path to file) 方式搜尋過濾
- 如果已經使用git ignore，那麼就無法搜尋到
可以使用 alt + 1~9 快速切換tab
可以使用 View -> Panes 切割畫面
ctrl + n 或是點兩下空白的tab可以新建檔案
改檔案副檔名可以上色
選擇字串後，按ctrl + d 可以快速選擇，並且出現多個光標
ctrl + l 可以快速選取整行
ctrl + f 可以叫出搜尋視窗
ctrl + shift + f 搜尋整個專案
ctrl + shift + m 可以叫出HTML預覽視窗 (超好用)
ctrl + m 可以來回在同個tag上跳轉
ctrl + enter 可以直接new line
個人化
setting(Core)
Allow Pending Pane Items
點一次以後就可以進入preview (tab上顯示為斜線)點兩次確定打開為tab
Exclude VCS Ignored Paths
把這個關掉就可以搜尋到被git忽略掉的檔案Remove Enpty Panes
要是panes裡面的檔案被關掉就自動關閉panessetting(editor)
Auto Indent
自動縮排，好用的編輯幫手，再按下enter的時候會自動幫你對齊Auto Indent on paste
貼上的時候會自動幫你對齊Confirm Checkout HEAD Revision
好用的git小幫手，會自動幫你對其git這時候可以使用 ctrl + alt + z 可以回到上一次的狀態
Font Size
可以改變字大小，也可以使用ctrl + 滾輪改變
Show Indent Guide
顯示對齊線
Show Invisible
顯示隱藏的char
setting (keybinding)
setting (Theme)
套件
install -> package -> update
install
file icons 必裝
他會把icon變成更好辨識的小圖示，就不用自己看副檔名了
emmet
寫網頁怎麼可以沒有emmet
html部分
- ! => 帶出html5
- ul>li*2 => 帶出ul跟兩個li
- li.test => 帶出一個li內含class test
- li#test => 帶出一個li內含id test
- li[test='test.jpg'] => 帶出一個li內含元素test
- li{test} => 帶出一個li內容是test
- html:5 => 另一個帶出html5的方式
- link:css => 帶出css引入式
- script:src => 帶出js引入式
- .container => 產生一個class 是 container 的div
- #test => 產生一個id 是test的div
- lorem => 輸入一堆假字
css部分
- db
- dib
- m10
- mr10
- mb10
- m10%
- p10
- pr10
參考官方網頁
模擬伺服器
package install atom-live-server
按下ctrl+alt+數字鍵，可以開啟web server
Title of the document
ATOM 常用快速鍵
ctrl + p 搜尋專案內檔案
-
可以使用 (path to file) 方式搜尋過濾
-
如果已經使用git ignore，那麼就無法搜尋到
可以使用 alt + 1~9 快速切換tab
可以使用 View -> Panes 切割畫面
ctrl + n 或是點兩下空白的tab可以新建檔案
改檔案副檔名可以上色
選擇字串後，按ctrl + d 可以快速選擇，並且出現多個光標
ctrl + l 可以快速選取整行
ctrl + f 可以叫出搜尋視窗
ctrl + shift + f 搜尋整個專案
ctrl + shift + m 可以叫出HTML預覽視窗 (超好用)
ctrl + m 可以來回在同個tag上跳轉
ctrl + enter 可以直接new line
個人化
setting(Core)
Allow Pending Pane Items
點一次以後就可以進入preview (tab上顯示為斜線)
點兩次確定打開為tab
Exclude VCS Ignored Paths
把這個關掉就可以搜尋到被git忽略掉的檔案
Remove Enpty Panes
要是panes裡面的檔案被關掉就自動關閉panes
setting(editor)
Auto Indent
自動縮排，好用的編輯幫手，再按下enter的時候會自動幫你對齊
Auto Indent on paste
貼上的時候會自動幫你對齊
Confirm Checkout HEAD Revision
好用的git小幫手，會自動幫你對其git
這時候可以使用 ctrl + alt + z 可以回到上一次的狀態
Font Size
可以改變字大小，也可以使用ctrl + 滾輪改變
Show Indent Guide
顯示對齊線
Show Invisible
顯示隱藏的char
setting (keybinding)
setting (Theme)
套件
install -> package -> update
install
file icons 必裝
他會把icon變成更好辨識的小圖示，就不用自己看副檔名了
emmet
寫網頁怎麼可以沒有emmet
html部分
- ! => 帶出html5
- ul>li*2 => 帶出ul跟兩個li
- li.test => 帶出一個li內含class test
- li#test => 帶出一個li內含id test
- li[test='test.jpg'] => 帶出一個li內含元素test
- li{test} => 帶出一個li內容是test
- html:5 => 另一個帶出html5的方式
- link:css => 帶出css引入式
- script:src => 帶出js引入式
- .container => 產生一個class 是 container 的div
- #test => 產生一個id 是test的div
- lorem => 輸入一堆假字
css部分
- db
- dib
- m10
- mr10
- mb10
- m10%
- p10
- pr10
參考官方網頁
模擬伺服器
package install atom-live-server
按下ctrl+alt+數字鍵，可以開啟web server
Show Indent Guide
顯示對齊線Show Invisible
顯示隱藏的charsetting (keybinding)
setting (Theme)
套件
install -> package -> update
install
file icons 必裝
他會把icon變成更好辨識的小圖示，就不用自己看副檔名了emmet
寫網頁怎麼可以沒有emmethtml部分
- ! => 帶出html5
- ul>li*2 => 帶出ul跟兩個li
- li.test => 帶出一個li內含class test
- li#test => 帶出一個li內含id test
- li[test='test.jpg'] => 帶出一個li內含元素test
- li{test} => 帶出一個li內容是test
- html:5 => 另一個帶出html5的方式
- link:css => 帶出css引入式
- script:src => 帶出js引入式
- .container => 產生一個class 是 container 的div
- #test => 產生一個id 是test的div
- lorem => 輸入一堆假字
css部分
- db
- dib
- m10
- mr10
- mb10
- m10%
- p10
- pr10
模擬伺服器
package install atom-live-server
按下ctrl+alt+數字鍵，可以開啟web serverATOM 常用快速鍵
ctrl + p 搜尋專案內檔案
- 可以使用 (path to file) 方式搜尋過濾
- 如果已經使用git ignore，那麼就無法搜尋到
可以使用 alt + 1~9 快速切換tab
可以使用 View -> Panes 切割畫面
ctrl + n 或是點兩下空白的tab可以新建檔案
改檔案副檔名可以上色
選擇字串後，按ctrl + d 可以快速選擇，並且出現多個光標
ctrl + l 可以快速選取整行
ctrl + f 可以叫出搜尋視窗
ctrl + shift + f 搜尋整個專案
ctrl + shift + m 可以叫出HTML預覽視窗 (超好用)
ctrl + m 可以來回在同個tag上跳轉
ctrl + enter 可以直接new line
個人化
setting(Core)
Allow Pending Pane Items
點一次以後就可以進入preview (tab上顯示為斜線)點兩次確定打開為tab
Exclude VCS Ignored Paths
把這個關掉就可以搜尋到被git忽略掉的檔案Remove Enpty Panes
要是panes裡面的檔案被關掉就自動關閉panessetting(editor)
Auto Indent
自動縮排，好用的編輯幫手，再按下enter的時候會自動幫你對齊Auto Indent on paste
貼上的時候會自動幫你對齊Confirm Checkout HEAD Revision
好用的git小幫手，會自動幫你對其git這時候可以使用 ctrl + alt + z 可以回到上一次的狀態
Font Size
可以改變字大小，也可以使用ctrl + 滾輪改變
Show Indent Guide
顯示對齊線
Show Invisible
顯示隱藏的char
setting (keybinding)
setting (Theme)
套件
install -> package -> update
install
file icons 必裝
他會把icon變成更好辨識的小圖示，就不用自己看副檔名了
emmet
寫網頁怎麼可以沒有emmet
html部分
- ! => 帶出html5
- ul>li*2 => 帶出ul跟兩個li
- li.test => 帶出一個li內含class test
- li#test => 帶出一個li內含id test
- li[test='test.jpg'] => 帶出一個li內含元素test
- li{test} => 帶出一個li內容是test
- html:5 => 另一個帶出html5的方式
- link:css => 帶出css引入式
- script:src => 帶出js引入式
- .container => 產生一個class 是 container 的div
- #test => 產生一個id 是test的div
- lorem => 輸入一堆假字
css部分
- db
- dib
- m10
- mr10
- mb10
- m10%
- p10
- pr10
參考官方網頁
模擬伺服器
package install atom-live-server
按下ctrl+alt+數字鍵，可以開啟web server
Show Indent Guide
顯示對齊線Show Invisible
顯示隱藏的charsetting (keybinding)
setting (Theme)
套件
install -> package -> update
install
file icons 必裝
他會把icon變成更好辨識的小圖示，就不用自己看副檔名了emmet
寫網頁怎麼可以沒有emmethtml部分
- ! => 帶出html5
- ul>li*2 => 帶出ul跟兩個li
- li.test => 帶出一個li內含class test
- li#test => 帶出一個li內含id test
- li[test='test.jpg'] => 帶出一個li內含元素test
- li{test} => 帶出一個li內容是test
- html:5 => 另一個帶出html5的方式
- link:css => 帶出css引入式
- script:src => 帶出js引入式
- .container => 產生一個class 是 container 的div
- #test => 產生一個id 是test的div
- lorem => 輸入一堆假字
css部分
- db
- dib
- m10
- mr10
- mb10
- m10%
- p10
- pr10
留言
張貼留言