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上顯示當前分區，對於頻頻切換分區的我們而言也是相當方便。

文章來源：