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

Question

我最近开始使用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

Answer 1

我决定编写本教程来深入设置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功能!

取自我的博文.