如何在 vim 中将 react jsx 添加为 javascript 文件类型并启用 eslinting、自动完成？

Question

我最近开始使用 vim.I 想将扩展名为 .jsx 的文件设置为 .js java 脚本文件 Vim。我还想启用 es-linting，我的 .jsx 文件的片段。我在我的系统中安装了以下软件包

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

Answer 1

您安装的那个插件已经 sets .jsx 文件的文件类型为 javascript.jsx 因此这些文件应该被视为它们的文件类型是 javascript plus 该插件提供的任何 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!

Answer 2

我决定写这个教程来设置 vim 以深入 React 开发，这样初学者会发现这个有用的时候他们以 vim 开头并做出反应。

语法高亮

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

在您的 .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 的 React 特定 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 插件我决定将 Syntastic 与 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 --'

这里我们通过 npm 脚本从 vim.

调用 linting

备选方案： 使用插件 'mtscout6/syntastic-local-eslint.vim' 插件

打开文件时在 vim 中出现错误 window -

将以下行添加到您的 .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，snippate-snippets，引擎有时会表现得很奇怪。支持片段/*
github.com/Shougo/neosnippet: VimL，通过一些配置支持片段/*。
github.com/drmingdrmer/xptemplate:完全不同的语法，不读这个文件中的片段，但也很强大。

我更喜欢 neosnippet。将其安装在您的 vim 中，以使用 neocomplete 自动完成代码片段。

Neocomplete 是一个了不起的自动完成插件，额外支持代码片段。它可以从字典、缓冲区、omnicomplete 和片段中模拟完成。这是一个真正的插件，Vim 自动完成与最好的编辑器相媲美。

请参阅安装说明 here for neocomplete

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

Bundle 'justinj/vim-react-snippets'

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

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

摘自我的 blog post.

如何在 vim 中将 react jsx 添加为 javascript 文件类型并启用 eslinting、自动完成？

how to add react jsx as javascript file type in vim and enable eslinting, auto completions?

javascript

vim

reactjs

react-jsx

eslint