All Projects → peitalin → Vim Jsx Typescript

peitalin / Vim Jsx Typescript

Licence: unlicense
React JSX syntax highlighting for vim and Typescript

Programming Languages

typescript
32286 projects

Labels

Projects that are alternatives of or similar to Vim Jsx Typescript

Babel Plugin React Html Attrs
Babel plugin which transforms HTML and SVG attributes on JSX host elements into React-compatible attributes
Stars: ✭ 170 (-25.76%)
Mutual labels:  jsx
Fre
👻 Tiny Footprint Concurrent UI library for Fiber.
Stars: ✭ 3,195 (+1295.2%)
Mutual labels:  jsx
Xdm
a modern MDX compiler. No runtime. With esbuild, Rollup, and webpack plugins
Stars: ✭ 206 (-10.04%)
Mutual labels:  jsx
Lucid
A UI component library from AppNexus.
Stars: ✭ 171 (-25.33%)
Mutual labels:  jsx
Transform
A polyglot web converter.
Stars: ✭ 2,842 (+1141.05%)
Mutual labels:  jsx
Jsxobj
Build JSON using JSX 🌈 (may contain blood magic)
Stars: ✭ 200 (-12.66%)
Mutual labels:  jsx
Compile Hero
🔰Visual Studio Code Extension For Compiling Language
Stars: ✭ 169 (-26.2%)
Mutual labels:  jsx
Canner
⚡️[NOT MAINTAINED] Content Management Framework creates custom CMS fast and easy. Support data sources such as Firebase/Firestore, GraphQL and Restful APIs.
Stars: ✭ 2,472 (+979.48%)
Mutual labels:  jsx
Tagalong.vim
Change an HTML(ish) opening tag and take the closing one along as well
Stars: ✭ 184 (-19.65%)
Mutual labels:  jsx
Addon Jsx
This Storybook addon show you the JSX / template of the story
Stars: ✭ 209 (-8.73%)
Mutual labels:  jsx
React Component Echarts
React component echarts. 组件式百度图表。
Stars: ✭ 175 (-23.58%)
Mutual labels:  jsx
Preact Render Spy
Render preact components with access to the produced virtual dom for testing.
Stars: ✭ 178 (-22.27%)
Mutual labels:  jsx
Crank
Write JSX-driven components with functions, promises and generators.
Stars: ✭ 2,487 (+986.03%)
Mutual labels:  jsx
Wax
An experimental, JSX-compatible renderer for the Web Audio API
Stars: ✭ 171 (-25.33%)
Mutual labels:  jsx
Htmr
Simple and lightweight (< 2kB) HTML string to React element conversion library
Stars: ✭ 214 (-6.55%)
Mutual labels:  jsx
Snap Shot
Jest-like snapshot feature for the rest of us, works magically by finding the right caller function
Stars: ✭ 170 (-25.76%)
Mutual labels:  jsx
Awesome
A curated list of awesome MDX resources
Stars: ✭ 195 (-14.85%)
Mutual labels:  jsx
Webapp
The react-based community network for amFOSS members
Stars: ✭ 226 (-1.31%)
Mutual labels:  jsx
React Sigma
Lightweight React library for drawing network graphs built on top of SigmaJS
Stars: ✭ 217 (-5.24%)
Mutual labels:  jsx
Eslint Plugin Jsx A11y
Static AST checker for a11y rules on JSX elements.
Stars: ✭ 2,609 (+1039.3%)
Mutual labels:  jsx

vim-jsx-typescript

Syntax highlighting and indentation for JSX in Typescript (typescriptreact filetypes).

vim-jsx-typescript works with the built-in typescript syntax highlighter and indentation engine for recent versions of Vim/Neovim.

Changelog: filetypes were updated from typescript.tsx to typescriptreact Please set filetypes as typescriptreact, not typescript.tsx as in prior versions in your .vimrc if you have any issues

" set filetypes as typescriptreact
autocmd BufNewFile,BufRead *.tsx,*.jsx set filetype=typescriptreact

alt tag alt tag

Installation

You need to install [Vundle] or [vim-plug]: https://github.com/junegunn/vim-plug --- just add the following lines to your ~/.vimrc:

Vundle:

Plugin 'leafgarland/typescript-vim'
Plugin 'peitalin/vim-jsx-typescript'

Vim-plug:

Plug 'leafgarland/typescript-vim'
Plug 'peitalin/vim-jsx-typescript'

To install from within vim, use the commands below.

:so ~/.vimrc
:PluginInstall

" OR for vim-plug:
:so ~/.vimrc
:PlugInstall

Note you can include .jsx files as typescriptreact files for syntax highlighting.

" set filetypes as typescriptreact
autocmd BufNewFile,BufRead *.tsx,*.jsx set filetype=typescriptreact

Set jsx-tag colors in vimrc, for example:

" dark red
hi tsxTagName guifg=#E06C75
hi tsxComponentName guifg=#E06C75
hi tsxCloseComponentName guifg=#E06C75

" orange
hi tsxCloseString guifg=#F99575
hi tsxCloseTag guifg=#F99575
hi tsxCloseTagName guifg=#F99575
hi tsxAttributeBraces guifg=#F99575
hi tsxEqual guifg=#F99575

" yellow
hi tsxAttrib guifg=#F8BD7F cterm=italic

alt tag

There is support for JSX Generics (Typescript 2.9). You can set the colors by adding this to your .vimrc settings

" light-grey
hi tsxTypeBraces guifg=#999999
" dark-grey
hi tsxTypes guifg=#666666

alt tag alt tag

Other keywords you can change coloring:

hi ReactState guifg=#C176A7
hi ReactProps guifg=#D19A66
hi ApolloGraphQL guifg=#CB886B
hi Events ctermfg=204 guifg=#56B6C2
hi ReduxKeywords ctermfg=204 guifg=#C678DD
hi ReduxHooksKeywords ctermfg=204 guifg=#C176A7
hi WebBrowser ctermfg=204 guifg=#56B6C2
hi ReactLifeCycleMethods ctermfg=204 guifg=#D19A66
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].