Atom编辑器


为什么选择使用Atom?

Atom是GitHub推出的一款编辑器, 被称为21世纪的黑客编辑器.作为一个现代的代码编辑器,Atom 有着各种流行编辑器都有的特性,功能上非常丰富,支持各种编程语言的代码高亮(HTML / CSS / Javascript / PHP / Python / C / C++ / Objective C / Java / JSON / Perl / CoffeeScript / Go / Sass / YAML / Markdown 等等)、 与大多数其他编辑器相比,Atom的语言支持已经算是覆盖非常全面了。另外,它的代码补全功能(也叫Snippets) 也非常好用,你只需输入几个字符即可展开成各种常用代码,可以极大提高编程效率。

chinese 汉化 pigments 显示颜色 color-picker 快捷颜色插件 vim-mode emmet

安装

打开官方主页

网页会自动判断你的操作系统, 给出其对应的下载按钮 Image text

基本使用

命令面板

Atom的很多功能学习和参考了其他优秀的编辑器, 命令面板就是其一. 当你第一次看到它时, 还以为在用Sublime呢 命令面板是Atom中最常用的功能之一, 当你在编辑器中使用快捷键Ctrl+Shift+P时, 就会看到它 Image text 在控制面板中可以输入Atom中和插件中定义的所有命令, 并且支持模糊搜索 比如说当你输入cboo时, 所有包含有这4个字符的命令就都列出来了 在列出的命令后还显示了此命令对应的快捷键(如果有的话)

设置窗口

自带可视化的设置界面是Atom使用很方便的原因之一, 而不像传统的编辑器那样需要手动修改配置文件.

Image text

你可以使用下面三种方法来打开设置窗口

  • 主菜单Edit->Preferences
  • 在命令面板中输入命令Settings View:Open. 因为命令窗口支持模糊查询, 因此只需要输入svo, 就可以了
  • 使用快捷键Ctrl+,

在设置窗口中可以设置和管理各种编辑器行为, 键盘快捷键, 插件, 主题等内容

设置窗口界面主题和代码高亮

Atom自带了4种窗口主题和8种代码高亮方式

可以通过设置窗口中的Themes页面来配置和修改

Image text

安装插件

通过设置窗口Settings界面的Install选项中,可以搜索插件或者主题进行下载安装

Image text

常用的一些插件

1、simplified-chinese-menu

Atom的简体中文语言包,完整汉化,兼容所有已发布的版本Atom。

2、linter-js-standard

用来使javascript代码格式化。

3、emmet

这款插件是用来支持zend-coding,Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生。它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度

4、autoclose-html

html标签自动比较。

5、atom-ternjs

该插件能对一个对象中拥有的对外提供的属性和方法都能通过suggest的形式提示出来,能对一个对象对外提供的接口有一个选择过程,可以理解为js代码自动提示。

6、atom-bootstrap3

bootstrap3代码提示插件。

7、autocomplete-paths

文件路径自动提示。

Image text

8、jquery-snippets

jquery代码提示,安装完之后要重新启动Atom。

9、autoprefixer

css代码前缀自动补全。

Image text

10、color-picker

取色器。 右键单击并选择Color Picker,或者点击CMD-SHIFT-C/ CTRL-ALT-C打开它。目前读HEX,HEXa,RGB,RGBa,HSL,HSLa,HSV,HSVa,VEC3和VEC4颜色-并能在格式之间的转换。 它还检查Sass和LESS颜色变量。只需Color Picker用光标打开一个变量,它就会查找你的定义。从那里,您可以单击定义并直接转到定义的位置。

Image text

11、activate-power-mode

编写代码特效

Image text

12、atom-ternjs

JS代码智能提示。

新增功能:增加了对ES5,6,ES7,Node.js,jQuery的支持,和更多的可扩展插件。

13、snippets

按tab键自动填充代码。

14、atom-beautify

代码美化 打开命令选项板,键入Beautify并运行Beautify Editor。 右键或者快捷键 ‘ctrl-alt-b’:’atom-beautify:美化编辑器’ 命令面板 美化语言的命令 (https://atom.io/packages/atom-beautify)

2、原生Markdown书写和预览

Markdown 是一种轻量级的「标记语言」,它的优点很多,目前也被越来越多的写作爱好者,撰稿者广泛使用。看到这里请不要被「标记」、「语言」所迷惑,Markdown 的语法十分简单。常用的标记符号也不超过十个,这种相对于更为复杂的HTML标记语言来说,Markdown可谓是十分轻量的,学习成本也不需要太多,且一旦熟悉这种语法规则,会有一劳永逸的效果。

Atom原生支持Markdown的书写和预览,这相较于Sublime的需要安装第三方Markdown插件使用起来还要优秀,由于时Github自家打造,Markdown语法当然也是与github语法完全同步。

使用快捷键 Ctrl + Shift + M 则可打开Markdown的预览界面。

原文:Atom - 介绍和使用方法(好用的文本编辑器,代码提示高亮、Markdown)

Atom的markdown Preview官方效果图如下:

原文:Atom - 介绍和使用方法(好用的文本编辑器,代码提示高亮、Markdown)

3、原生Git支持

作为一个程序员,Git无疑是一个版本控制神器。如果你编辑了你从GitHub上Pull代码,那么在编辑器的右下角或者菜单树中能直观的看到自己编辑代码的状态,当然还有其他很多功能。这个大家可以自行去摸索。

三,常用快捷键

Atom设置选项 keybindings 中列举了相当长的一份关于快捷键的绑定列表,你也可以自定义快捷键的配置文件,有相同的快捷键则会覆盖掉原有的,使用你自己设定的。下面是一些常用的快捷键:

Crtl+Shift+M 开启Markdown实时预览 Command+Shift+P 打开命令窗口,可以运行各种菜单功能 Command + T 快速多文件切换 Command + F 文件内查找和替换 Command + Shift + F 多文件查找和替换 Command + [ 对选中内容向左缩进 Command + ] 对选中内容向右缩进 Command + \ 显示或隐藏目录树 Crtl + m 相应括号之间,html tag之间等跳转 Crtl + Alt + B 格式化代码(需要安装atom-beautify) Crtl + ` 调起CLI命令行界面(需要安装terminal-panel)

四,常用的一些插件

Atom的常用插件基本上都在 Atom Packages 首页中能找到,选择热门的、下载量较多的适合自己需要的基本上都是正确的选择,下面列举一写比较好用的插件:

1、minimap

minimap是一个预览全部代码的一个插件,同时能方便的移动到指定的文件位置。

原文:Atom - 介绍和使用方法(好用的文本编辑器,代码提示高亮、Markdown)

2、atom-beautify

atom-beautify是一个格式化代码的插件,支持HTML, CSS, JavaScript, PHP, Python, Ruby, Java, C, C++, C#, Objective-C,CoffeeScript, TypeScript, SQL等多种语言。

  • 安装后可以使用 Crtl + Alt + B 快捷键进行格式化。
  • 也可以点击菜单”Packages”->”Atom Beautify”->”Beautify”进行格式化。

3、emmet

emmet是HTML,CSS快速编写的神器,具体的使用可以参看emmet官网。

4、autocomplete-* 系列

autocomplete-*系列包含各个语言的代码自动补全功能,你需要什么语言的就可以下载该语言相关的插件即可。

  • autocomplete-paths:填写路径的时候有Sug提示
  • autocomplete-php:php代码提示补全
  • autocomplete-java:java代码提示补全

    原文:Atom - 介绍和使用方法(好用的文本编辑器,代码提示高亮、Markdown)

    原文:Atom - 介绍和使用方法(好用的文本编辑器,代码提示高亮、Markdown)

5、pigments

pigments是项目文件中,样式显色显示的的插件。在Atom中的下载量可是相当的高。对于前端人员来讲还是很重要的一个插件。

原文:Atom - 介绍和使用方法(好用的文本编辑器,代码提示高亮、Markdown)

6、terminal-panel

用于执行命令并显示输出。打开终端面板快捷键:Ctrl + `

原文:Atom - 介绍和使用方法(好用的文本编辑器,代码提示高亮、Markdown)

7、docblockr

可以帮助我们方便快速地写注释。

原文:Atom - 介绍和使用方法(好用的文本编辑器,代码提示高亮、Markdown)

8、javascript-snippets

让我们书写js时使用各种缩写,自动补全代码。

原文:Atom - 介绍和使用方法(好用的文本编辑器,代码提示高亮、Markdown)

9、file-icons

让文件前面有彩色图片,使文件类型看得更加清除舒服。(如果使用着 seti-ui 主题,则体现不了效果哦)

原文:Atom - 介绍和使用方法(好用的文本编辑器,代码提示高亮、Markdown)

五、常用主题

Atom 的主题是分为UI主题和语法主题,默认情况下软件已经提供了好几套主题(有暗色调、也有亮色调)供我们使用。

  • 在菜单”Atom”->”Preferences”->”Themes” 页面中可以分别切换 UI Theme 和 Syntax Theme
  • 在菜单”Atom”->”Preferences”->”Install” 页面中可以搜索安装各种主题。

除了默认自带的主题,下面推荐几个优秀的Theme,大家可以自行安装。

#

1,seti-ui + seti-syntax

每个文件前的icons是最大亮点

原文:Atom - 介绍和使用方法(好用的文本编辑器,代码提示高亮、Markdown)

2,atom-material-ui + atom-material-syntax

颜色正

(1)暗色调

原文:Atom - 介绍和使用方法(好用的文本编辑器,代码提示高亮、Markdown)

(2)亮色调

原文:Atom - 介绍和使用方法(好用的文本编辑器,代码提示高亮、Markdown)

原文出自:www.hangge.com 转载请保留原文链接:http://www.hangge.com/blog/cache/detail_1149.html

快速打开命令行

ctrl+shift+p
http://blog.csdn.net/hunyxv/article/details/52549153

代码兼容性

https://atom.io/packages/autoprefixer

自动保存

OS X: cmd-,, Windows & Linux: Ctrl-,
https://atom.io/packages/autosave

version control with git and github

tracks changes to your code as you work.Branch,commit,push,and pull widthout leaving the comfort of you editor. collaborate with other developers on GitHub.

版本控制与git和github

跟踪您的代码的变化,在您工作时。分配,提交,推送和拉扯,没有离开您的编辑器的舒适。 与GitHub上的其他开发人员合作。

当打开一个或多个目录时,你可以:

  • 通过Ctrl+T或Ctrl+P来搜索目录中的文件
  • 通过Ctrl+B来搜索一个当前打开的文件
  • 通过Ctrl+Shift+B来搜索一个新建的或更改过的文件

atom 扩展插件报错
解决办法:https://github.com/atom/apm/issues/322

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Updating to “file-icons@2.1.17” failed.Hide output…
gyp info it worked if it ends with ok
gyp info using node-gyp@3.4.0
gyp info using node@6.9.5 | win32 | x64
gyp http GET https://atom.io/download/electron/v1.6.16/iojs-v1.6.16.tar.gz
gyp WARN install got an error, rolling back install
gyp ERR! install error
gyp ERR! stack Error: connect ETIMEDOUT 54.231.120.19:443
gyp ERR! stack at Object.exports._errnoException (util.js:1022:11)
gyp ERR! stack at exports._exceptionWithHostPort (util.js:1045:20)
gyp ERR! stack at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1087:14)
gyp ERR! System Windows_NT 10.0.16299
gyp ERR! command "C:\\Users\\SUI\\AppData\\Local\\atom\\app-1.24.0\\resources\\app\\apm\\bin\\node.exe" "C:\\Users\\SUI\\AppData\\Local\\atom\\app-1.24.0\\resources\\app\\apm\\node_modules\\node-gyp\\bin\\node-gyp.js" "install" "--runtime=electron" "--target=1.6.16" "--dist-url=https://atom.io/download/electron" "--arch=x64" "--ensure"
gyp ERR! cwd C:\Users\SUI\.atom
gyp ERR! node -v v6.9.5
gyp ERR! node-gyp -v v3.4.0
gyp ERR! not ok

Compiler tools not found
Packages that depend on modules that contain C/C++ code will fail to install.
Read here for instructions on installing Python and Visual Studio.
Run apm install --check after installing to test compiling a native module.

0%