如何在 Vim 中添加 React 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

我决定编写本教程来深入设置 React 开发的 vim，以便初学者在开始使用 vim 和 react 时发现这很有用。

语法突出显示

要使 jsx 语法高亮在 vim 中看起来正确，请使用 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 语法突出显示

在 .vimrc ：

let g:jsx_ext_required = 0 

在 vim 中启用 eslint

您需要安装以下辅助程序 npm 包以及最新的 eslint(在撰写本文时使用 2.11.1(。还要确保系统中安装了 node.js版本 4 或更高版本。

babel-eslint - 支持 ES6 棉绒

eslint-plugin-react - React 针对 ESLint 的特定 linting 规则例如，防止在组件中使用 setState DidMount

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 以 intreactive 方式生成 eslint 配置文件(

eslint --init

(如果您选择了任何预设，请确保还为该 lint 预设安装所需的软件包(

我扩展了"Airbnb"，但覆盖了我项目的一些规则。您可以使用 "extends"： "eslint：推荐" 以启用 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 插件集成我决定将 Syntastic 与 vim 一起使用来进行语法错误检查。

let g:syntastic_javascript_checkers = ['eslint']

一切就绪，但 Syntastic 仍然存在一个问题。Syntastic 搜索全局node_modules而不是本地项目。

一种解决方案是在全球范围内安装所有软件包eslint，babel-eslint等，这绝对不是一个好的做法。

另一个解决方案是

在包中定义一个 npm 脚本.json

"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

截图和自动完成

代码段

引擎有不同的分支，允许用户通过键入点击扩展映射的代码段的名称来插入代码段。

• github.com/SirVer/ultisnips：python，支持此存储库中的所有代码段。
• github.com/garbas/vim-snipmate：VimL，剪裁片段，引擎有时表现得很奇怪。支持片段/*
• github.com/Shougo/neosnippet：VimL，支持具有某些配置的片段/*。
• github.com/drmingdrmer/xptemplate：完全不同的语法，不读取此文件中包含的片段，但它也非常强大。

我更喜欢新片段。将其安装在您的 vim 中，以启用带有 neocomplete 的片段以进行自动完成。

Neocomplete是一个了不起的自动完成插件，对片段有额外的支持。它可以从字典、缓冲区、全能和片段中模拟完成。这是一个真正的插件，它使 Vim 自动完成与最好的编辑器相提并论。

请参阅此处的安装说明以了解新完整

安装

上述插件后，您需要再安装一个插件以启用 react 特定的代码段

Bundle 'justinj/vim-react-snippets'

请参阅此处有关该插件的安装说明。

如果所有设置都正确完成，您已经启用了 vim 与 eslinting、自动完成、JSX 语法高亮显示 React，以及 ES6 功能！

取自我的博客文章。

您安装的插件已经将.jsx文件的文件类型设置为javascript.jsx因此这些文件应被视为其文件类型javascript加上该插件提供的任何jsx相关功能。

我不知道如何为 jsx 设置 Syntastic，但您可以在不安装如此巨大的插件的情况下获得 linting。为此，您需要添加以下行以after/ftplugin/jsx.vim告诉 Vim 在写入后自动运行eslint：

" see :help 'errorformat'
setlocal errorformat=%E%f:' line' %l'',' col' %c'',' Error' -' %m,%-G%.%#,%W%f:' line' %l'',' col' %c'',' Warning' -' %m,%-G%.%#
" see :help 'makeprg' and $ eslint --help
setlocal makeprg=eslint' -f' compact
" run :make % on write
autocmd! BufWritePost <buffer> silent make % | silent redraw!