New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

JSX Support #255

Closed
edygar opened this Issue Feb 20, 2015 · 77 comments

Comments

Projects
None yet
@edygar
Copy link

edygar commented Feb 20, 2015

Is there anyway to change 'class' to 'className' while expanding notations in *.jsx files?

@mattn

This comment has been minimized.

Copy link
Owner

mattn commented Feb 21, 2015

What you expect behavior? Could you please show me BEFORE and AFTER.

@edygar

This comment has been minimized.

Copy link
Author

edygar commented Feb 21, 2015

there are few differences from the actual HTML to the JSX, but the more important are the following:
Expanding form.class-name#anyId>(label>input:text)+input:submit

<form id="anyId" class="class-name" action="">
  <label for=""><input id="" type="text" name=""></label>
  <input type="submit" value="">
</form>

but in JSX it would be

<form id="anyId" className="class-name" action="">
  <!-- attr for becomes forName -->
  <label forName="">
      <!-- Self-closing tags as full xml  -->
    <input id="" type="text" name=""/>
  </label>
  <input type="submit" value=""/>
</form>

Any other doubts you might have, there is an online conversor: http://facebook.github.io/react/html-jsx.html

@mattn mattn closed this in 3d6862d Feb 21, 2015

@edygar

This comment has been minimized.

Copy link
Author

edygar commented Feb 21, 2015

You are the best ;D

@jarodtaylor

This comment has been minimized.

Copy link

jarodtaylor commented Apr 28, 2016

Is there a way to enable this in .js files using .jsx? I'm okay with it being this way in all .js files. I never use this kind of markup in .js files that aren't .jsx, anyway.

@mattn

This comment has been minimized.

Copy link
Owner

mattn commented Apr 29, 2016

try to set filetype to javascript.jsx.

@joakimmohn

This comment has been minimized.

Copy link

joakimmohn commented Apr 29, 2016

Did it work for you? i have same problem but that didnt seem to work

@jarodtaylor

This comment has been minimized.

Copy link

jarodtaylor commented Apr 29, 2016

I had to update my version of emmet, and then any file with the .jsx extension worked. However, in order to get it to work inside of my .js files (I don't always name my React Components ****.jsx) I had to do this on each .js file:

:set filetype:javascript.jsx
@mattn

This comment has been minimized.

Copy link
Owner

mattn commented Apr 29, 2016

If you don't want to set filetype=javascript.jsx or getting something problems, please put following into your vimrc.

let g:user_emmet_settings = {
\  'javascript' : {
\      'extends' : 'jsx',
\  },
\}
@joakimmohn

This comment has been minimized.

Copy link

joakimmohn commented Apr 29, 2016

my emmet works fine with html files, but it doesn't work with any other
filetype. Even if i write :set filetype=javascript. any idea what is wrong?

On Fri, Apr 29, 2016 at 6:31 PM, mattn notifications@github.com wrote:

If you don't want to set filetype=javascript.jsx or getting something
problems, please put following into your vimrc.

let g:user_emmet_settings = {\ 'javascript' : {\ 'extends' : 'jsx',\ },}


You are receiving this because you commented.
Reply to this email directly or view it on GitHub
#255 (comment)

@jarodtaylor

This comment has been minimized.

Copy link

jarodtaylor commented Apr 30, 2016

@joakimmohn have you gone into your bundle and updated master for emmet-vim?

@danilobjr

This comment has been minimized.

Copy link

danilobjr commented Aug 18, 2016

@mattn Can I do something like this in my .vimrc? (include only html, css and jsx files)
This is not working.

let g:user_emmet_install_global=0
autocmd FileType html,css,jsx EmmetInstall
@mattn

This comment has been minimized.

Copy link
Owner

mattn commented Aug 18, 2016

@danilobjr what do you mean not working?

@danilobjr

This comment has been minimized.

Copy link

danilobjr commented Aug 19, 2016

@mattn Sorry. Let me be more clear. With these 2 lines, I have emmet working only on html and css files.

let g:user_emmet_install_global=0
autocmd FileType html,css EmmetInstall

But if I include jsx, like below, I dont have emmet working in my jsx files. Only on html and css.

autocmd FileType html,css,jsx EmmetInstall
@mattn

This comment has been minimized.

Copy link
Owner

mattn commented Aug 19, 2016

Maybe your jsx filetype is javascript. Please confirm like below.

:e foo.jsx
:set ft?
@danilobjr

This comment has been minimized.

Copy link

danilobjr commented Aug 22, 2016

@mattn result is

filetype=javascript.jsx
@mattn

This comment has been minimized.

Copy link
Owner

mattn commented Aug 22, 2016

Then you should do:

autocmd FileType html,css,javascript.jsx EmmetInstall
@danilobjr

This comment has been minimized.

Copy link

danilobjr commented Aug 24, 2016

@mattn Thank you so much! =]

@anthonybrown

This comment has been minimized.

Copy link

anthonybrown commented Nov 13, 2016

I can't seem to get emmet-vim to expand class to className
How can I debug this? I followed all of the suggestions in this post and nothing seems to be working for me? here is my .vimrc file

@mattn

This comment has been minimized.

Copy link
Owner

mattn commented Nov 13, 2016

  1. open foo.jsx
  2. make sure set filetype? is jsx
  3. type foo.bar and confirm expand to <foo className="bar"></foo>

emmet

@anthonybrown

This comment has been minimized.

Copy link

anthonybrown commented Nov 14, 2016

My filetypes are JavaScript though

@mattn

This comment has been minimized.

Copy link
Owner

mattn commented Nov 14, 2016

Because you do not set. Changing filetype is not a task of emmet-vim.

@anthonybrown

This comment has been minimized.

Copy link

anthonybrown commented Nov 14, 2016

asciicast

@anthonybrown

This comment has been minimized.

Copy link

anthonybrown commented Nov 14, 2016

@mattn when i check the filetype it says jsx what am I missing?

Thanks

@mattn

This comment has been minimized.

Copy link
Owner

mattn commented Nov 14, 2016

Do you use latest version? Recently, I fixed bug related ths.

@anthonybrown

This comment has been minimized.

Copy link

anthonybrown commented Nov 14, 2016

yes, I just did a git pull to make sure, and I'm using vim v8.x

My .vimrc file might help??

@anthonybrown

This comment has been minimized.

Copy link

anthonybrown commented Nov 14, 2016

screenshot 2016-11-13 21 19 54

@mattn

This comment has been minimized.

Copy link
Owner

mattn commented Nov 14, 2016

please try below on the jsx file.

:echo emmet#getFileType()

What value do you get?

@git-toni

This comment has been minimized.

Copy link

git-toni commented Nov 21, 2016

@anthonybrown I would add {for:['jsx','javascript.jsx']} to vim-jsx so it applies syntax highlighting to both jsx and javascript.jsx filetypes, to be extra sure :) good luck!

@kaylacohn

This comment has been minimized.

Copy link

kaylacohn commented Nov 21, 2016

@git-toni actually using neovim 0.1.6

@anthonybrown

This comment has been minimized.

Copy link

anthonybrown commented Nov 21, 2016

@mattn, @kaylacohn , @git-toni, seems like that did the trick. emmet-vim is expanding as it should in my React projects. Thanks for the help
💥 🍾 🍺

@kaylacohn

This comment has been minimized.

Copy link

kaylacohn commented Nov 21, 2016

@anthonybrown hey i reached out to you via email in regards to helping troubleshoot a syntax highlighting issue with the oceanic next theme, I didn't want to clutter this thread

@anthonybrown

This comment has been minimized.

Copy link

anthonybrown commented Nov 21, 2016

I didn't get any emails from you @kaylacohn but, I just went through fixing OceanicNext
I just did a search for it and came up with a solution. My problems was macvim wasn't picking up the colorscheme All I had to do was make a .gvimrc file with colorscheme: OceanicText to fix my macvim. To get it to work in iterm vim, I added

if (has("termguicolors"))
 set termguicolors
endif

in my .vimrc file. Hope that helps

https://github.com/mhartington/oceanic-next-iterm
for neovim there seems to be a fix, but I didn't have to do this. (I'm not using neo)
mhartington/oceanic-next#11

@shampliu

This comment has been minimized.

Copy link

shampliu commented Feb 24, 2017

Hi guys, so I followed these commands and currently, my emmet-vim will only expand foo.bar to if I set the filetype to jsx but I want to be able to expand it in javascript.jsx files as well because the syntax highlighting is better there. Do you guys have any solutions?

@mattn

This comment has been minimized.

Copy link
Owner

mattn commented Feb 24, 2017

Maybe you can enable or disable expanding with configuration. See #255 (comment)

@shampliu

This comment has been minimized.

Copy link

shampliu commented Feb 25, 2017

@mattn I tried deleting that line and other combinations but the expansion still doesn't work with javascript.jsx files.

Currently with these configs, I have my React files ending in ".js" and they get opened as filetype "jsx" and classes are expanded correctly. However I want to open them as "javascript.jsx" files for the syntax highlighting and expand the classes correctly.

screen shot 2017-02-25 at 2 49 16 pm

screen shot 2017-02-25 at 2 48 47 pm

@mattn

This comment has been minimized.

Copy link
Owner

mattn commented Feb 26, 2017

If you want to keep file type as jsx, try to set syntax

autocmd FileType jsx set syntax=javascript.jsx
@shampliu

This comment has been minimized.

Copy link

shampliu commented Feb 28, 2017

@mattn hm that line works for setting the syntax but then I lose the expansion again

@liambutterworth

This comment has been minimized.

Copy link

liambutterworth commented Mar 27, 2017

@shampliu try let g:user_emmet_settings={'javascript.jsx': {'extends':'jsx'}}

@shampliu

This comment has been minimized.

Copy link

shampliu commented Mar 28, 2017

@wbbutterworth I believe that did the trick, thank you!

@jersearls

This comment has been minimized.

Copy link

jersearls commented Jun 12, 2017

I had to add all of this to my .vimrc. I'm using pathogen, don't know if that made a difference

let g:user_emmet_install_global = 0

let g:user_emmet_settings = {
\  'javascript.jsx' : {
\      'extends' : 'jsx',
\  },
\}

autocmd FileType html,css,javascript.jsx EmmetInstall
@Youthink

This comment has been minimized.

Copy link

Youthink commented Aug 18, 2017

:set ft?

my result is javascript.jsx

autocmd Filetype javascript.jsx setlocal filetype=jsx

It is use for me.

@evserykh

This comment has been minimized.

Copy link

evserykh commented Sep 15, 2017

I use Vim with emmet-vim, vim-jsx and a bunch of other plugins (using Vundle).

When I type in any *.html file .foo>label then press Ctrl-Y+, I get:

<div class="foo"><label for=""></label></div>

When I type in any *.jsx file .foo>label - I get the same:

 <div class="foo"><label for=""></label></div>

If I do :set ft=jsx on any *.jsx and then type .foo>label the result is:

<div className="foo"><label htmlFor=""></label></div>

much more better but Vim loses JS syntax highlight.

When I try it with this my .vimrc:

let g:user_emmet_settings = {
\  'javascript.jsx' : {
\      'extends' : 'jsx',
\  },
\}

I get:

<div className="foo"><label></label></div>

so label tag doesn't have htmlFor attribute.

Is there a way to make it working properly together? At some point it works in a right way but then something changed.

  1. Vim
VIM - Vi IMproved 8.0 (2016 Sep 12, compiled Sep 14 2017 18:28:18)
MacOS X (unix) version
...
  1. emmet-vim
ed79a92 - Merge pull request #384 from hpate-omicron/patch-1
  1. vim-jsx
b098827 - Merge pull request #139 from BurningLutz/master (9 weeks ago) <Max Wang>
@mattn

This comment has been minimized.

Copy link
Owner

mattn commented Sep 15, 2017

You can add default attributes like below.

\  'javascript.jsx' : {
\    'extends' : 'jsx',
\    'default_attributes': {
\      'label': [{'htmlFor': ''}],
\    }
\  },
@evserykh

This comment has been minimized.

Copy link

evserykh commented Sep 15, 2017

@mattn, thanks for the reply.
In general, is it expected manner that I have to add default attributes?

Or it should work out of box? This part should not do the same?

emmet-vim/autoload/emmet.vim

Lines 1975 to 1979 in aa801bc

\ 'jsx': {
\ 'extends': 'html',
\ 'attribute_name': {'class': 'className', 'for': 'htmlFor'},
\ 'empty_element_suffix': ' />',
\ },

@mattn

This comment has been minimized.

Copy link
Owner

mattn commented Sep 15, 2017

I don't make sure, it may not work as intended. I'll look into it in later.

@c50a326

This comment has been minimized.

Copy link

c50a326 commented May 5, 2018

@mattn did you look into this yet? Feels horrible having to include that in vimrc.

@mattn

This comment has been minimized.

Copy link
Owner

mattn commented May 5, 2018

@c50a326 Already done. But your filetype is not jsx, you need to set configuration.

@kingluddite

This comment has been minimized.

Copy link

kingluddite commented Jun 10, 2018

I finally got this working and just want to put my notes down in case it helps someone else.

I could get emmet completion working using ctrl + y AND , but not with tab and I could never get the jsx comments to appear as {/* */} instead of //

I use Plug as my installer (tried the others and like Plug the best)
I hit tab and something was happening and wasn't sure what was the conflict.

Here's how you find key conflicts in vim

:verbose imap <Tab>

That lets me see my supertab plugin was a conflict so I uninstalled it. I comment it out in my .vimrc

" Plug 'ervandew/supertab' " Must load before youcompleteme

I removed all plugins that were commented out using :PlugClean
I updated all old plugins using :PlugUpdate

I didn't want to have to set my .js files to jsx every time with :set ft=jsx
so I installed vim-jsx with adding this to my .vimrc:

Plug 'mxw/vim-jsx'

I then ran

:source % :PlugInstall

to install it

I also added this to my .vimrc

" lets emmet use jsx shortcuts
let g:user_emmet_expandabbr_key='<Tab>'
imap <expr> <tab> emmet#expandAbbrIntelligent("\<tab>")
let g:user_emmet_settings = {
\  'javascript' : {
\      'extends' : 'jsx',
\  },
\}

let g:jsx_ext_required = 0

To make sure you have all the vim plugins installed use :scriptnames (make sure you see emmet in that list)

I also was using Ultisnips and YouCompleteMe (this gives me a crazy error all the time and sometimes I shut down Iterm and reopen it and the error goes away --- some server error???) and to get this working I just disabled and uninstalled them. I would like to get them and supertab all working together someday but I'll save that for another day. I think they have conflicts with Emmet?

After all that (above is a culmination of lots of different web pages) I am happy to say emmet is working with react and it sees my .js files as jsx and uses the correct syntax code coloring and my comments are jsx comments and when I use emmet it replaces class with className. I wish it wasn't such nightmare to get this all working but alas, maybe my pain can somehow save someone else the agony. lol

@anthonybrown

This comment has been minimized.

Copy link

anthonybrown commented Jun 10, 2018

@kingluddite can you share your .vimrc file ?

@anthonybrown

This comment has been minimized.

Copy link

anthonybrown commented Jun 10, 2018

let g:user_emmet_expandabbr_key='<Tab>'
imap <expr> <tab> emmet#expandAbbrIntelligent("\<tab")

these lines are inserting some funky stuff, eg:
.conainer exapnds to .container<Plug>(emmet-expand-abbr)

I'm I missing something?

@kingluddite

This comment has been minimized.

Copy link

kingluddite commented Jun 10, 2018

Sorry I updated my post and fixed a typo. Here is my vimrc

https://github.com/kingluddite/dotfiles/blob/master/vimrc

@anthonybrown

This comment has been minimized.

Copy link

anthonybrown commented Jun 10, 2018

@kingluddite
how did you get your comments to work?
That doesn't seem to work for me?
I'm using Commentary to comment stuff out, do I just use // or /* */ and hit tab?

@kingluddite

This comment has been minimized.

Copy link

kingluddite commented Jun 11, 2018

I use Plug 'tomtom/tcomment_vim' for comments

I want .js files to be used instead of .jsx

Plug 'mxw/vim-jsx' sets the syntax of my jsx files but since I want to use .js I use this line:

let g:jsx_ext_required = 0

That along with what I typed above works for me. If it doesn't for you, you have some sort of other key binding blocking it and you need to find the blocking offender and remove it.

@anthonybrown

This comment has been minimized.

Copy link

anthonybrown commented Jun 11, 2018

I'll try that one, thanks for the help!

@larrybotha

This comment has been minimized.

Copy link

larrybotha commented Aug 15, 2018

For TypeScript users, to get className expansion in both .ts and .tsx:

  let g:user_emmet_settings = {
  \ 'typescript' : {
  \     'extends' : 'jsx',
  \ },
  \}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment