如何在vim中添加反应jsx作为javascript文件类型并启用eslinting,

npm install -g eslint
npm install -g babel-eslint
npm install -g eslint-plugin-react

let g:syntastic_javascript_checkers = ['eslint']
let g:jsx_ext_required = 0

我决定编写本教程来深入设置vim以进行React开发,以便初学者在从vim开始并做出反应时发现它很有用.

语法突出显示

要在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

要获取更改的.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软件包,以便它们可供执行.

并在你的.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自动完成与最好的编辑器相提并论.

请参阅安装说明here for neocomplete

安装上面的插件后,您需要再安装一个插件来启用特定的反应片段

Bundle 'justinj/vim-react-snippets'

请参阅该插件的安装说明here.

如果所有设置都正确完成,那么你已经为vim启用了eslinting,自动完成,针对React的JSX语法高亮显示,以及ES6功能！

取自我的blog帖子.