1. 簡介
Atom作為Github開源的一款文本編輯器,相比其他編輯器有著很多的優(yōu)勢:
- 可定制化程度高,能夠進(jìn)行各種擴(kuò)展,包括各種插件主題;
- 吸收了很多文本編輯器的優(yōu)秀特性,兼容VIM模式;
- 自帶包管理;
- 開源免費(fèi),有強(qiáng)大的Github為其背書.
官網(wǎng): Atom
知乎: 如何評(píng)價(jià) GitHub 發(fā)布的文本編輯器 Atom？
Browsersync能讓瀏覽器實(shí)時(shí)氓栈、快速響應(yīng)文件的更改（html饿凛、js很洋、css项贺、sass勇边、less等）并自動(dòng)刷新頁面.
Browsersync可以同時(shí)在PC褂策、平板横腿、手機(jī)等設(shè)備下進(jìn)項(xiàng)調(diào)試.
也就是說,和Atom配合后,只要保存下代碼,就能同時(shí)看到PC端和移動(dòng)端的效果了,可以大幅提高開發(fā)效率.
2. Atom的使用.
下載安裝包解壓,下載地址: Atom
-
詳細(xì)的使用指南:
-
需要知道的幾個(gè)技巧:
- 設(shè)置Tab使用4個(gè)空格:
Preferences->Editor->Tab Length改為4. - 所有的快捷鍵:
Preferences->Keybindings,包括插件的快捷鍵.
- 設(shè)置Tab使用4個(gè)空格:
-
插件和主題的安裝
Preferences->Install,在里面搜索安裝就行了.
-
常用的插件和主題:
-
主題插件:
seti-ui
主題插件安裝完之后需要在Preferences->Themes中選擇需要的主題
-
插件
Emmet: Emmet中定義了一些縮寫代碼,輸入代碼,按enter就能展開成完整的代碼.
eg. 輸入html再按Enter就可以得到如下代碼了.
具體的縮寫還有很多,可以看這里:前端開發(fā)利器：Emmet 介紹 -
代碼格式美化插件:
atom-beautify
格式化代碼快捷鍵:control + alt + B -
填寫路徑的時(shí)候能有提示的插件:
autocomplete-paths
路徑提示
-
-
文檔快速查詢插件:
api-docs
`ctrl + d`搜索 代碼校驗(yàn)插件:
linter,安裝完后還有安裝linter的三個(gè)組件Linter Html.Linter Csslint.hintLinter Eslint,分別是檢查HTML.CSS.JS代碼錯(cuò)誤的.
3. Browsersync的使用
Browsersync的安裝:
- BrowserSync是基于Node.js的, 是一個(gè)Node模塊,首先得安裝Node.js.
- 安裝完node后會(huì)有兩個(gè)命令可用:
node和npm,npm就是用來下載開源的開發(fā)工具,在終端中輸入sudo npm install -g browser-sync,下載npm庫中的BrowserSync,不加sudo可能會(huì)出錯(cuò),sudo是為了獲得管理員權(quán)限.
安裝完之后是這樣
Browsersync的使用:
- 用
Atom新建或打開一個(gè)項(xiàng)目. - 使用
cd切換到對(duì)應(yīng)的項(xiàng)目的文件夾目錄 - 在終端輸入命令
browser-sync start --server --browser "Google Chrome" --files "stylesheets/*.css, *.html", 也可以使用默認(rèn)瀏覽器運(yùn)行browser-sync start --server --files "stylesheets/*.css, *.html", 這時(shí)會(huì)自動(dòng)在瀏覽器中運(yùn)行項(xiàng)目了. -
control + S保存項(xiàng)目中的文件,項(xiàng)目有任何的改變也就能實(shí)時(shí)顯示在瀏覽器中了.
文件保存后,終端能實(shí)時(shí)顯示出來 - 保證電腦和手機(jī)在同一個(gè)局域網(wǎng)下面.在手機(jī)瀏覽器上輸入
External中的網(wǎng)址http://10.17.97.77:3000,(實(shí)際開發(fā)中可能會(huì)不一樣),這樣就能在手機(jī)上實(shí)時(shí)顯示移動(dòng)端的效果了.
示例移動(dòng)端效果圖
這邊有個(gè)小細(xì)節(jié),在桌面瀏覽器或移動(dòng)端的任何操作都會(huì)被同步,比如在移動(dòng)端滾動(dòng)的時(shí)候桌面瀏覽器也會(huì)滾動(dòng),做的nice啊!??
更多功能可以移步:Browsersync中文網(wǎng)
本文參考:
Front-End Web Development: The Big Nerd Ranch Guide
Atom Documentation
Browsersync中文網(wǎng)
如有疑問,歡迎留言 :-D
