前端實踐 - 1.文本編輯器Atom+瀏覽器實時同步工具BrowserSync

1. 簡介

Atom作為Github開源的一款文本編輯器,相比其他編輯器有著很多的優勢:

  1. 可定制化程度高,能夠進行各種擴展,包括各種插件主題;
  2. 吸收了很多文本編輯器的優秀特性,兼容VIM模式;
  3. 自帶包管理;
  4. 開源免費,有強大的Github為其背書.

官網: Atom
知乎: 如何評價 GitHub 發布的文本編輯器 Atom?


Browsersync能讓瀏覽器實時、快速響應文件的更改(html、js、css、sass、less等)并自動刷新頁面.
Browsersync可以同時在PC、平板、手機等設備下進項調試.
也就是說,和Atom配合后,只要保存下代碼,就能同時看到PC端和移動端的效果了,可以大幅提高開發效率.

2. Atom的使用.

  1. 下載安裝包解壓,下載地址: Atom

  2. 詳細的使用指南:

  3. 需要知道的幾個技巧:

    • 設置Tab使用4個空格: Preferences -> Editor -> Tab Length 改為4.
    • 所有的快捷鍵: Preferences -> Keybindings,包括插件的快捷鍵.
  4. 插件和主題的安裝Preferences -> Install ,在里面搜索安裝就行了.

  5. 常用的插件和主題:

    • 主題插件:seti-ui


      主題插件安裝完之后需要在Preferences -> Themes中選擇需要的主題

    • 插件Emmet : Emmet中定義了一些縮寫代碼,輸入代碼,按enter就能展開成完整的代碼.


      eg. 輸入html再按Enter就可以得到如下代碼了.

      具體的縮寫還有很多,可以看這里:前端開發利器:Emmet 介紹

    • 代碼格式美化插件: atom-beautify


      格式化代碼快捷鍵:control + alt + B

    • 填寫路徑的時候能有提示的插件:autocomplete-paths


      路徑提示

  • 文檔快速查詢插件:api-docs


    `ctrl + d`搜索

  • 代碼校驗插件: linter,安裝完后還有安裝linter的三個組件Linter Html.Linter Csslint.hintLinter Eslint,分別是檢查HTML.CSS.JS代碼錯誤的.

![](http://upload-images.jianshu.io/upload_images/924285-11a64a93c062386a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
![](http://upload-images.jianshu.io/upload_images/924285-efe78b96b3dce9c5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
錯誤提示

3. Browsersync的使用

Browsersync的安裝:

  1. BrowserSync是基于Node.js的, 是一個Node模塊,首先得安裝Node.js.
  2. 安裝完node后會有兩個命令可用: nodenpm, npm就是用來下載開源的開發工具,在終端中輸入sudo npm install -g browser-sync,下載npm庫中的BrowserSync,不加sudo可能會出錯,sudo是為了獲得管理員權限.
    安裝完之后是這樣

Browsersync的使用:

  1. Atom新建或打開一個項目.
  2. 使用cd切換到對應的項目的文件夾目錄
  3. 在終端輸入命令browser-sync start --server --browser "Google Chrome" --files "stylesheets/*.css, *.html", 也可以使用默認瀏覽器運行browser-sync start --server --files "stylesheets/*.css, *.html", 這時會自動在瀏覽器中運行項目了.
  4. control + S保存項目中的文件,項目有任何的改變也就能實時顯示在瀏覽器中了.
    文件保存后,終端能實時顯示出來
  5. 保證電腦和手機在同一個局域網下面.在手機瀏覽器上輸入External中的網址http://10.17.97.77:3000,(實際開發中可能會不一樣),這樣就能在手機上實時顯示移動端的效果了.
    示例移動端效果圖
示例瀏覽器效果圖

這邊有個小細節,在桌面瀏覽器或移動端的任何操作都會被同步,比如在移動端滾動的時候桌面瀏覽器也會滾動,做的nice啊!??

更多功能可以移步:Browsersync中文網

本文參考:
Front-End Web Development: The Big Nerd Ranch Guide
Atom Documentation
Browsersync中文網

如有疑問,歡迎留言 :-D

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容