1
0
mirror of https://github.com/amix/vimrc synced 2025-07-04 15:04:59 +08:00

add vim-jsx, vim-javascript

This commit is contained in:
Chris Hu
2016-08-18 08:41:38 +08:00
committed by Huaishun Hu
parent 35f23c0128
commit db2bf731a3
15 changed files with 1209 additions and 0 deletions

View File

@ -0,0 +1,138 @@
vim-jsx
=======
Syntax highlighting and indenting for JSX. JSX is a JavaScript syntax
transformer which translates inline XML document fragments into JavaScript
objects. It was developed by Facebook alongside [React][1].
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][2] 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][3].
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 only for
files with the `.jsx` extension. If you would like JSX in `.js` files, add
```viml
let g:jsx_ext_required = 0
```
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
```viml
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][4]. Then simply execute
cd ~/.vim/bundle
git clone https://github.com/mxw/vim-jsx.git
(You can install [vim-javascript][2] in an analogous manner.)
### Vundle
You can also add vim-jsx using [Vundle][5]---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
[1]: http://facebook.github.io/react/ "React"
[2]: https://github.com/pangloss/vim-javascript "pangloss: vim-javascript"
[3]: https://github.com/mxw/vim-xhp "mxw: vim-xhp"
[4]: https://github.com/tpope/vim-pathogen "tpope: vim-pathogen"
[5]: https://github.com/VundleVim/Vundle "VundleVim: Vundle"

View File

@ -0,0 +1,16 @@
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
" Vim ftplugin file
"
" Language: JSX (JavaScript)
" Maintainer: Max Wang <mxawng@gmail.com>
"
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
" modified from html.vim
if exists("loaded_matchit")
let b:match_ignorecase = 0
let b:match_words = '(:),\[:\],{:},<:>,' .
\ '<\@<=\([^/][^ \t>]*\)[^>]*\%(>\|$\):<\@<=/\1>'
endif
setlocal suffixesadd+=.jsx

View File

@ -0,0 +1,114 @@
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
" Vim indent file
"
" Language: JSX (JavaScript)
" Maintainer: Max Wang <mxawng@gmail.com>
"
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
" Save the current JavaScript indentexpr.
let b:jsx_js_indentexpr = &indentexpr
" Prologue; load in XML indentation.
if exists('b:did_indent')
let s:did_indent=b:did_indent
unlet b:did_indent
endif
exe 'runtime! indent/xml.vim'
if exists('s:did_indent')
let b:did_indent=s:did_indent
endif
setlocal indentexpr=GetJsxIndent()
" JS indentkeys
setlocal indentkeys=0{,0},0),0],0\,,!^F,o,O,e
" XML indentkeys
setlocal indentkeys+=*<Return>,<>>,<<>,/
" Multiline end tag regex (line beginning with '>' or '/>')
let s:endtag = '^\s*\/\?>\s*;\='
" Get all syntax types at the beginning of a given line.
fu! SynSOL(lnum)
return map(synstack(a:lnum, 1), 'synIDattr(v:val, "name")')
endfu
" Get all syntax types at the end of a given line.
fu! SynEOL(lnum)
let lnum = prevnonblank(a:lnum)
let col = strlen(getline(lnum))
return map(synstack(lnum, col), 'synIDattr(v:val, "name")')
endfu
" Check if a syntax attribute is XMLish.
fu! SynAttrXMLish(synattr)
return a:synattr =~ "^xml" || a:synattr =~ "^jsx"
endfu
" Check if a synstack is XMLish (i.e., has an XMLish last attribute).
fu! SynXMLish(syns)
return SynAttrXMLish(get(a:syns, -1))
endfu
" Check if a synstack denotes the end of a JSX block.
fu! SynJSXBlockEnd(syns)
return get(a:syns, -1) =~ '\%(js\|javascript\)Braces' &&
\ SynAttrXMLish(get(a:syns, -2))
endfu
" Determine how many jsxRegions deep a synstack is.
fu! SynJSXDepth(syns)
return len(filter(copy(a:syns), 'v:val ==# "jsxRegion"'))
endfu
" Check whether `cursyn' continues the same jsxRegion as `prevsyn'.
fu! SynJSXContinues(cursyn, prevsyn)
let curdepth = SynJSXDepth(a:cursyn)
let prevdepth = SynJSXDepth(a:prevsyn)
" In most places, we expect the nesting depths to be the same between any
" two consecutive positions within a jsxRegion (e.g., between a parent and
" child node, between two JSX attributes, etc.). The exception is between
" sibling nodes, where after a completed element (with depth N), we return
" to the parent's nesting (depth N - 1). This case is easily detected,
" since it is the only time when the top syntax element in the synstack is
" jsxRegion---specifically, the jsxRegion corresponding to the parent.
return prevdepth == curdepth ||
\ (prevdepth == curdepth + 1 && get(a:cursyn, -1) ==# 'jsxRegion')
endfu
" Cleverly mix JS and XML indentation.
fu! GetJsxIndent()
let cursyn = SynSOL(v:lnum)
let prevsyn = SynEOL(v:lnum - 1)
" Use XML indenting iff:
" - the syntax at the end of the previous line was either JSX or was the
" closing brace of a jsBlock whose parent syntax was JSX; and
" - the current line continues the same jsxRegion as the previous line.
if (SynXMLish(prevsyn) || SynJSXBlockEnd(prevsyn)) &&
\ SynJSXContinues(cursyn, prevsyn)
let ind = XmlIndentGet(v:lnum, 0)
" Align '/>' and '>' with '<' for multiline tags.
if getline(v:lnum) =~? s:endtag
let ind = ind - &sw
endif
" Then correct the indentation of any JSX following '/>' or '>'.
if getline(v:lnum - 1) =~? s:endtag
let ind = ind + &sw
endif
else
if len(b:jsx_js_indentexpr)
" Invoke the base JS package's custom indenter. (For vim-javascript,
" e.g., this will be GetJavascriptIndent().)
let ind = eval(b:jsx_js_indentexpr)
else
let ind = cindent(v:lnum)
endif
endif
return ind
endfu

View File

@ -0,0 +1,61 @@
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
" Vim syntax file
"
" Language: JSX (JavaScript)
" Maintainer: Max Wang <mxawng@gmail.com>
" Depends: pangloss/vim-javascript
"
" CREDITS: Inspired by Facebook.
"
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
" Prologue; load in XML syntax.
if exists('b:current_syntax')
let s:current_syntax=b:current_syntax
unlet b:current_syntax
endif
syn include @XMLSyntax syntax/xml.vim
if exists('s:current_syntax')
let b:current_syntax=s:current_syntax
endif
" Officially, vim-jsx depends on the pangloss/vim-javascript syntax package
" (and is tested against it exclusively). However, in practice, we make some
" effort towards compatibility with other packages.
"
" These are the plugin-to-syntax-element correspondences:
"
" - pangloss/vim-javascript: jsBlock, jsExpression
" - jelera/vim-javascript-syntax: javascriptBlock
" - othree/yajs.vim: javascriptNoReserved
" JSX attributes should color as JS. Note the trivial end pattern; we let
" jsBlock take care of ending the region.
syn region xmlString contained start=+{+ end=++ contains=jsBlock,javascriptBlock
" JSX child blocks behave just like JSX attributes, except that (a) they are
" syntactically distinct, and (b) they need the syn-extend argument, or else
" nested XML end-tag patterns may end the outer jsxRegion.
syn region jsxChild contained start=+{+ end=++ contains=jsBlock,javascriptBlock
\ extend
" Highlight JSX regions as XML; recursively match.
"
" Note that we prohibit JSX tags from having a < or word character immediately
" preceding it, to avoid conflicts with, respectively, the left shift operator
" and generic Flow type annotations (http://flowtype.org/).
syn region jsxRegion
\ contains=@Spell,@XMLSyntax,jsxRegion,jsxChild,jsBlock,javascriptBlock
\ start=+\%(<\|\w\)\@<!<\z([a-zA-Z][a-zA-Z0-9:\-.]*\)+
\ skip=+<!--\_.\{-}-->+
\ end=+</\z1\_\s\{-}>+
\ end=+/>+
\ keepend
\ extend
" Add jsxRegion to the lowest-level JS syntax cluster.
syn cluster jsExpression add=jsxRegion
" Allow jsxRegion to contain reserved words.
syn cluster javascriptNoReserved add=jsxRegion

View File

@ -0,0 +1,36 @@
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
" Vim ftdetect file
"
" Language: JSX (JavaScript)
" Maintainer: Max Wang <mxawng@gmail.com>
"
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
" Whether the .jsx extension is required.
if !exists('g:jsx_ext_required')
let g:jsx_ext_required = 1
endif
" Whether the @jsx pragma is required.
if !exists('g:jsx_pragma_required')
let g:jsx_pragma_required = 0
endif
if g:jsx_pragma_required
" Look for the @jsx pragma. It must be included in a docblock comment before
" anything else in the file (except whitespace).
let s:jsx_pragma_pattern = '\%^\_s*\/\*\*\%(\_.\%(\*\/\)\@!\)*@jsx\_.\{-}\*\/'
let b:jsx_pragma_found = search(s:jsx_pragma_pattern, 'npw')
endif
" Whether to set the JSX filetype on *.js files.
fu! <SID>EnableJSX()
if g:jsx_pragma_required && !b:jsx_pragma_found | return 0 | endif
if g:jsx_ext_required && !exists('b:jsx_ext_found') | return 0 | endif
return 1
endfu
autocmd BufNewFile,BufRead *.jsx let b:jsx_ext_found = 1
autocmd BufNewFile,BufRead *.jsx set filetype=javascript.jsx
autocmd BufNewFile,BufRead *.js
\ if <SID>EnableJSX() | set filetype=javascript.jsx | endif