前端实践 - 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. 详细的使用指南:

   • Atom编辑器入门到精通(一) 安装及使用基础
   • Atom编辑器入门到精通(二) 插件的安装和管理
   • Atom编辑器入门到精通(三) 文本编辑基础
   • Atom编辑器入门到精通(四) Atom使用进阶
   • Atom编辑器入门到精通(五) Git支持
   • Atom编辑器入门到精通(六) Markdown支持

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后会有两个命令可用: node和npm, 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