命令面板
当你按下 cmd-shift-P
并且当前焦点在一个窗格上的时候,命令面板就会弹出来。
在这个教程中我们会用类似 cmd-shift-P
的形式来运行命令,这是 Atom 在 Mac 上的默认快捷键,如果你在其他的平台上使用 Atom,可能会稍有不同。如果某个快捷键无法工作,你可以通过命令面板来查找正确的快捷键。
在 Atom 中几乎所有的操作都通过这种搜索驱动的菜单来完成,你只需要按下 cmd-shift-P
来搜索命令,而不必在复杂的传统菜单栏间点来点去。
下载和安装
左侧目录树的修改
在 settings 中选择 open config folder,然后修改 style.less 文件,比如:
.tree-view { @H_403_28@font-size: 16px; }
插件
本文核心思想就是下边陈列的各个插件包。
tool-bar & tool-bar-main
这两个小插件可以让你的编辑器上方出现一行快捷操作小按钮,绝对是贴心服务。还可以设置大小和位置,如果不想出现在上方,出现在左侧下侧都可以,随你定制。
file-icons
丰富文件的 icon 前缀,绝对是赏心悦目的感受。
markdown-preview
可以在 Atom 编辑器中直接预览 markdown 文件。
autocomplete-paths
docblockr
/** * [main description] * @return {[type]} [description] */
emmet
支持 zen coding 的方式进行快捷代码书写,相信我,这绝对是个编码的享受。
minimap
让编辑器右侧出现 minimap,方便快速查看内容,小巧性感。
platformio-ide-terminal
知道这个是干什么的么,有了这个插件,你可以直接在 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
@H_404_117@ - Choose from your presented labels:@H_404_117@
- Enter two characters.@H_404_117@
- Keep coding!@H_404_117@
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-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 必备;代码校验工具@H_404_117@
- esformatter 必备;统一代码格式@H_404_117@
- atom-beautify 必备;格式化代码的,快捷键ctrl-alt-b@H_404_117@
- minimap 推荐;就是Sublime右边那一竖块,显示缩小版的代码@H_404_117@
- color-picker 推荐;写CSS时非常方便的调色板@H_404_117@
- autocomplete-paths 填写路径的时候有Sug提示@H_404_117@
- vim-mode 劳资就是喜欢zuo,所以在Atom上用vim写码:)@H_404_117@
- docblockr 方便写注释@H_404_117@
- emmet 必备;前端开发必备,谁用谁知道,入门地址:Emmet使用手册@H_404_117@
- terminal-panel 不是那么好用的CLI,勉强能凑活@H_404_117@
- git-plus Git插件;得先配置邮箱和用户名@H_404_117@
- javascript-snippets 推荐;各种缩写,值得拥有;当然,俺用的最多的是cl命令:)@H_404_117@
- file-icons 推荐:让文件前面有彩色图片,看着非常享受(如果使用着 seti-ui 主题,则体现不了效果哦)@H_404_117@
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/*"
]