emacs React/JSX 开发配置

> 开始一些简单的配置，不须要的能够跳过

# helm
helm 的配置是最基础的加强emacs插件之一，pretty nice的界面以及Lazy match

## helm

### 安装
`M-x package-install RET helm` 

若是本身配置了管理插件的管理器能够在你的配置文件中安装，不在赘述

### 简单的配置
在你的配置文件中保存下面的配置，例如 `~/.emacs/init.el`
```lisp
(global-set-key (kbd "M-x") 'helm-M-x)        
(global-set-key (kbd "C-x b") 'helm-buffers-list)                                      
(global-set-key (kbd "C-x C-b") 'helm-buffers-list)                                    
(global-set-key (kbd "C-x C-f") 'helm-find-files)
```

上面将helm命令替换emacs自带的`M-x` `C-x C-f` `C-x b` `C-x C-b` 

```lisp
(define-key helm-map (kbd "<tab>") 'helm-execute-persistent-action)    
(define-key helm-map (kbd "C-i") 'helm-execute-persistent-action)        
(define-key helm-map (kbd "C-z") 'helm-select-action)
```

这几个命令让helm更适合咱们的操做，例如查找文件时直接tab进行文件名、路径补齐。

预览图:

 

 

## YouCompleteMe

youcompleteme不管在emacs仍是vim下都是一个重量级的插件，提供了自动补齐的后端框架，能够支持c#,js,c++,go 等语言的自动补齐操做，不过会占用cpu较高补齐时略卡。YouCompleteMe的server程序为`ycmd`,前端插件对应emacs和vim分别有相应的YouCompleteMe完成

为了写React咱们须要js的自动补齐功能.

### 安装

首先youcompleteme 的js自动完成是使用`tern`来完成的

` npm install tern -g`

安装YouCompleteMe

`git clone https://github.com/Valloric/ycmd` ~/ycmd/

而后进行编译

```

cd ~/ycmd/

./build.py --tern-completer 

```

server程序编译好后咱们安装对应的emacs前端插件,

`M-x package-install RET ycmd`

`M-x package-install RET company-ycmd`

`M-x package-install RET company`

具体就是emacs的ycmd前端又使用了company的框架（好复杂，理不清）因此须要安装的包company

 

接着开始写emacs的配置

```

(set-variable 'ycmd-server-command '("/usr/local/bin/python" (expand-file-name "~/ycmd/ycmd")))
(setq company-tooltip-limit 10)
(setq company-idle-delay 0.5)
(setq company-echo-delay 0)
(setq company-begin-commands '(self-insert-command))
(setq company-require-match nil)

(company-ycmd-setup)

(add-hook 'after-init-hook 'global-company-mode)

```

这里第一句配置了ycmd的执行文件路径，若是配置失败将没法使用ycmd

而后从新load配置文件使配置生效，

截图以下:

 

## React-Mode

 下面开始写咱们专属的react-mode 让其可以更好地缩进代码，支持Ycmd，代码高亮等功能

### 安装

由于使用web-mode做为咱们的基本缩进方案，因此须要安装web-mode

`M-x package-install RET web-mode`

 

###配置

```

(define-derived-mode react-mode web-mode "React-IDE"
 "Major mode for eding jsx code.")
(add-hook 'react-mode-hook 'ycmd-mode)
(add-hook 'react-mode-hook
          '(lambda
             ()
             (web-mode-set-content-type "jsx")
             (message "set web-mode-content-type %s" web-mode-content-type))

 

(add-to-list 'ycmd-file-type-map '(react-mode . ("javascript")))

(add-to-list 'auto-mode-alist '("\\.jsx$" . react-mode))

```

上面这几行就是咱们的react-mode配置，解释一下：首先react-mode继承了web-mode使用其做为咱们的代码风格标准，而后最下面咱们又将`react-mode`告诉`ycmd`将做为`javascript`来进行代码的自动完成

最后再添加咱们的文件钩子给`jsx`文件

 

截图以下:

上图主要演示了jsx写代码的时候的排版、自动缩进文字，web-mode对jsx的处理已经很理想了，在DOM区域直接选中代码一个tab自动排版成上图的风格，还有标签高亮，标签列高亮等功能等着咱们配置。

 

## magit

 若是提交、暂存咱们的代码而不离开emacs？ 方案有几种可选，没有一一使用，就用了口碑较好的一插件：`magit`，magit直接安装就能用几乎无用配置，除了本身根据喜爱绑定快捷键

 

### 安装

`M-x package-install RET magit`

### 使用

能够直接在交互模式下使用magit，不过将常规的操做绑定快捷键更好一些。

例如我执行`magit-status`将打开一个窗口显示当前目录的状态

在此若是有多个文件我能够将光标移动一行而后按`s`键将其暂存，(git add somefile) 

操做后能够`c c`进行提交,提交时`magit`会自动打开diff窗口让你看`git diff`的输出,例如

 

也就是git的一切操做均可以在emacs完成，magit也让git使用更加便捷。

一样若是安装了`powerline`或者`airline`以后能够在emacs底部的bar上显示当前分区，对于频频切换分区的咱们而言也是至关方便。

 

 

 

prop:  https://github.com/Qquanwei/emacs