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:
138
sources_non_forked/vim-jsx/README.md
Normal file
138
sources_non_forked/vim-jsx/README.md
Normal 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"
|
16
sources_non_forked/vim-jsx/after/ftplugin/jsx.vim
Normal file
16
sources_non_forked/vim-jsx/after/ftplugin/jsx.vim
Normal 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
|
114
sources_non_forked/vim-jsx/after/indent/jsx.vim
Normal file
114
sources_non_forked/vim-jsx/after/indent/jsx.vim
Normal 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
|
61
sources_non_forked/vim-jsx/after/syntax/jsx.vim
Normal file
61
sources_non_forked/vim-jsx/after/syntax/jsx.vim
Normal 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
|
36
sources_non_forked/vim-jsx/ftdetect/javascript.vim
Normal file
36
sources_non_forked/vim-jsx/ftdetect/javascript.vim
Normal 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
|
Reference in New Issue
Block a user