├── README.md ├── after ├── ftplugin │ └── tsx.vim ├── indent │ └── tsx.vim └── syntax │ └── tsx.vim └── ftdetect └── typescript.vim /README.md: -------------------------------------------------------------------------------- 1 | vim-tsx 2 | ======= 3 | 4 | Syntax highlighting and indenting for TSX. TSX is a JavaScript syntax 5 | transformer which translates inline XML document fragments into JavaScript 6 | objects. It was developed by Facebook alongside [React][1]. 7 | 8 | Installation 9 | ------------ 10 | 11 | ### vim-plug 12 | 13 | Plug 'ianks/vim-tsx' 14 | 15 | ### Pathogen 16 | ``` 17 | git clone https://github.com/ianks/vim-tsx.git ~/.vim/bundle/vim-tsx 18 | ``` 19 | 20 | [1]: http://facebook.github.io/react/ "React" 21 | -------------------------------------------------------------------------------- /after/ftplugin/tsx.vim: -------------------------------------------------------------------------------- 1 | """"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" 2 | " Vim ftplugin file 3 | " 4 | " Language: TSX (JavaScript) 5 | " Maintainer: Ian Ker-Seymer 6 | " Depends: leafgarland/typescript-vim 7 | " 8 | """"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" 9 | 10 | " modified from html.vim 11 | if exists("loaded_matchit") 12 | let b:match_ignorecase = 0 13 | let b:match_words = '(:),\[:\],{:},<:>,' . 14 | \ '<\@<=\([^/][^ \t>]*\)[^>]*\%(>\|$\):<\@<=/\1>' 15 | endif 16 | 17 | setlocal suffixesadd+=.tsx 18 | -------------------------------------------------------------------------------- /after/indent/tsx.vim: -------------------------------------------------------------------------------- 1 | """"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" 2 | " Vim indent file 3 | " 4 | " Language: TSX (JavaScript) 5 | " Maintainer: Ian Ker-Seymer 6 | " Depends: pangloss/vim-typescript 7 | " 8 | """"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" 9 | 10 | " Prologue; load in XML indentation. 11 | if exists('b:did_indent') 12 | let s:did_indent=b:did_indent 13 | unlet b:did_indent 14 | endif 15 | exe 'runtime! indent/xml.vim' 16 | if exists('s:did_indent') 17 | let b:did_indent=s:did_indent 18 | endif 19 | 20 | setlocal indentexpr=GetTsxIndent() 21 | 22 | " TS indentkeys 23 | setlocal indentkeys=0{,0},0),0],0\,,!^F,o,O,e 24 | " XML indentkeys 25 | setlocal indentkeys+=*,<>>,<<>,/ 26 | 27 | " Self-closing tag regex. 28 | let s:sctag = '^\s*\/>\s*;\=' 29 | 30 | " Get all syntax types at the beginning of a given line. 31 | fu! SynSOL(lnum) 32 | return map(synstack(a:lnum, 1), 'synIDattr(v:val, "name")') 33 | endfu 34 | 35 | " Get all syntax types at the end of a given line. 36 | fu! SynEOL(lnum) 37 | let lnum = prevnonblank(a:lnum) 38 | let col = strlen(getline(lnum)) 39 | return map(synstack(lnum, col), 'synIDattr(v:val, "name")') 40 | endfu 41 | 42 | " Check if a syntax attribute is XMLish. 43 | fu! SynAttrXMLish(synattr) 44 | return a:synattr =~ "^xml" || a:synattr =~ "^tsx" 45 | endfu 46 | 47 | " Check if a synstack is XMLish (i.e., has an XMLish last attribute). 48 | fu! SynXMLish(syns) 49 | return SynAttrXMLish(get(a:syns, -1)) 50 | endfu 51 | 52 | " Check if a synstack has any XMLish attribute. 53 | fu! SynXMLishAny(syns) 54 | for synattr in a:syns 55 | if SynAttrXMLish(synattr) 56 | return 1 57 | endif 58 | endfor 59 | return 0 60 | endfu 61 | 62 | " Check if a synstack denotes the end of a TSX block. 63 | fu! SynTSXBlockEnd(syns) 64 | return get(a:syns, -1) == 'tsBraces' && SynAttrXMLish(get(a:syns, -2)) 65 | endfu 66 | 67 | " Cleverly mix TS and XML indentation. 68 | fu! GetTsxIndent() 69 | let cursyn = SynSOL(v:lnum) 70 | let prevsyn = SynEOL(v:lnum - 1) 71 | 72 | " Use XML indenting if the syntax at the end of the previous line was either 73 | " TSX or was the closing brace of a tsBlock whose parent syntax was TSX. 74 | if (SynXMLish(prevsyn) || SynTSXBlockEnd(prevsyn)) && SynXMLishAny(cursyn) 75 | let ind = XmlIndentGet(v:lnum, 0) 76 | 77 | " Align '/>' with '<' for multiline self-closing tags. 78 | if getline(v:lnum) =~? s:sctag 79 | let ind = ind - &sw 80 | endif 81 | 82 | " Then correct the indentation of any TSX following '/>'. 83 | if getline(v:lnum - 1) =~? s:sctag 84 | let ind = ind + &sw 85 | endif 86 | else 87 | let ind = GetTypescriptIndent() 88 | endif 89 | 90 | return ind 91 | endfu 92 | -------------------------------------------------------------------------------- /after/syntax/tsx.vim: -------------------------------------------------------------------------------- 1 | """"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" 2 | " Vim syntax file 3 | " 4 | " Language: TSX (JavaScript) 5 | " Maintainer: Ian Ker-Seymer 6 | " Depends: leafgarland/typescript-vim 7 | " 8 | """"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" 9 | 10 | if exists('b:current_syntax') 11 | let s:current_syntax=b:current_syntax 12 | unlet b:current_syntax 13 | endif 14 | 15 | syn include @XMLSyntax syntax/xml.vim 16 | 17 | if exists('s:current_syntax') 18 | let b:current_syntax=s:current_syntax 19 | endif 20 | 21 | syn region embeddedTs 22 | \ matchgroup=NONE 23 | \ start=+{+ 24 | \ end=+}+ 25 | \ contains=@Spell,@typescriptAll,xmlEntity,tsxRegion 26 | \ contained 27 | 28 | " Add embeddedTs to everything where xmlString is used to allow for 29 | " both string highlighting and @typescriptAll highlighting 30 | syn region xmlTag 31 | \ matchgroup=xmlTag start=+<[^ /!?<>"']\@=+ 32 | \ matchgroup=xmlTag end=+>+ 33 | \ contained 34 | \ contains=xmlError,xmlTagName,xmlAttrib,xmlEqual,xmlString,@xmlStartTagHook,embeddedTs 35 | 36 | syn region xmlProcessing 37 | \ matchgroup=xmlProcessingDelim 38 | \ start="" 40 | \ contains=xmlAttrib,xmlEqual,xmlString,embeddedTs 41 | 42 | 43 | if exists('g:xml_syntax_folding') 44 | " DTD -- we use dtd.vim here 45 | syn region xmlDocType matchgroup=xmlDocTypeDecl 46 | \ start="" 48 | \ fold 49 | \ contains=xmlDocTypeKeyword,xmlInlineDTD,xmlString,embeddedTs 50 | else 51 | syn region xmlDocType matchgroup=xmlDocTypeDecl 52 | \ start="" 54 | \ contains=xmlDocTypeKeyword,xmlInlineDTD,xmlString,embeddedTs 55 | endif 56 | 57 | 58 | if exists('g:xml_syntax_folding') 59 | syn region xmlTag 60 | \ matchgroup=xmlTag start=+<[^ /!?<>"']\@=+ 61 | \ matchgroup=xmlTag end=+>+ 62 | \ contained 63 | \ contains=xmlError,xmlTagName,xmlAttrib,xmlEqual,xmlString,@xmlStartTagHook,embeddedTs 64 | else 65 | syn region xmlTag 66 | \ matchgroup=xmlTag start=+<[^ /!?<>"']\@=+ 67 | \ matchgroup=xmlTag end=+>+ 68 | \ contains=xmlError,xmlTagName,xmlAttrib,xmlEqual,xmlString,@xmlStartTagHook,embeddedTs 69 | endif 70 | 71 | 72 | syn region tsxRegion 73 | \ contains=@Spell,@XMLSyntax,tsxRegion,@typescriptAll 74 | \ start=+\%(<\|\w\)\@+ 76 | \ end=++ 77 | \ end=+/>+ 78 | \ keepend 79 | \ extend 80 | 81 | hi def link embeddedTs NONE 82 | 83 | syn cluster @typescriptAll add=tsxRegion 84 | -------------------------------------------------------------------------------- /ftdetect/typescript.vim: -------------------------------------------------------------------------------- 1 | """"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" 2 | " Vim ftdetect file 3 | " 4 | " Language: TSX (JavaScript) 5 | " Maintainer: Ian Ker-Seymer 6 | " 7 | """"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" 8 | 9 | autocmd BufNewFile,BufRead *.tsx let b:tsx_ext_found = 1 10 | autocmd BufNewFile,BufRead *.tsx set filetype=typescript.tsx 11 | --------------------------------------------------------------------------------