我最近开始使用vim.我想设置具有.jsx扩展名的.js 文件,在Vim中被视为java脚本文件.另外,我想用我的.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.
还在我的.vimrc文件中添加了以下行
let g:syntastic_javascript_checkers = ['eslint'] let g:jsx_ext_required = 0
编辑 找到这个反应片段的vim插件: Vim-react-snippets
我决定编写本教程来深入设置vim以进行React开发,以便初学者在从vim开始并做出反应时发现它很有用.
语法突出显示
要在vim中使用高亮度的jsx语法,请使用 mxw的Vim JSX插件.
安装mxw/vim-jsx插件的步骤
如果你使用Vundle,
在您的.vimrc:中添加以下行:
Plugin 'mxw/vim-jsx' Plugin 'pangloss/vim-javascript'
这个插件取决于pangloss/vim-javascript,所以你也需要安装它.
要从vim中安装,请使用以下命令.
:so ~/.vimrc
要获取更改的.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"但是超出了我项目的一些规则.您可以使用 "extends":"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
}
}
]
}
}
现在在Vim中将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软件包,以便它们可供执行.
并在您的.vimrc文件中添加
let g:syntastic_javascript_eslint_exe = 'npm run eslint --'
这里我们从vim通过npm脚本调用linting.
替代方案:使用Plug'mtscout6/syntastic-local-eslint.vim'插件
打开文件时在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自动完成与最好的编辑器相提并论.
有关neocomplete,请参阅此处的安装说明
安装上面的插件后,您需要再安装一个插件来启用特定的反应片段
Bundle 'justinj/vim-react-snippets'
请参阅此插件的安装说明.
如果所有设置都正确完成,那么你已经为vim启用了eslinting,自动完成,针对React的JSX语法高亮显示,以及ES6功能!
取自我的博文.
京公网安备 11010802040832号 | 京ICP备19059560号-6 