vim-jsx


Ⅰ. 插件描述

React JSX syntax highlighting and indenting for vim.

Ⅱ. 基本信息

创建日期:  2013-10-06
使用用户:  6655
Github星:  1528
插件作者:  Max Wang

Ⅲ. 安装方法

使用Vundle管理器安装

在你的.vimrc下添加:
Plugin 'mxw/vim-jsx'
… 然后在Vim中运行以下命令:
:source %
:PluginInstall

对于Vundle版本 < 0.10.2,请用上面的Bundle替换Plugin。

使用NeoBundle管理器安装

在你的.vimrc下添加:
NeoBundle 'mxw/vim-jsx'
… 然后在Vim中运行以下命令:
:source %
:NeoBundleInstall

使用VimPlug管理器安装

在你的.vimrc下添加:
Plug 'mxw/vim-jsx'
… 然后在Vim中运行以下命令:
:source %
:PlugInstall

使用Pathogen管理器安装

在终端中运行以下命令:
cd ~/.vim/bundle
git clone https://github.com/mxw/vim-jsx

Ⅳ. 文档说明

vim-jsx

IMPORTANT: This package is deprecated! It apparently broke following
changes to the pangloss/vim-javascript JavaScript syntax package circa
early 2019. As someone who has (perhaps surprisingly) never written a single
line of JSX or React code except to test this package, I don't closely track
breaking changes like these, hence the (lamentable) inactivity in this repo.

Fortunately, the community seems to have settled on
MaxMEllon/vim-jsx-pretty as the syntax package of choice for up-to-date
JSX support. If you're not writing exclusively pre-2019 JavaScript with
pre-2019 tooling, consider switching over to that package.

Thanks for following along here, and I hope this package was useful to folks in
the years since React first debuted.

If things change and this package becomes actively maintained again, I'll be
sure to update this note.

Introduction

Syntax highlighting and indenting for JSX. JSX is a JavaScript syntax
transformer which translates inline XML document fragments into JavaScript

  1. It was developed by Facebook alongside React.

vim-jsx is not a JavaScript syntax package, so in order to use it, you will
also need to choose a base JS highlighter. pangloss/vim-javascript is the
recommended package---it is vim-jsx's "official" dependency, and the only
package against which it is regularly tested. However, vim-jsx makes a best
effort to support other JavaScript syntax packages, including:

  • pangloss/vim-javascript
  • jelera/vim-javascript-syntax
  • othree/yajs

Notably, the system vim JavaScript syntax is not supported, due to its
over-simplicity. However, the system XML syntax package is an implicit
dependency.

Vim support for inline XML in JS is remarkably similar to the same for PHP,
which you can find here.

Troubleshooting

If you're experiencing incorrect highlighting or indenting in your JSX code,
please file a GitHub issue which includes the following:

  • A brief affirmation that you've read the README and have installed one of the
    supported dependencies (and the name of the one you're using).
  • A minimal ~/.vimrc which repros the issue you're having, as well as both a
    paste and a screenshot of the issue (a paste alone is insufficient, since it

doesn't illustrate the specific highlighting or indenting problem). To
obtain a minimal ~/.vimrc, simply bisect your ~/.vimrc by adding finish at
various points in the file. (You can likewise bisect your included plugins
by selectively including only half of them, then a quarter, etc.).

Most of the issues filed result from failures to install vim-javascript or
conflicts with existing JS syntax or indent files---so failing to indicate that
you've ruled those issues out may result in your issue being closed with
minimal comment.

(Please feel free to disregard all this for feature requests.)

Usage

By default, JSX syntax highlighting and indenting will be enabled for
files with the .js and .jsx extension. If you would like JSX only in .jsx files, add

let g:jsx_ext_required = 1

to your .vimrc or somewhere in your include path. If you wish to restrict JSX
to files with the pre-v0.12 @jsx React.DOM pragma, add

let g:jsx_pragma_required = 1

to your .vimrc or somewhere in your include path.

Frequently Asked Questions

  • How come syntax highlighting doesn't work at all?

This is the only question I'll answer with another question---Which do you
think is more likely: (a) this package fails completely and utterly in serving
its most fundamental purpose, or (b) user error?

  • Why are my end tags colored differently than my start tags?

vim-jsx is basically the glue that holds JavaScript and XML syntax packages
together in blissful harmony. This means that any XML syntax defaults carry
over to the XML portions of vim, and it's common for many colorschemes to
highlight start and end tags differently due to the system XML syntax defaults.

  • _Syntax highlighting seems to work, but breaks highlighting and indenting
    further down in the file. What's wrong?_

This often results from trying to enable XML folding in one's ~/.vimrc (i.e.,
via let g:xml_syntax_folding = 1). vim-jsx does not support syntax folding,
and is not tested with either JavaScript or XML folding enabled.

Installation

Pathogen

The recommended installation method is via Pathogen. Then simply execute

git clone https://github.com/mxw/vim-jsx.git ~/.vim/bundle/vim-jsx

(You can install vim-javascript in an analogous manner.)

Vundle

You can also add vim-jsx using Vundle---just add the following lines to
your ~/.vimrc:

Plugin 'pangloss/vim-javascript'
Plugin 'mxw/vim-jsx'

To install from within vim, use the commands below.

:so ~/.vimrc
:PluginInstall

Alternatively, use the command below to install the plugins from the command
line.

vim +PluginInstall +qall

Manual Installation

If you have no ~/.vim/after directory, you can download the tarball or zip
and copy the contents to ~/.vim.

If you have existing ~/.vim/after files, copy the syntax and indent files
directly into their respective destinations. If you have existing after syntax
or indent files for Javascript, you'll probably want to do something like

mkdir -p ~/.vim/after/syntax/javascript
cp path/to/vim-jsx/after/syntax/jsx.vim ~/.vim/after/syntax/javascript/jsx.vim
mkdir -p ~/.vim/after/indent/javascript
cp path/to/vim-jsx/after/indent/jsx.vim ~/.vim/after/indent/javascript/jsx.vim

添加新评论