【Atom】插件、快捷键、主题

最新推荐文章于 2021-05-16 20:26:04 发布

RenSLei

最新推荐文章于 2021-05-16 20:26:04 发布

阅读量1.6k

点赞数 1

分类专栏： github Atom

本文链接：https://blog.csdn.net/renshilei123/article/details/80237794

版权

github 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

Atom

1 篇文章 0 订阅

订阅专栏

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 在方法之间跳转

书签

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 提示补全信息

文件语法高亮

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 终端插件，支持显示、隐藏及多窗口

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>

但是当我们想自己定义固定的模板又该如何做呢？

1、找到文件~/.atom/packages/emmet/node_modules/emmet/lib/snippets.json(在setting中的open config folders里打开atom的所有配置文件)

2、在对象abbreviations中自定义模板，找到html的版块：

在这里我们可以看到对象abbreviations中的所有关于快捷键的配置信息

其中！的配置信息："!": "html:5"，再定位到html:5:

"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>

看起来较为简单，但是以后随着学习的深入还是会配置之前的模板，所以我没有改动原有的快捷键以及配置，而是添加了我自己的快捷键：

确认了!!这个组合没有被使用后，决定用这个组合创建的字节的模板，在对象中分别添加两条语句：

这样达到了我想要的目的。

也许这条内容本身没有意义，但这种方法让我知道了如何从一个事物的本质去学习这个事物，然后使用它。

————————————

RenSLei

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
【Atom】插件、快捷键、主题

Atom是Github专门为程序员推出的一个跨平台的文本编辑器为什么选择atom 官方手册：Atom 基础使用我理解的atom是一款自定义特性特别高的代码编辑器，因为它的开源性，允许开发者自己开发相关的插件（package和Themes），而且是由github维护管理，这就使得用户可以安装其他开发者的开发的插件，实现很多想要的功能，且可以美观、快捷、简洁地显示和管理...
复制链接

扫一扫