命令面板
当你按下 cmd-shift-P
并且当前焦点在一个窗格上的时候,命令面板就会弹出来。
在这个教程中我们会用类似 cmd-shift-P
的形式来运行命令,这是 Atom 在 Mac 上的默认快捷键,如果你在其他的平台上使用 Atom,可能会稍有不同。如果某个快捷键无法工作,你可以通过命令面板来查找正确的快捷键。
在 Atom 中几乎所有的操作都通过这种搜索驱动的菜单来完成,你只需要按下 cmd-shift-P
来搜索命令,而不必在复杂的传统菜单栏间点来点去。
下载和安装
https://atom.io/
左侧目录树的修改
在 settings 中选择 open config folder,然后修改 style.less 文件,比如:
.tree-view { font-size: 16px; }
插件
本文核心思想就是下边陈列的各个插件包。
不知道如何查找和安装插件?可以参考官方文档。
tool-bar & tool-bar-main
这两个小插件可以让你的编辑器上方出现一行快捷操作小按钮,绝对是贴心服务。还可以设置大小和位置,如果不想出现在上方,出现在左侧下侧都可以,随你定制。
file-icons
丰富文件的 icon 前缀,绝对是赏心悦目的感受。
markdown-preview
可以在 Atom 编辑器中直接预览 markdown 文件。
autocomplete-paths
自动提示路径和文件名,很方便使用
docblockr
可以产出标准化的代码注释格式,效果:
emmet
支持 zen coding 的方式进行快捷代码书写,相信我,这绝对是个编码的享受。
minimap
让编辑器右侧出现 minimap,方便快速查看内容,小巧性感。
知道这个是干什么的么,有了这个插件,你可以直接在 Atom 中非常方便的呼出 terminal 终端,不用来回切换,在 Atom 中编码调试,一站式搞定,一个字:就是爽的飞起。
react
tree-view-copy-relative-path
tree-view-git-status
tree-view-open-files
tree-view-search-bar
autocomplete-js-import
Autocomplete+ provider for JS import statements
Autocompletes ES6 or CommonJS (node) style import statements with relative file matching,full project fuzzy file matching or packages found in package.json
.
By default,plugin will only allow autocompletion in the form of relative paths:
Jumpy
How to jump
- Hit
shift
+ enter
- Choose from your presented labels:
- Enter two characters.
- Keep coding!
git-blame
git-plus
git-time-machine
tree-view-git-status
goto-definition
Usage: cursor click onto and alt
+cmd
+enter
atom-ternjs (x)
linter-eslint
An global or local installed eslint
tool is required.
$ npm i -g eslint [eslint-plugins]
Activate Use Global Eslint
package option
(Optional) Set Global Node Path
with $ npm config get prefix
activate-power-mode
视觉冲击力很强的!
ctrl
+alt
+o
editor-background
Background image/animation changer.
atom-beautify
react-snippets
git-history
Programming Language
==language-javascript-jsx==
==open-this==
Javascript,ES6,ES7,React JSX,Flow,etc… by SubtleGradient of Facebook
atom-jade
Stylus
SOME OTHERS
- atom-material-ui 好看到爆
主题
- atom-material-syntax
美化
* atom-beautify 一键代码美化
* file-icons 给文件加上好看的图标
* atom-minimap 方便美观的缩略滚动图
git
* atomatigit 可视化git操作
代码提示
* emmet 这个不用介绍了吧
* atom-ternjs js代码提示很强大,高度定制化
* docblockr jsdoc 给js添加注释
* autoclose-html 闭合html标签
* color-picker 取色器 必备插件
* pigments 颜色显示插件 必装
* terminal-panel 直接在atom里面写命令了
* svg-preview svg预览
便捷操作
* ==advanced-open-file== 快速打开、切换文件
* symbols-view 符号跳转
- linter 必备;代码校验工具
- esformatter 必备;统一代码格式
- atom-beautify 必备;格式化代码的,快捷键ctrl-alt-b
- minimap 推荐;就是Sublime右边那一竖块,显示缩小版的代码
- color-picker 推荐;写CSS时非常方便的调色板
- autocomplete-paths 填写路径的时候有Sug提示
- vim-mode 劳资就是喜欢zuo,所以在Atom上用vim写码:)
- docblockr 方便写注释
- emmet 必备;前端开发必备,谁用谁知道,入门地址:Emmet使用手册
- terminal-panel 不是那么好用的CLI,勉强能凑活
- git-plus Git插件;得先配置邮箱和用户名
- javascript-snippets 推荐;各种缩写,值得拥有;当然,俺用的最多的是cl命令:)
- file-icons 推荐:让文件前面有彩色图片,看着非常享受(如果使用着 seti-ui 主题,则体现不了效果哦)
Theme
atom-material-ui
atom-material-syntax
FAQ
Fuzzy Search Reindexing Issue
This happends because node_modules
sub folders contain with dead linked files. Just ignore the folders within node_modules
can help.
By update atom config file: config.cson
"fuzzy-finder":
ignoredNames: [
"**/node_modules/*"
]