用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