Atom简介ATOMnode.js插件atom-beautifyopeninbrowserbrowser-plus color-picker emmet快速生成Html快速生成元素代码快速生成多个元素生成和嵌套一次生成多个元素CSS缩写eq1 eeql IMAP o complete-pathsdocblockrgit-pluslinterlinter-jshintlinter-csslintlinter-html hint快捷键
前言
Web前端开发由网页制作发展而来，名称具有明显的时代特征。 在互联网的发展进程中，网页的创建是Web1.0时代的产物，早期网站的主要内容是静态的，以图像和文字为主，用户使用网站的行为也以浏览为主。
2005年以后，随着网络技术的发展和HTML5、CSS3的应用，网络进入Web2.0时代，现代网页更加美观，交互效果明显，功能更加强大。
网页上的软件化交互方式基于前端技术实现，为用户提供更好的使用体验。 以前只要能做Photoshop和Dreamweaver就可以做网页，但现在这样还不够。 无论是在开发难度方面，还是在开发方式方面，当前的网页制作都与传统的网站后台开发相近，因此现在不再称为网页制作，而是称为Web前端开发。
前端开发主要涉及HTML、CSS和JavaScript三个方面。 除了学习这些技术外，您可能还需要学习Ajax、DOM、SEO和服务器端基础知识等
前端开发与后端开发不同，后端开发是一条先慢后快的学习曲线，因为入门门槛较高，但前端是一个先快后慢的学习过程。 因为门槛低，经常会遇到自学成功的前端工程师。 但是，它的学习曲线越来越陡，越往后越难。 其实这和安卓的开发很像
今天不要介绍网络三要素，请先了解开发工具。 毕竟，你想去天上的话，就必须有天上的工具。 现在，我来介绍一下WEB开发的天然工具-Atom
ATOM atom编辑器是Github为程序员开发的开源跨平台文本编辑器。 它具有许多有趣的特点：具有简单直观的图形用户界面，支持CSS、HTML和JavaScript等web编程语言。 支持宏，自动完成屏幕分割功能，集成文件管理器。 而且在跨平台上支持Linux、window、mac。
官方网站地址： https://atom.io/
文档介绍： https://atom.io/docs
或者，在此下载https://download.csdn.net/download/QQ _ 30993595/10606731
官方网站很简单。 直接点击Download下载即可。 识别电脑的操作系统，准备对应版本的文件
该编辑器是开源的，代码托管在https://github.com/atom/atom上
一个这样的好处是，如果在使用Atom的过程中发生了什么问题，例如插件安装失败报告了错误、插件不可用等问题，可以直接在github上进行new issue，找到解决方法
下载文件是可执行的程序，直接执行就可以了
虽然是node.js，但为了使某些插件顺利运行，必须安装node.js
Node.js是基于Chrome V8引擎的JavaScript执行环境，引用廖雪峰老师的说明
Node.js现在是一项非常炙手可热的技术，但其诞生经验正在发生变化。
众所周知，在Netscape设计JavaScript的几个月后，JavaScript实际上成为了前端开发的唯一标准。
随后，微软在IE上击败Netscape统一了桌面。 结果，几年间，浏览器没有进步。 (2001年发售的旧IE 6今天也有人在使用！ ）
没有竞争就不会发展。 微软认为IE6浏览器非常完善，几乎没有什么可以改善的地方，所以解散了IE6开发团队！ 谷歌认为，支持现代web APP应用的新一代浏览器才刚刚开始，尤其是浏览器运行JavaScript的引擎的性能将提高10倍。
首先，Mozilla利用壮烈牺牲的Netscape遗产在2002年推出了Firefox浏览器，接着Apple在2003年基于开源KHTML浏览器推出了WebKit内核Safari浏览器。
之后，谷歌也开始创建自己的浏览器。 他们也喜欢WebKit内核，并基于WebKit内核推出了Chrome浏览器。
Chrome浏览器跨越Windows和Mac平台。 而且，谷歌认为要运行现代的web APP应用，浏览器需要非常强大的JavaScript引擎，谷歌自行开发了高性能JavaScript引擎。 名称为V8，使用BSD许可证开放源代码。
浏览器战争和Node有什么关系？
顺便说一下，有一个叫Ryan Dahl的乖乖仁，他的工作是用抄送写高性能网络服务。 高性能的情况下，异步IO、事件驱动是基本原则，但用C/C写太辛苦了。 因此，这个yydpw开始设想用高级语言开发Web服务。 他对很多高级语言进行了评价，发现很多语言既提供同步IO，也提供异步IO，但开发者使用同步IO就不擅长写异步IO，所以最终
，Ryan瞄向了JavaScript。因为JavaScript是单线程执行，根本不能进行同步IO操作，所以，JavaScript的这一“缺陷”导致了它只能使用异步IO。
选定了开发语言，还要有运行时引擎。这位yydpw曾考虑过自己写一个，不过明智地放弃了，因为V8就是开源的JavaScript引擎。让Google投资去优化V8，咱只负责改造一下拿来用，还不用付钱，这个买卖很划算。
于是在2009年，Ryan正式推出了基于JavaScript语言和V8引擎的开源Web服务器项目，命名为Node.js。虽然名字很土，但是，Node第一次把JavaScript带入到后端服务器开发，加上世界上已经有无数的JavaScript开发人员，所以Node一下子就火了起来。
在Node上运行的JavaScript相比其他后端开发语言有何优势？
最大的优势是借助JavaScript天生的事件驱动机制加V8高性能引擎，使编写高性能Web服务轻而易举。
其次，JavaScript语言本身是完善的函数式语言，在前端开发时，开发人员往往写得比较随意，让人感觉JavaScript就是个“玩具语言”。但是，在Node环境下，通过模块化的JavaScript代码，加上函数式编程，并且无需考虑浏览器兼容性问题，直接使用最新的ECMAScript 6标准，可以完全满足工程上的需求。
Node官网https://nodejs.org/zh-cn/
或者去这里下载https://download.csdn.net/download/qq_30993595/10606743
同样的这里我们下载稳定版本，直接安装就行了，安装后可以在Dos窗口中输入node -v ，如果出现版本提示说明安装成功
Atom安装完成后就是这样的，图里是我自己新建的project
图片中右半部分是一个Atom编辑器使用指南，第一个Item的意思是打开一个项目，如下
选中一个项目打开后就是第一张图那样了，最左边是项目的树形目录
插件接下来看下导航的第三个item，看名字就知道是安装插件了（也可以在顶部菜单栏的File-Settings-Install这样打开）
Atom编辑器一个很好用的地方就是有非常多的开源插件供开发者下载安装使用，极大提高我们的开发效率
点击Open Installer后，会跳到如下界面
这里可以在输入框搜索想要的插件，然后点击Install就可以自动安装了；可以点击左边菜单栏的Packages看到自己安装了哪些插件，可以对已安装的插件进行设置，禁用，卸载，更新操作
这里介绍下我安装的一些插件，也是平时开发中用的比较好的
atom-beautify直接在搜索框输入名字点击Packages搜索就行了，如下图
我这里因为已经安装过了，可以点击进去看看介绍，主要是用来美化Atom中的HTML，CSS，JavaScript，PHP，Python，Ruby，Java，C，C ++，C＃，Objective-C，CoffeeScript，TypeScript，Coldfusion，SQL等等样式
比如我在编辑器里写Html，格式写的很乱，如下图
这样就没办法看了，那我安装了这个插件就可以直接在这个编辑页面右键，选中其中的一个beautify editor contents选项，或者按快捷键Alte+Ctrl+B，格式就会变得整齐，基本上就是一个格式化的作用
open in Browser这个插件作用很明显了，就是用浏览器预览我们编辑的文件，也是右键选择Open in Browser或者快捷键Ctrl+shift+Q
Browser-plus这个插件就是直接在编辑器右边部分打开一个浏览器预览，使用方法也是右键选择或者快捷键alt+ctrl+o，如图
并且可以实时修改刷新，跟Android开发中在Android Studio里编辑Layout文件一样的效果
color-picker这是一个颜色选择器，写CSS或者样式表这个真的挺有效果的，如图
我想在这个内联样式表里的背景颜色属性添加一个颜色值，那就可以右键选择Color Picker或者快捷键alt+ctrl+c，然后在颜色版中选择就行了
Emmet的前身是大名鼎鼎的Zen coding，如果你从事Web前端开发的话，对该插件一定不会陌生。它使用仿CSS选择器的语法来生成代码，大大提高了HTML/CSS代码编写的速度，使用样例见下方
快速生成HtmlHTML文档需要包含一些固定的标签，如html标签，head标签，body标签等，现在你只需要1秒钟就可以输入这些标签，比如输入一个 ! 或者 html:5，然后按tab键就可以一键生成，简直了
这里要注意几个点：html:5 或!：用于HTML5文档类型；html:xt：用于XHTML过渡文档类型；html:4s：用于HTML4严格文档类型
快速输入类、id、文本和属性
比如输入p#fff ，然后按tab键，就会生成完整元素
比如输入p#fff. ，然后按tab键，就会生成完整元素
比如输入p.cc#fff，然后按tab键，就会生成完整元素
还可以快速输入元素文本内容，比如输入h1{boy}，然后按tab键，就会生成完整元素
输入a[href=boy]{this is boy}，然后按tab键，就会生成完整元素
比如输入p>h1， 然后按tab键，如图（> 符号表示嵌套子元素）
这种是可以结合上面的快捷输入方法使用的，比如输入p>h1{this is boy}
想要多个同级元素可以这样输入h1+a，就可以得到（+ 符号表示生成多个同级元素或者标签）
同样也可以结合上面的内容输入快捷法，这里就不一一举例了
两个符号可以结合一起使用，比如输入(p>h1)+(p>a)
或者(.boy>p)+(.girl>p)
这里的 . 默认表示div（要求div没有父级标签，直接编写在body里），可以直接写成(div.boy>p)+(div.girl>p)，效果是一样的
如果在其它标签里输入 . ，那么Emmet会根据父标签来判断.去生成什么标签
比如我在ul里输入.，那么就不一样了，我们先输入ul标签，
再苹果月光输入.
或者结合上面子标签符号>，输入ul>. ，这样按TAB键是一样的效果
我列举一些在不同情况中输入. 得到什么标签
这个需要用到号，比如输入 p>h13，得到三个h1元素
输入ul>.*3，可以得到
这个.号可以用其它元素代替，只不过在ul标签中.默认表示为li
还可以把属性一起带上
ul>.item*3
ul>.item$*3
这里美元符号表示一位数字，用来对内容生成编号，只出现一个的话，就从1开始。
如果想出现多个数字就用多个$表示
ul>.item$$*3
现在都是正序生成的，如果想倒序生成可以这样（@-实现倒序）
ul>.item$@-*3
还可以指定从那个序号开始生成
ul>.item$@6*3
比如你输入宽度或者高度，可以直接输入w100或者h100，按下TAB键就可以得到
如果不想要以px做单位，而是以百分比，那就用p代替，w10p或者h10p
其它属性也是一样，比如m10或者p10
还有单位缩写如下
p 表示%e 表示 emx 表示 ex不写单位表示px eq2输入@f ，然后Tab键，可以快速引用字体
输入@f+，然后Tab键，可以加入更多属性
有时候你不太确定你要输入的缩写，Emmet可以通过模糊匹配找到你想要的
比如输入oh，ovh，ov-h等都可以匹配到overflow: hidden;
想要渐变效果，输入lg(left,#fff 50%,#000)，表示从左到右 颜色从白到黑渐变
更多Emmet快捷使用可在这里查看https://docs.emmet.io/cheat-sheet/
minimap用过Sublime或者UItraEdit应该都知道，就是显示在编辑器右边的缩小版代码，也可以设置放在左边
这是一个文件图标插件，用过AndroidStudio或者PyCharm，或者其它编辑器的童靴，应该注意到每次新建文件的时候，在左边树形目录这个文件名字旁边会对应一个符合文件性质的图标，这个插件就是这个作用，看上面的截图也应该能看出来
autocomplete-paths这个还是很有必要的，作用就是自动补齐目录，如果自己手写，那你在引用CSS文件或者图片的时候，就得慢慢敲文件路径了，而且还容易出错
docblockr这个插件是为了方便注释用的，可以输入/** 然后敲回车，输入ctrl+/ 也可以注释
git-plus在Atom上使用git plus插件可以脱离其他git终端即可完成各种git指令实现版本控制，但是一些复杂操作还是使用命令行比较好，git plus只是封装了一些命令的使用
linter基本语法检查插件
linter-jshint基于 jshint 的 JavaScript 语法检查插件
linter-csslint同上，css语法检查插件
linter-htmlhint同上，html语法检查插件
快捷键 新建界面窗口 Ctrl + Shift + N新建文件 Ctrl + N打开文件 Ctrl + O打开文件夹 Ctrl + Shift + O关闭当前编辑文档 Ctrl + W关闭编辑器 Ctrl + Shift + W复制文档路径 Ctrl + Shift + C选择编码格式 Ctrl + Shift +U语法选择 Ctrl + Shift + L跳转到某行 Ctrl + G全屏 F11从缓存器搜索 Ctrl + F高级替换 Ctrl + Shift + F启用注释 Ctrl + /文件跳转面板 Ctrl + T选定一行 Ctrl + L复制光标所在行并自动换行 Ctrl + Shift + D删除一行 Ctrl + Shift + K删除光标处至词尾 Ctrl + Del切换编辑的标签页 Ctrl + Tab选定光标处至文档首行 就是光标处作为分割线,取文档上部分 Ctrl + Shift + Home选定光标处至文档尾行 就是光标处作为分割线,取文档下部分 Ctrl + Shfit + End