emacs React/JSX 开发配置
> 开始一些简单的配置,不需要的可以跳过 # helm ## helm ### 安装 如果自己配置了管理插件的管理器可以在你的配置文件中安装,不在赘述 ### 简单的配置 上面将helm命令替换emacs自带的`M-x` `C-x C-f` `C-x b` `C-x C-b` ```lisp 这几个命令让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"))) (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" (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 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |