Atom插件和JSX 语法Emmet

JSX Emmet 支持

  1. 安装 react 插件, 可以直接在插件管理中安装, 也可以通过下列命令安装:

    apm install react

  2. File - keymap...中添加如下规则:


    'atom-text-editor[data-grammar="source js jsx"]:not([mini])':
      'tab': 'emmet:expand-abbreviation-with-tab'

添加完之后,keymap.cson 文件为:

".platform-win32 atom-text-editor:not([mini])":
  "shift-ctrl-K": "markdown-writer:insert-link"
  "shift-ctrl-I": "markdown-writer:insert-image"
  "ctrl-i":       "markdown-writer:toggle-italic-text"
  "ctrl-b":       "markdown-writer:toggle-bold-text"
  "ctrl-'":       "markdown-writer:toggle-code-text"
  'ctrl-`':       "markdown-writer:toggle-codeblock-text"
  "ctrl-h":       "markdown-writer:toggle-strikethrough-text"
  "ctrl-1":       "markdown-writer:toggle-h1"
  "ctrl-2":       "markdown-writer:toggle-h2"
  "ctrl-3":       "markdown-writer:toggle-h3"
  "ctrl-4":       "markdown-writer:toggle-h4"
  "ctrl-5":       "markdown-writer:toggle-h5"

'atom-text-editor[data-grammar="source js jsx"]:not([mini])':
  'tab': 'emmet:expand-abbreviation-with-tab'  

安装完之后:

div.app
// 会自动的补充为:
<div className="app"></div>

atom安装包

  1. atom-live-server: 自动刷新
  2. atom-ternjs: 智能补全代码
  3. docblockr: 文档注释工具
  4. emmet: 不用说
  5. highlight-selected: 标配,选中词汇高亮
  6. markdown-preview-plus & markdown-scroll-sync: markdown 同步语法
  7. platformio-ide-terminal: terminal工具,方便使用命令行
  8. react:支持JSX语法
  9. language-babel: 支持ES6语法
  10. color-picker: 颜色选择器
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容