天天看点

Atom 编辑器 入门 快捷键 插件在使用前

在使用前

ATOM 是Github主导的Web版的编辑器,目前还是测试阶段,功能很多,bug也很多,如果出现错误,请使用

强制误差调整大法 快捷键 OSX

ctrl-alt-cmd-l

 Win

alt-ctrl-r

说明: ATOM 的快捷键和 Sublime Text 差不多,大部分可以混用

提示,使用快捷键  * Win  

ctrl-shift-p

 * OS X  

cmd-shift-p

可以搜索快捷键, 也可以在关闭所有文档的时候,滚动提示快捷键

首先整理的是OS X的快捷键

文件切换

ctrl-shift-s

保存所有打开的文件

cmd-shift-o

打开目录

cmd-\\

显示或隐藏目录树

ctrl-0

焦点移到目录树 注意这里是数字 0 非常实用,也可以用

cmd+\\

来变相达到效果

目录树下,使用a,m,delete来增加,修改和删除

cmd-t

cmd-p

查找文件

cmd-b

在打开的文件之间切换

cmd-shift-b

只搜索从上次 git commit 后修改或者新增的文件

导航

(等价于上下左右)

ctrl-p

前一行

ctrl-n

后一行

ctrl-f

前一个字符

ctrl-b

后一个字符

alt-B

, alt-left` 移动到单词开始

alt-F

,

alt-right

移动到单词末尾

cmd-right

,

ctrl-E

移动到一行结束

cmd-left

,

ctrl-A

移动到一行开始

cmd-up

移动到文件开始

cmd-down

移动到文件结束

ctrl-g

移动到指定行 row:column 处

cmd-r

在方法之间跳转

目录树操作

cmd-\\

或者

cmd-k

cmd-b

显示(隐藏)目录树

ctrl-0

焦点切换到目录树(再按一次或者Esc退出目录树)

1.

a

添加文件

1.

d

将当前文件另存为(duplicate)

1.

i

显示(隐藏)版本控制忽略的文件

alt-right

alt-left

展开(隐藏)所有目录

ctrl-al-]

ctrl-al-[

同上

ctrl-[

ctrl-]

展开(隐藏)当前目录

ctrl-f

ctrl-b

同上

cmd-k h

或者

cmd-k left

在左半视图中打开文件

cmd-k j

或者

cmd-k down

在下半视图中打开文件

cmd-k k

或者

cmd-k up

在上半视图中打开文件

cmd-k l

或者

cmd-k right

在右半视图中打开文件

ctrl-shift-C

复制当前文件绝对路径

书签

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

,

cmd-shift-right

选取至本行结束

ctrl-shift-A

,

cmd-shift-left

选取至本行开始

cmd-shift-up

选取至文件开始

cmd-shift-down

选取至文件结尾

cmd-A

全选

cmd-L

选取一行,继续按回选取下一行

ctrl-shift-W

选取当前单词

编辑和删除文本

基本操作

ctrl-T

使光标前后字符交换

cmd-J

将下一行与当前行合并

ctrl-cmd-up

,

ctrl-cmd-down

使当前行向上或者向下移动

cmd-shift-D

复制当前行到下一行

Atom大小写转换

cmd-K

,

cmd-U

使当前字符大写

cmd-K

,

cmd-L

使当前字符小写

删除和剪切

ctrl-shift-K

删除当前行

cmd-backspace

删除到当前行开始

cmd-fn-backspace

删除到当前行结束

ctrl-K

剪切到当前行结束

alt-backspace

alt-H

删除到当前单词开始

alt-delete

alt-D

删除到当前单词结束

多光标和多处选取

cmd-click

增加新光标

cmd-shift-L

将多行选取改为多行光标

ctrl-shift-up

,

ctrl-shift-down

增加上(下)一行光标

cmd-D

选取文档中和当前单词相同的下一处

ctrl-cmd-G

选取文档中所有和当前光标单词相同的位置

括号跳转

ctrl-m

相应括号之间,html tag之间等跳转

ctrl-cmd-m

括号(tag)之间文本选取

alt-cmd-.

关闭当前XML/HTML tag

编码方式

ctrl-shift-U

调出切换编码选项

查找和替换

cmd-F

在buffer中查找

cmd-shift-f

在整个工程中查找

代码片段

alt-shift-S

查看当前可用代码片段

在~/.atom目录下snippets.cson文件中存放了你定制的snippets

自定义快捷键说明

自动补全

ctrl-space

提示补全信息

这个快捷键经常和系统快捷键冲突修改

keymap.json

快捷打开在 Settings > Keybindings > your keymap file 里

添加如下代码

'atom-text-editor':
  'alt-/': 'auto-complete-plus:activate'
           

就将

alt-/

设置为提示补全信息的快捷键,当然也可以用其他不冲突的快捷

折叠

alt-cmd-[

折叠

alt-cmd-]

展开

alt-cmd-shift-{

折叠全部

alt-cmd-shift-}

展开全部

cmd-k cmd-N

指定折叠层级 N为层级数

文件语法高亮

ctrl-shift-L

选择文本类型

使用Atom进行写作

ctrl-shift-M

Markdown预览

可用代码片段

b, legal, img, l, i, code, t, table

git操作

cmd-alt-z

checkout HEAD 版本

cmd-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上的网址

插件管理

插件安装需要检查native环境

  • osx 按下快捷键

    cmd+,

    (Win 为 ctrl+, 不过经常和输入冲突,在File->Settings中) 打开

    Settings

    菜单
  • 选择左侧的

    Packages

    页卡,搜索插件
  • 点选插件标题进入 Atom.io 页面, 点选插件内容进入插件管理
  • 右下有卸载插件和关闭插件的开关

插件native环境检查错误解决方法

  • 出现类似这个错误
gyp info it worked if it ends with ok
gyp info using node-gyp@
gyp info using node@ | win32 | ia32
gyp http GET https://atom.io/download/atom-shell/v1/iojs-v1.tar.gz
gyp http  https://atom.io/download/atom-shell/v1/iojs-v1.tar.gz
gyp http GET https://atom.io/download/atom-shell/v1/SHASUMS256.txt
gyp http GET https://atom.io/download/atom-shell/v1/win-x64/iojs.lib
gyp http GET https://atom.io/download/atom-shell/v1/win-x86/iojs.lib
gyp http  https://atom.io/download/atom-shell/v1/SHASUMS256.txt
gyp http  https://atom.io/download/atom-shell/v1/win-x86/iojs.lib
gyp http  https://atom.io/download/atom-shell/v1/win-x64/iojs.lib
gyp WARN install got an error, rolling back install
           

是无法完成atom.io的302重定向,gyp无法完成http GET

全局翻墙即可

临时的解决方案,就是把ATOM_NODE_URL环境变量设为重定向之后的Url

# Windows temporary
set ATOM_NODE_URL=http://gh-contractor-zcbenz.s3.amazonaws.com/atom-shell/dist
# Windows permanently (execute “cmd” with “Run as Administrator”)
setx ATOM_NODE_URL http://gh-contractor-zcbenz.s3.amazonaws.com/atom-shell/dist /M
# OSX or Linux
export ATOM_NODE_URL=http://gh-contractor-zcbenz.s3.amazonaws.com/atom-shell/dist
           

推荐一些好用的插件

安装插件之前

如果访问 [Atom.io/package](https://atom.io/packages  ) 慢,应该是DNS污染导致,设置hosts 到 atom.io 就能减轻重试次数

必装插件

  • set-syntax 支持语言渲染切换,快捷键

    cmd + shift + p

    输入

    set [语言]

  • [linter](https://atom.io/packages/linter  ) 识别多门语言的错误,但是不细致,主插件,可以针对性的安装更细致的检查插件

    支持查找[Git AtomLinter](https://github.com/AtomLinter  )

  • [bottom-dock ](https://atom.io/packages/bottom-dock  ) 上下文提示插件,很多插件依赖这个,快捷键
    1. ctrl-k ctrl-t

      : toggles panel 组合快捷键,按二次
    2. ctrl-k ctrl-r

      : refreshes window 组合快捷键,按二次
    3. ctrl-k ctrl-c

      : closes window 组合快捷键,按二次
  • [linter-manager](https://atom.io/packages/linter-manager  ) linter的管理器需要安装

    linter

    bottom-dock

    , 快捷键和

    bottom-dock

    一致
  • [linter-xmllint](https://atom.io/packages/linter-xmllint  ) 没有人不用XML吧,这是XML语法提示
  • [linter-jsonlint ](https://atom.io/packages/linter-jsonlint  ) 怎么能少了json检查呢
  • [autocomplete-plus](https://atom.io/packages/autocomplete-plus  )  (貌似默认安装好了)完善原有 autocomplete,有二度设置, 现已加入豪华套餐
  • [trailing-spaces](https://atom.io/packages/trailing-spaces ) 多余空格自动高亮插件,此插件默认不开启,设置里自行开启高亮提示

编辑文本与跳转

  • [vim-mode](https://atom.io/packages/vim-mode  ) 用过 vim 的都知道好,基本实现了大部分的功能,不过造成许多快捷键冲突,慢慢排除
  • [jumpy]( https://atom.io/packages/jumpy  ) AceJump 风格的跳转 快捷键

    shift-enter

    详细查看说明,此插件能可能导致顿卡。
  • [quick-jump]( https://atom.io/packages/quick-jump  ) AceJump 风格的跳转 快捷键

    ctrl-;

    目前版本有冲突,不可用

主题

  • dracula-ui JetBrain 家的德古拉皮肤主题,适合小屏幕
  • dracula-theme JetBrain 家的德古拉代码渲染主题,适合小屏幕
  • [atom-material-ui]( https://atom.io/themes/atom-material-ui  ) 非常好看的UI
  • monokai sublime 的代码渲染主题,配合

    atom-material-ui

    视觉效果拔群
  • [atom-material-syntax]( https://atom.io/themes/atom-material-syntax  ) UI的附属字体渲染

美化

  • [atom-beautify]( https://atom.io/packages/atom-beautify  ) 一键代码美化。

代码格式化插件,支持的语言查看帮助文档,此插件需要配置快捷键,推荐使用快捷键

cmd-alt-l

'atom-text-editor':
    'alt-cmd-l': 'atom-beautify:beautify-editor'
           
  • [minimap](https://atom.io/packages/minimap  ) 内部编辑那里有一个小小的代码图,这货就是补全 Atom 这个功能的,支持高亮代码,还可控,具体看内部设置
  • [minimap-find-and-replace](https://atom.io/packages/minimap-find-and-replace  ) 功能同 minimap,简化一些
  • [file-icons]( https://atom.io/packages/file-icons  ) 给文件加上好看的图标。
  • filetype-color 在标签栏不同格式文件显示不同的颜色的标题,支持二度设置
  • tool-bar 工具栏增强 在 ATOM 1.8 时有兼容问题

命令行-一款就够,推荐 tokamak-terminal

  • tokamak-terminal  Win OSX 通用的命令行工具 fork 至 terminal-plus

快捷键 `ctrl-“

Atom 1.12 以后不能直接使用这款方便的插件,会报告错误,修复方法是
# 也可以直接点击Setting进入 Packages/Tokamak Terminal 点击 View Code
cd ~/.atom/packages/tokamak-terminal
           

修改

package.json

"dependencies": {
    "atom-space-pen-views": "^2.1.0",
    "pty.js": "https://github.com/platformio/pty.js/tarball/prebuilt",
    "term.js": "https://github.com/jeremyramin/term.js/tarball/master",
    "underscore": "^1.8.3"
  },
```

```json
{
        "name": "pty.js",
        "version": "^0.3.1",
        "path": "node_modules/pty.js/index.js"
      },




<div class="se-preview-section-delimiter"></div>
           

然后在 

~/.atom/packages/tokamak-terminal

中删除

node_modules

再执行

apm i

  • [terminal-plus](https://atom.io/packages/terminal-plus  ) Win OSX 通用的命令行工具,目前最好用的一款 (停止更新无法支持 ATOM 1.7)以上

快捷键 `ctrl-“

  • terminal-panel 直接在atom里面写命令 Mac 专用
  • [atom-terminal-panel]( https://atom.io/packages/atom-terminal-panel  ) Windows  使用这个可以很好的执行命令行,出现乱码自行修改编码

    快捷键

    shift-enter

    打开面板

    Ctrl-`

    关闭面板
注意相同功能插件会冲突,可以disable一个,快捷键冲突的时候,自行定义一下

git

  • [atomatigit]( https://atom.io/packages/atomatigit  ) 可视化git操作
  • [git-plus](https://atom.io/packages/git-plus  ) 与Sublime Text 的 sublimegit 功能基本一致
  • merge-conflicts git conflicts 合并工具 (default hotkey: alt-m d)
'atom-text-editor.conflicted':
  'alt-m down': 'merge-conflicts:next-unresolved'
  'alt-m up': 'merge-conflicts:previous-unresolved'
  'alt-m enter': 'merge-conflicts:accept-current'
  'alt-m r': 'merge-conflicts:revert-current'
  'alt-m ': 'merge-conflicts:accept-ours'
  'alt-m ': 'merge-conflicts:accept-theirs'

'atom-workspace':
  'alt-m d': 'merge-conflicts:detect'
           

代码提示

  • [color-picker](https://atom.io/packages/color-picker  ) 取色器
  • [pigments](https://atom.io/packages/pigments  ) 颜色显示插件
  • regex-railroad-diagram 正则表达式图形化插件
  • [emmet](https://atom.io/packages/emmet  ) web开发工具箱。神器有个别快捷键会和 Markdown preview 快捷键冲突,改下就好
  • [atom-ternjs](https://atom.io/packages/atom-ternjs  ) js代码提示很强大,高度定制化。
  • [docblockr](https://atom.io/packages/docblockr  )  jsdoc 给js添加注释。
  • [autoclose-html](https://atom.io/packages/autoclose-html  ) 闭合html标签。
  • [preview](https://atom.io/packages/preview  ) 预览各种代码效果
  • [svg-preview](https://atom.io/packages/svg-preview  ) svg预览

 react 插件

  • react react 语法支持
  • atom-react-native-autocompletereact-native 自动代码补全
  • atom-react-previewreact 预览

前端插件

  • autoprefixer 用来补充 css 前缀的,会自动生成多个浏览器的前缀

前端可能

autocomplete

* autocomplete-paths 实用路径补全

* autocomplete-html html更加细致(已加入豪华套餐)

* autocomplete-bibtex Github 的 markdown 语法

* autocomplete-snippets 如名字(已加入豪华套餐)

* autocomplete-css 更加细致(已加入豪华套餐)

前端可能

linter

  • linter-jshint , for JavaScript and JSON, using jshint
  • linter-jscs , for JavaScript, using JSCS
  • linter-js-standard , for JavaScript, Standard Style
  • linter-coffeelint , for CoffeeScript, using coffeelint
  • linter-coffeescript ,on the fly, using coffee
  • linter-tslint , for Typescript, using tslint
  • linter-tidy , for HTML, using tidy
  • linter-php , for PHP using php -l
  • linter-pylint , for Python, using pylint
  • linter-scss-lint , for SASS/SCSS, using scss-lint
  • linter-less , for LESS, using less
  • linter-csslint , for CSS, using csslint
  • linter-stylint , for Stylus, using stylint
  • linter-stylus , for Stylus, using stylus

实用技巧

Atom 显示 空格 换行 回车 等隐藏元素

Setting

Core Setting

中寻找 分类

Scoll Sensitivity

勾上选项

Show Invisbles

就可以显示tab space 回车 换行了

推荐使用能配合

monokai

代码渲染的主题 如:

atom-material-ui

atom-dark

one-dark

如果是其他主题,觉得空格显示的效果不明显 找到栏目

Invisible Space

输入内容

或者

-

加强现实效果 重新载入生效或者重新载入生效

参考

  • futantan/atom 文章源自:https://github.com/futantan/atom 作者:futantan 
  • Atom使用教程 文章源自:http://wiki.jikexueyuan.com/project/atom/plug-in.html  作者:wiki.jikexueyuan.com