atom + react.js

命令面板

当你按下 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

可以产出标准化的代码注释格式，效果：

/** * [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
• 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/*"    ]