Atom及其插件的学习总结
(————————————:分割内容块)
Atom是Github专门为程序员推出的一个跨平台的文本编辑器
————————————
为什么选择atom
————————————官方手册:Atom 基础使用
————————————
我的理解:
我理解的atom是一款自定义特性特别高的代码编辑器,因为它的开源性,允许开发者自己开发相关的插件(package和Themes),而且是由github维护管理,这就使得用户可以安装其他开发者的开发的插件,实现很多想要的功能,且可以美观、快捷、简洁地显示和管理自己的项目。
————————————
Atom使用纪要
————————————比较详细的Atom视频教程:Atom 编辑器系列课程
Atom中文社区,社区里可以解决问题、寻找资源等
使用atom过滤文件:1、将要忽略在tree view上显示的文件后缀名名添加到.gitignored中2、在packages上搜索包tree view,设置中勾选hide ignored names即可
————————————
AtomKey的快捷键:
因快捷键个人设置不同,所以部分可能不是描述的功能(红色标注的为已经使用验证过的)
文件切换
ctrl-shift-o
打开目录
ctrl-\
显示或隐藏目录树
ctrl-t
或ctrl-p
查找文件
ctrl-b
在打开的文件之间切换
ctrl-shift-b
只搜索从上次git commit后修改或者新增的文件导航
alt-left
移动到单词开始
alt-right
移动到单词末尾
ctrl-g
移动到指定行 row:column 处
ctrl-r
在方法之间跳转目录树操作
alt-right
和alt-left
展开(隐藏)所有目录
ctrl-[
和ctrl-]
展开(隐藏)当前目录
ctrl-f
和ctrl-b
同上
ctrl-k h
或者ctrl-k left
在左半视图中打开文件
ctrl-k j
或者ctrl-k down
在下半视图中打开文件
ctrl-k k
或者ctrl-k up
在上半视图中打开文件
ctrl-k l
或者ctrl-k right
在右半视图中打开文件
ctrl-shift-C
复制当前文件绝对路径书签
ctrl-F2
在本行增加书签
F2
跳到当前文件的下一条书签
shift-F2
跳到当前文件的上一条书签
ctrl-F2
列出当前工程所有书签选取
大部分和导航一致,只不过加上shift
ctrl-shift-P
选取至上一行
ctrl-shift-N
选取至下一样
ctrl-shift-B
选取至前一个字符
ctrl-shift-F
选取至后一个字符
alt-shift-B
,alt-shift-left
选取至字符开始
alt-shift-F
,alt-shift-right
选取至字符结束
ctrl-shift-E
,ctrl-shift-right
选取至本行结束
ctrl-shift-A
,ctrl-shift-left
选取至本行开始
ctrl-shift-up
选取至文件开始
ctrl-shift-down
选取至文件结尾
ctrl-A
全选
ctrl-L
选取一行,继续按回选取下一行
ctrl-shift-W
选取当前单词编辑和删除文本
基本操作
ctrl-T
使光标前后字符交换
ctrl-J
将下一行与当前行合并
ctrl-up
,ctrl-down
使当前行向上或者向下移动
ctrl-shift-D
复制当前行到下一行
ctrl-K
,ctrl-U
使当前字符大写
ctrl-K
,ctrl-L
使当前字符小写
ctrl-shift-P
搜索命令删除和剪切
ctrl-shift-K
删除当前行
ctrl-backspace
删除到当前行开始
ctrl-fn-backspace
删除到当前行结束
ctrl-K
剪切到当前行结束
alt-backspace
或alt-H
删除到当前单词开始
alt-delete
或alt-D
删除到当前单词结束多光标和多处选取
ctrl-click
增加新光标
ctrl-shift-L
将多行选取改为多行光标
ctrl-shift-up
,ctrl-shift-down
增加上(下)一行光标
ctrl-D
选取文档中和当前单词相同的下一处
ctrl-ctrl-G
选取文档中所有和当前光标单词相同的位置括号跳转
ctrl-m
相应括号之间,html tag之间等跳转
ctrl-ctrl-m
括号(tag)之间文本选取
alt-ctrl-.
关闭当前XML/HTML tag编码方式
ctrl-shift-U
调出切换编码选项查找和替换
ctrl-F
在buffer中查找
ctrl-shift-f
在整个工程中查找代码片段
alt-shift-S
查看当前可用代码片段自动补全
ctrl-space
提示补全信息折叠
alt-ctrl-[
折叠
alt-ctrl-]
展开
alt-ctrl-shift-{
折叠全部
alt-ctrl-shift-}
展开全部
ctrl-k ctrl-N
指定折叠层级 N为层级数文件语法高亮
ctrl-shift-L
选择文本类型使用Atom进行写作
ctrl-shift-M
Markdown预览可用代码片段
b, legal, img, l, i, code, t, table
git操作
ctrl-alt-Z
checkout HEAD 版本
ctrl-shift-B
弹出untracked 和 modified文件列表
alt-g down
alt-g up
在修改处跳转
alt-G D
弹出diff列表
alt-G O
在github上打开文件
alt-G G
在github上打开项目地址
alt-G B
在github上打开文件blame
alt-G H
在github上打开文件history
alt-G I
在github上打开issues
alt-G R
在github打开分支比较
alt-G C
拷贝当前文件在gihub上的网址
推荐一些好用的插件
主题
atom-material-ui
atom-material-syntax
- 美化
atom-beautify 一键代码美化
file-icons 给文件加上好看的图标
atom-minimap 方便美观的缩略滚动图
pretty-json json格式化工具
activate-power-mode 炫酷的打字特效 - git
atomatigit 可视化git操作
git-time-machine git版本对比工具,可视化选择每一个commit
merge-conflicts 合并冲突可视化工具 - 代码提示
emmet 前端神器
atom-ternjs js代码提示很强大,高度定制化
docblockr jsdoc 给js添加注释
autoclose-html 闭合html标签
color-picker 取色器 必备插件
pigments 颜色显示插件 必装
terminal-panel 直接在atom里面写命令了
svg-preview svg预览 - 便捷操作
advanced-open-file 快速打开、切换文件
project-folder 快速打开、切换项目
script 立即执行当前js文件 - 高亮
language-vue vue框架代码高亮 - 终端
platformio-atom-ide-terminal 终端插件,支持显示、隐藏及多窗口
注:AtomKey收集于网络并自己将部分加以修改、注释以及验证
————————————
Emmet的所有快捷键查询
标签名.class值
标签名#id值
标签名[xxxx="aaa"]{标签内容}
$这个符号加上*n 就可以自动增长值为n
————————————
关于自定义emmet中的html的快捷键的代码模板
我们都知道输入英文的!再按下tab键会生成:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> </body> </html>又如
输入html:5再按下tab键会生成:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> </body> </html>但是当我们想自己定义固定的模板又该如何做呢?
在这里我们可以看到对象abbreviations中的所有关于快捷键的配置信息
"html:5": "!!!+doc[lang=${lang}]"
而!!!和doc[lang=${lang}]又是什么?
"!!!": "<!DOCTYPE html>"
"doc": "html>(head>meta[charset=${charset}]+meta:vp+meta:edge+title{${1:Document}})+body",
所以其实!的意思就是:
!=
<!DOCTYPEhtml>+html[lang=${lang}]>(head>meta[charset=${charset}]+meta:vp+meta:edge+title{${1:Document}})+body
所以对于初步接触html的我来说,我想每次快捷得到这样一个代码模板:
<html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
看起来较为简单,但是以后随着学习的深入还是会配置之前的模板,所以我没有改动原有的快捷键以及配置,而是添加了我自己的快捷键:
确认了!!这个组合没有被使用后,决定用这个组合创建的字节的模板,在对象中分别添加两条语句:
这样达到了我想要的目的。
也许这条内容本身没有意义,但这种方法让我知道了如何从一个事物的本质去学习这个事物,然后使用它。
————————————