另外,我想用我的.jsx文件启用es-linting,snippets.我在我的系统中安装了以下软件包
npm install -g eslint npm install -g babel-eslint npm install -g eslint-plugin-react
我还安装了Bundle’mxw / vim-jsx’来支持vim中的jsx.
let g:syntastic_javascript_checkers = ['eslint'] let g:jsx_ext_required = 0
编辑
找到这个反应片段的vim插件：
Vim-react-snippets
语法突出显示
要在vim中使用高亮度的jsx语法,请使用mxw’s Vim JSX插件.
安装mxw / vim-jsx插件的步骤
如果你使用Vundle,
在.vimrc中添加以下行：
Plugin 'mxw/vim-jsx' Plugin 'pangloss/vim-javascript'
这个插件取决于pangloss/vim-javascript,所以你也需要安装它.
要从vim中安装,请使用以下命令.
:so ~/.vimrc
:PluginInstall
如果你使用病原体
cd ~/.vim/bundle git clone https://github.com/mxw/vim-jsx.git
在javascript文件中启用JSX语法Highlighing
在.vimrc中添加以下行：
let g:jsx_ext_required = 0
在vim中启用eslint
您需要安装以下帮助程序npm程序包以及最新的eslint(在编写本文时使用2.11.1).
还要确保在系统中安装了node.js版本4或更高版本.
babel-eslint – 支持ES6 linting
eslint-plugin-react – 为ESLint实现特定的linting规则
例如,防止在componentDidMount中使用setState
npm install --save-dev eslint npm install --save-dev babel-eslint npm install --save-dev eslint-plugin-react
我决定使用AirBnB使用的常用做法和惯例,所以我也安装了以下软件包.但你不需要它们
如果您不想使用AirBnB eslint预设.
npm install --save-dev eslint-config-airbnb npm install --save-dev eslint-plugin-import npm install --save-dev eslint-plugin-jsx-a11y
在项目的根目录中创建配置文件.eslintrc.json：
(您可以使用eslint以反应方式生成eslint配置文件)
eslint --init
(如果您选择任何预设,请确保您还为该lint预设安装了所需的包)
我扩展了“airbnb”但是超出了我项目的一些规则.您可以使用
“extend”：“eslint：recommended”以启用eslint推荐的一些常见lint规则
这是我的.eslintrc.json文件
{
"extends" : "airbnb","parser" : "babel-eslint","parserOptions" : {
"ecmaVersion" : 6,"sourceType" : "module","ecmaFeatures" : {
"jsx":true
}
},"env": {
"browser" : true,"node" : true,"jquery" : true
},"settings":{
"react":{
"pragma":"React","version":"15.1.0"
},"ecmascript":6,"jsx":true
},"plugins": [
"react"
],"rules": {
"strict": 0,"quotes": 0,"no-unused-vars": 1,"camelcase": 1,"no-underscore-dangle": 1,"comma-dangle":[1,"never"],"indent":["error",4],"react/jsx-indent":0,"react/jsx-equals-spacing": [2,"always"],"no-console":0,"max-len":1,"no-param-reassign":1,"key-spacing": [
2,{
"align": "colon","beforeColon": true,"afterColon": true
}
],"no-multi-spaces": [
2,{
"exceptions":{
"VariableDeclarator":true,"ImportDeclaration":true,"JSXAttribute":true,"AssignmentExpression":true
}
}
]
}
}
现在在ES中将ESLint与Syntastic Plugin集成
我决定使用Syntastic with vim进行语法错误检查.
let g:syntastic_javascript_checkers = ['eslint']
所有设置但仍然有一个问题仍然与Syntastic.
Syntastic搜索全局node_modules而不是本地项目.
一个解决方案是安装所有包装eslint,babel-eslint等全球,这肯定不是一个好习惯.
另一个解决方案是
在package.json中定义npm脚本
"eslint": "eslint -c .eslintrc.json"
它将在当前路径中添加所有本地安装的npm软件包,以便它们可供执行.
let g:syntastic_javascript_eslint_exe = 'npm run eslint --'
这里我们从vim通过npm脚本调用linting.
替代方案：使用Plug’mtscout6 / syntastic-local-eslint.vim’插件
在打开文件进行编辑时,将以下行添加到.vimrc以显示当前lint错误(如果有的话)
let g:syntastic_always_populate_loc_list = 1 let g:syntastic_auto_loc_list = 1 let g:syntastic_check_on_open = 1 let g:syntastic_check_on_wq = 0
Snipptes和自动完成
片段引擎有不同的分支,允许用户通过键入命中扩展映射的片段名称来插入片段.
> github.com/SirVer/ultisnips：
python,支持此repo中的所有代码段.
> github.com/garbas/vim-snipmate：
VimL,snipmate-snippets,引擎有时表现得很奇怪.支持片段/ *
> github.com/Shougo/neosnippet：
VimL,支持一些配置的片段/ *.
> github.com/drmingdrmer/xptemplate：完全不同的语法,不读取此文件中包含的片段,但它也非常强大.
我更喜欢neosnippet.将其安装在vim中,以启用具有neocomplete的片段以进行自动完成.
Neocomplete是一个惊人的自动完成插件,增加了对代码段的支持.它可以从字典,缓冲区,omnicomplete和片段中同时完成.这是一个真正的插件,它使Vim自动完成与最好的编辑器相提并论.
请参阅安装说明here for neocomplete
Bundle 'justinj/vim-react-snippets'
如果所有设置都正确完成,那么你已经为vim启用了eslinting,自动完成,针对React的JSX语法高亮显示,以及ES6功能！
取自我的blog帖子.
