atom编辑器运行html,Atom编辑器配置

本文作者:IMWeb 黄龙

未经同意,禁止转载

Atom 是 Github 专门为程序员推出的一个跨平台文本编辑器。具有简洁和直观的图形用户界面,并有很多有趣的特点:支持CSS,HTML,JavaScript等网页编程语言。它支持宏,自动完成分屏功能,集成了文件管理器。

本文将通过简单实用的方法来带你学习 Atom 编译器的使用。

常用的插件

emmet: 提高开发效率

atom-ternjs: JS代码智能提示补全

file-icons: 文件图标

linter-jscs: jscs验证插件

linter-jscs的配置:

1.打开设置【win:ctrl+,】【mac:commond+,】

2.点击packages,里面就是已经安装好的插件

8d71194637798c1c920f7d8f3bb9816f.png

插件自带按jscs格式化的功能,保存的时候自动格式化,非常方便.如果团队没有自己的代码规范的话插件默认自带了一些规范可供选择其中有airbnb、google、jquery、grunt等代码规范可选。

如果配置了自己的jscs配置文件,Preset需要设置为none,不然需要保存两次才格式化当前文件。

注意:3.4.8版本的linter-jscs插件没有none选项但是可以自己修改,插件会保存在用户目录的.atom目录的packages目录里面,找到linter-jscs/src/linter-jscs.js文件在代码的19行添加一个选项重启Atom即可

docblockr: 快速写注释文档的插件,支持的语言很多 前端涉及的TypeScript CoffeeScript ActionScript Javascript Haxe等语言都支持minimap:小地图

打开设置快捷键

【win:ctrl+,】【mac:commond+,】

装完插件之后我的Atom有379个快捷键,要记这么多快捷键肯定很麻烦。可以通过设置的Keybindings里面查找。

设置编辑器tab键4个空格

可以在config.cson(file-> Open Your Config)里面配置

"*":

editor:

tabLength: 4

也可以直接在设置用配置也可以在settings里面的Editor Settings里面的Tab Length设置

ed44659ba1a29d1ec9f6ee514134e1f1.png

jscs验证错误

ff54523d64261eaa72f18e0eba3ab7db.png

这个错误是换行是LF还是CRLF

notepad++中打开这个地方可以看到

501b65a487a719aa2e9bbf6e7123a6e6.png

在Atom中它在编辑器的右下角

d82c2cf2bcfbccf070e2eef0ee728822.png

点击CRLF/LF即可切换。换成JSCS配置的就可以了

分屏默认快捷键

ctrl+k up

ctrl+k down

ctrl+k left

ctrl+k right

Atom支持组合按键,分屏快捷键的按键方法是同时按ctrl+k然后松手再按up/down/left/right

关闭分屏的快捷键ctrl+k ctrl+w(应该知道怎么玩了吧)

搜索

ctrl+shift+f搜索

按Esc关闭搜索框

Ignored Names配置

打开setting:【win:ctrl+,】【mac:commond+,】

找到Ignored Names,格式是.svn, fis3, dev, .node_temp

.svn 不仅仅会过滤掉所有的.svn目录。

如果希望在左边的文件列表里也隐藏这些文件夹可以操作下面的步骤:

在settings里面找到packages,搜索tree-view,点击settings

fc4629ad83545f091cb8cc7b4c988eeb.png

勾选Hide Ignored Names,在文件列表里面就消失了

38fbee828a43957f2ca3eb31ee64b7ae.png

几个有用的链接

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值