用vim开发react native的环境搭建

续费博客域名的时候发现，一晃竟然两年没更新了……只能说时间过的真是好快。前几天把博客切换到了hexo，因为octopress的构建速度实在是已经不能支持继续写更多的博客了。

最近有时间就会去研究下react native，打算接下来写一系列react native相关的文章。

写react编辑器自然还是用我最喜欢的vim，可以配置下语法高亮，语法检查和代码片段自动生成。

###代码高亮
react特有的jsx使得必然需要特定的一个代码高亮插件，推荐vim-jsx。不说支持的多么好吧，基本够用了。效果如图：

在Bundle配置中添加：

1
Bundle 'mxw/vim-jsx'

在vimrc中增加配置：

1
let g:jsx_ext_required = 0

从而使该插件在.js文件中也生效。

语法检查

之前写的最后一篇介绍vim插件的博客正好介绍的就是syntastic这个语法检查神器。
react的语法检查配合syntastic使用ESLint来完成。
分别安装eslint, babel-eslint (ES6支持)以及eslint-plugin-react:

1
2
3
npm install -g eslint
npm install -g babel-eslint
npm install -g eslint-plugin-react

安装完成后在根目录下新建~/.eslintrc：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{
    "parser": "babel-eslint",
    "env": {
        "browser": true,
        "node": true
    },
    "settings": {
        "ecmascript": 6,
        "jsx": true
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "strict": 0,
        "quotes": 0,
        "no-unused-vars": 0,
        "camelcase": 0,
        "no-underscore-dangle": 0
    }
}

最后，设置Syntastic使用eslint：

1
let g:syntastic_javascript_checkers = ['eslint']

具体的规则支持可以去eslint-plugin-react查看。
效果如图：

###代码片段自动生成
之前介绍插件的博客有一个强大的插件还没介绍，那就是ultisnips，用来完成自动的代码片段生成，用好的话还是能大幅提高编码速度的。用该插件结合不同语言的代码片段，就可以实现特定语言的代码自动生成了。

react当然需要react特定的snippets,推荐vim-react-snippets

同时安装vim-react-snippets和Ultisnips：

1
2
3
4
5
6
7
8
" vim-react-snippets:
Bundle "justinj/vim-react-snippets"
" Ultisnips
Bundle "SirVer/ultisnips"
" Other sets of snippets (optional):
Bundle "honza/vim-snippets"

最后的honza/vim-snippets里面包含了大量各种语言的代码片段,可以一并安装。
效果如图，输入cdm，即可：

vim-react-snippets中的所有代码片段快捷键可以在插件目录下的snippets/javascript.snippets中查看。

Share Comments