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