JSX className replacement not working

[fsworld009]

Hi: I haven't worked on jsx files for a while, today when I was working on jsx files I found that a.b extends to <a class="b"></a> instead of <a className="b"></a>

I have tried disabling all other plugins and only enable emmet, but the issue is not resolved.

Environment: NVIM 0.1.5, MacOSX 10.11.6

Just want to know if anyone has the same issue, I remember it was working.

[mattn]

Should be fixed in last change.

[cusxio]

It's not working for me as well. But I'm new to VIM, so it could be my configuration problem.

I tested it with:

:enew
:set ft=javascript

# enter insert mode

.test <C-y>,

# returns
# <div class="test"></div>

[mattn]

You NEED to set ft=jsx

[cusxio]

Ah I see, I set it to jsx earlier, but emmet won't even trigger, turns out it's an issue with vim-plug.

I got it working now thank you !

For reference purposes:

Plug 'mattn/emmet-vim', { 'for': ['javascript.jsx', 'html', 'css'] }

let g:user_emmet_install_global = 0

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

autocmd FileType html,css,javascript.jsx EmmetInstall

[mattn]

I don't reproduce it. Try to check filetype after opening jsx file.

[rainerborene]

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

This code did the trick.

[indiesquidge]

@rainerborene, @cusxio, I had a question I was hoping one of you might be able to answer. After setting the javascript.jsx key in the user settings for emmet, what did your snippets look like in JSX files?

For me, it changed the snippet. For example, I now got

<img />
**cursor**

When I was expecting the same, out-of-the-box snippet just with a self-closing tag, like what setting let emmet_html5 = 0 produces

<img src="**cursor**" alt="" />

Which expanded snippet are y'all getting?

[anthonybrown]

Had to update to High Sierra, to make long story short I also had to do a clean install. After setting up my vim setup, this plugin doesn't work as well. I reproduced my old .vimrc file which did work before.

[anthonybrown]

Emment is working with the file extension .jsx but doesn't seem to do anything in a .js file? To clarify, div.container expands to <div className='container'></div> with the .jsx extension but in a file with the .js extension it just does <div class='container'></div> Any ideas on this? @mattn

[anthonybrown]

Not sure what I did but now Emmet isn't working in my JavaScript files?

filetype off
set modelines=0
set number
set ruler
set smarttab
set visualbell
set encoding=utf-8
set nowrap
set autoindent
set copyindent
set textwidth=100
set formatoptions=tcqrn1
set tabstop=2
set shiftwidth=2
set softtabstop=2
set expandtab
set noshiftround
set backspace=indent,eol,start
set hidden
set ttyfast
set laststatus=2
set showmode
set showcmd
set hlsearch
set incsearch
set autowrite
set ignorecase
set smartcase
set showmatch
set listchars=tab:▸\ ,eol:¬
set nobackup
set nowritebackup
set noswapfile
set mouse=a
set ft=jsx

if has ("autocmd")
  autocmd!
endif
syntax enable
set t_Co=256

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

call plug#begin('~/.vim/plugged')
Plug 'scrooloose/nerdtree'
Plug 'tpope/vim-sensible'
Plug 'tpope/vim-rails'
Plug 'tpope/vim-endwise'
Plug 'tpope/vim-ragtag'
Plug 'tpope/vim-surround'
Plug 'tpope/vim-fugitive'
Plug 'tpope/vim-markdown', { 'for': 'markdown' }
Plug 'editorconfig/editorconfig-vim'
Plug 'Raimondi/delimitMate'
Plug 'benmills/vimux'
Plug 'sickill/vim-pasta'
Plug 'vim-airline/vim-airline'
Plug 'nightsense/stellarized'
Plug 'vim-airline/vim-airline-themes'
Plug 'chriskempson/base16-vim'
Plug 'mattn/emmet-vim', { 'for': ['javascript.jsx', 'html', 'css'] }
Plug 'prettier/vim-prettier', { 'do': 'yarn install' }
Plug 'mxw/vim-jsx'
Plug 'othree/html5.vim'
Plug 'othree/yajs.vim'
Plug 'mhartington/oceanic-next'
Plug 'scrooloose/nerdcommenter'
Plug 'godlygeek/tabular'
Plug 'pangloss/vim-javascript', { 'for': 'javascript' }
Plug 'MarcWeber/vim-addon-mw-utils'
Plug 'tomtom/tlib_vim'
Plug 'garbas/vim-snipmate'
Plug 'honza/vim-snippets'
Plug 'chrisbra/vim-commentary'
Plug 'sjl/badwolf'
Plug 'altercation/solarized'
Plug 'HerringtonDarkholme/yats.vim'
call plug#end()

filetype plugin indent on
let g:user_emmet_install_global = 0
let g:user_emmet_complete_tag = 1
let g:solarized_termcolors=256
let g:solarized_termtrans=1
let g:user_emmet_settings={
\  'javascript' : {
\    'extends': 'jsx',
\    'default_attributes': {
\      'label': [{'htmlFor': ''}],
\    }
\  },
\}
"set background=dark
"colorscheme solarized
colorscheme OceanicNext
"colorscheme badwolf
"colorscheme OceanicNextMine
"colorscheme jellybeans
"colorscheme OceanicNext
"colorscheme stellarized_dark
"color mango
"colorscheme base16-chalk
"colorscheme Tomorrow-Night
"colorscheme railscasts
"colorscheme gruvbox
"colorscheme base16-default
"colorscheme base16-chalk
"set guifont=Fira\ Code\ for\ powerline:h22
set guifont=Fura\ Code\ Light\ Nerd\ Font:h16
"set guifont=meslo\ LG\ L\ DZ\ for\ powerline:h16
set guioptions-=T
set guioptions-=r
set go-=L
set hidden
" set colorscheme for macvim
if has('gui_running')
  colorscheme OceanicNext
  "colorscheme gruvbox
  "colorscheme railscasts
  "colorscheme base16-default
  "colorscheme base16-chalk
  "colorscheme 0x7A69_dark
  "colorscheme mango
  set guifont=meslo\ LG\ L\ DZ\ for\ powerline:h16
endif
command! H let @/=""
" trailing white space
fun! <SID>StripTrailingWhitespaces()
    let l = line(".")
    let c = col(".")
    %s/\s\+$//e
    call cursor(l, c)
endfun

autocmd FileType html,css,javascript.jsx EmmetInstall
autocmd BufWritePre * :call <SID>StripTrailingWhitespaces()
autocmd FileType c,cpp,java,php,js,html autocmd BufWritePre <buffer> :%s/\s\+$//e
autocmd BufWritePre *.html :%s/\s\+$//e
autocmd BufNewFile,BufRead *.json setfiletype json syntax=javascript
autocmd BufNewFile,BufReadPost *.md set filetype=markdown
au BufNewFile,BufRead *.ejs set filetype=html
au BufRead,BufNewFile *.scss set filetype=scss.css
let g:airline_theme= 'oceanicnext'
let g:airline#extensions#tabline#enabled=1
let g:airline_powerline_fonts=1
let g:Powerline_symbols='fancy'
let g:airline_enable_branch=1
let g:airline_solarized_bg='dark'
let g:oceanic_next_terminal_bold=1
let g:oceanic_next_terminal_italic=1
nmap <leader>w :w!<cr>
nnoremap j gj
nnoremap k gk
nmap <C-h> <C-w>h
nmap <C-j> <C-w>j
nmap <C-k> <C-w>k
nmap <C-l> <C-w>l
nmap <C-v> :vertical resize +5<cr>
nmap 25 :vertical resize 40<cr>
nmap 75 :vertical resize 120<cr>
nmap <C-b> :NERDTreeToggle<cr>
nmap ,c :!open -a Google\ Chrome<cr>
nmap :sp :rightbelow sp<cr>
nmap :bp :BufSurfBack<cr>
nmap :bn :BufSurfForward<cr>
highlight Search cterm=underline
let NERDTreeShowHidden=1
set statusline+=%#warningmsg#
set statusline+=%*
let g:syntastic_always_populate_loc_list=0
let g:syntastic_auto_loc_list=0
let g:syntastic_check_on_open=1
let g:syntastic_check_on_wq=1
let g:syntastic_javascript_checkers=['jsxhint']
let g:syntastic_javascript_checkers=['eslint']
let g:syntastic_typescript_checkers=['tsc', 'tslint']
let g:JSHintHighlightErrorLine=1
let g:jsx_ext_required=1

[mattn]

You set set ft=jsx in your vimrc. And you disable filetype off at the top of your vimrc. So FileType event doesn't occured. It makes wrong behavior for many vim plugins.

[anthonybrown]

this was suggested for the plugins to work properly, I'll comment out the line and see what happens. Emmet works on files ending in jsx but I don't name files with that extension, I just use .js I need Emmet to work on those files.

[mattn]

this was suggested for the plugins to work properly.

If the plug-in is suggesting that way, it's wrong. See :help 'filetype'. option filetype is local to buffer NOT global. This is correct way.

augroup MyDefaultFileType
  au!
  au BufEnter * if '' == expand("<afile>") && !get(b:, 'ft_overridden', 0) | setlocal ft=jsx | let b:ft_overridden = 1 | endif
augroup END

[mattn]

but I don't name files with that extension, I just use .js I need Emmet to work on those files.

Plug 'mattn/emmet-vim', { 'for': ['javascript.jsx', 'html', 'css'] }

If you want to use emmet on javascript or jsx filetype:

Plug 'mattn/emmet-vim', { 'for': ['javascript', 'jsx', 'html', 'css'] }

[anthonybrown]

super, thanks for the information @mattn, I'll try that

[anthonybrown]

Do I still need this line then? autocmd FileType html,css,javascript.jsx EmmetInstall

[mattn]

Yes, but If your filetype for *.jsx is jsx:

autocmd FileType html,css,javascript,jsx EmmetInstall

[anthonybrown]

I need it to work for .js not .jsx only

[mattn]

FileType is not extension of filename.

autocmd FileType javascript,jsx EmmetInstall

[anthonybrown]

Ok, emmet expands in javascript but it doesn't add the className it does class and messes up the syntax highlighting. I do hope you fix this. Vim emmet is awesome and I use it daily. Thanks so much for your help @mattn I guess I can use the .jsx extension while developing and then change them to .js when I'm done in the meantime until this is fixed.

[mattn]

You can fix this like below.

let g:user_emmet_settings = {
\  'jsx': {
\    'attribute_name': {'for': 'htmlFor', 'class': 'class'},
\  },
\}

[anthonybrown]

you mean:

let g:user_emmet_settings = {
\  'jsx': {
\    'attribute_name': {'for': 'htmlFor', 'class': 'className'},
\  },
\}

[anthonybrown]

My .vimrc file now

set modelines=0
set number
set ruler
set smarttab
set visualbell
set encoding=utf-8
set nowrap
set autoindent
set copyindent
set textwidth=100
set formatoptions=tcqrn1
set tabstop=2
set shiftwidth=2
set softtabstop=2
set expandtab
set noshiftround
set backspace=indent,eol,start
set hidden
set ttyfast
set laststatus=2
set showmode
set showcmd
set hlsearch
set incsearch
set autowrite
set ignorecase
set smartcase
set showmatch
set listchars=tab:▸\ ,eol:¬
set nobackup
set nowritebackup
set noswapfile
set mouse=a
set ft=jsx

if has ("autocmd")
  autocmd!
endif
syntax enable
set t_Co=256

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

call plug#begin('~/.vim/plugged')
Plug 'scrooloose/nerdtree'
Plug 'moll/vim-node', { 'for': 'javascript'}
Plug 'tpope/vim-sensible'
Plug 'tpope/vim-rails'
Plug 'tpope/vim-endwise'
Plug 'tpope/vim-ragtag'
Plug 'tpope/vim-surround'
Plug 'tpope/vim-fugitive'
Plug 'tpope/vim-markdown', { 'for': 'markdown' }
Plug 'editorconfig/editorconfig-vim'
Plug 'Raimondi/delimitMate'
Plug 'benmills/vimux'
Plug 'sickill/vim-pasta'
Plug 'vim-airline/vim-airline'
Plug 'nightsense/stellarized'
Plug 'vim-airline/vim-airline-themes'
Plug 'chriskempson/base16-vim'
Plug 'mattn/emmet-vim', { 'for': ['javascript', 'jsx', 'html', 'css'] }
Plug 'prettier/vim-prettier', { 'do': 'yarn install' }
Plug 'mxw/vim-jsx'
Plug 'othree/html5.vim'
Plug 'othree/yajs.vim'
Plug 'mhartington/oceanic-next'
Plug 'scrooloose/nerdcommenter'
Plug 'godlygeek/tabular'
Plug 'pangloss/vim-javascript', { 'for': 'javascript' }
Plug 'MarcWeber/vim-addon-mw-utils'
Plug 'tomtom/tlib_vim'
Plug 'garbas/vim-snipmate'
Plug 'honza/vim-snippets'
Plug 'chrisbra/vim-commentary'
Plug 'sjl/badwolf'
Plug 'altercation/solarized'
Plug 'HerringtonDarkholme/yats.vim'
call plug#end()

filetype plugin indent on
let g:user_emmet_install_global = 0
let g:user_emmet_complete_tag = 1
let g:solarized_termcolors=256
let g:solarized_termtrans=1
" let g:user_emmet_settings={
" \  'javascript.jsx' : {
" \    'extends': 'jsx',
" \    'default_attributes': {
" \      'label': [{'htmlFor': ''}],
" \    }
" \  },
" \}
let g:user_emmet_settings = {
\  'jsx': {
\    'attribute_name': {'for': 'htmlFor', 'class': 'className'},
\  },
\}
"set background=dark
"colorscheme solarized
colorscheme OceanicNext
"colorscheme badwolf
"colorscheme OceanicNextMine
"colorscheme jellybeans
"colorscheme OceanicNext
"colorscheme stellarized_dark
"color mango
"colorscheme base16-chalk
"colorscheme Tomorrow-Night
"colorscheme railscasts
"colorscheme gruvbox
"colorscheme base16-default
"colorscheme base16-chalk
"set guifont=Fira\ Code\ for\ powerline:h22
set guifont=Fura\ Code\ Light\ Nerd\ Font:h16
"set guifont=meslo\ LG\ L\ DZ\ for\ powerline:h16
set guioptions-=T
set guioptions-=r
set go-=L
set hidden
" set colorscheme for macvim
if has('gui_running')
  colorscheme OceanicNext
  "colorscheme gruvbox
  "colorscheme railscasts
  "colorscheme base16-default
  "colorscheme base16-chalk
  "colorscheme 0x7A69_dark
  "colorscheme mango
  set guifont=meslo\ LG\ L\ DZ\ for\ powerline:h16
endif
command! H let @/=""
" trailing white space
fun! <SID>StripTrailingWhitespaces()
    let l = line(".")
    let c = col(".")
    %s/\s\+$//e
    call cursor(l, c)
endfun

autocmd FileType html,css,javascript,jsx EmmetInstall
autocmd BufWritePre * :call <SID>StripTrailingWhitespaces()
autocmd FileType c,cpp,java,php,js,html autocmd BufWritePre <buffer> :%s/\s\+$//e
autocmd BufWritePre *.html :%s/\s\+$//e
autocmd BufNewFile,BufRead *.json setfiletype json syntax=javascript
autocmd BufNewFile,BufReadPost *.md set filetype=markdown
au BufNewFile,BufRead *.ejs set filetype=html
au BufRead,BufNewFile *.scss set filetype=scss.css
let g:airline_theme= 'oceanicnext'
let g:airline#extensions#tabline#enabled=1
let g:airline_powerline_fonts=1
let g:Powerline_symbols='fancy'
let g:airline_enable_branch=1
let g:airline_solarized_bg='dark'
let g:oceanic_next_terminal_bold=1
let g:oceanic_next_terminal_italic=1
nmap <leader>w :w!<cr>
nnoremap j gj
nnoremap k gk
nmap <C-h> <C-w>h
nmap <C-j> <C-w>j
nmap <C-k> <C-w>k
nmap <C-l> <C-w>l
nmap <C-v> :vertical resize +5<cr>
nmap 25 :vertical resize 40<cr>
nmap 75 :vertical resize 120<cr>
nmap <C-b> :NERDTreeToggle<cr>
nmap ,c :!open -a Google\ Chrome<cr>
nmap :sp :rightbelow sp<cr>
nmap :bp :BufSurfBack<cr>
nmap :bn :BufSurfForward<cr>
highlight Search cterm=underline
let NERDTreeShowHidden=1
set statusline+=%#warningmsg#
set statusline+=%*
let g:syntastic_always_populate_loc_list=0
let g:syntastic_auto_loc_list=0
let g:syntastic_check_on_open=1
let g:syntastic_check_on_wq=1
let g:syntastic_javascript_checkers=['jsxhint']
let g:syntastic_javascript_checkers=['eslint']
let g:syntastic_typescript_checkers=['tsc', 'tslint']
let g:JSHintHighlightErrorLine=1
let g:jsx_ext_required=1

[mattn]

If you want to expand foo.bar into <foo class="bar"></foo>:

let g:user_emmet_settings = {
\  'jsx': {
\    'attribute_name': {'for': 'htmlFor', 'class': 'class'},
\  },
\}

If you want to expand foo.bar into <foo className="bar"></foo>:

let g:user_emmet_settings = {
\  'jsx': {
\    'attribute_name': {'for': 'htmlFor', 'class': 'className'},
\  },
\}

[anthonybrown]

Is this working for you? can you share your .vimrc file with me? doesn't seem to be working

let g:user_emmet_settings = { \ 'jsx': { \ 'attribute_name': {'for': 'htmlFor', 'class': 'className'}, \ }, }

Now in my .jsx file, .container expands to class and in my .js files.

[mattn]

You need add backslash in last line.

2018年4月24日(火) 19:35 Tony Brown notifications@github.com:

Is this working for you? can you share your .vimrc file with me? doesn't seem to be working

let g:user_emmet_settings = { \ 'jsx': { \ 'attribute_name': {'for': 'htmlFor', 'class': 'className'}, \ }, }

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/mattn/emmet-vim/issues/350#issuecomment-383884711, or mute the thread https://github.com/notifications/unsubscribe-auth/AAAnfxH4wcVNWTB8PKHCqT1srZPgzG1aks5trv-7gaJpZM4Kq05s .

[anthonybrown]

You need add backslash in last line.

That was a typo, the backslash is added but the behavior is the same? .container expands to class in both .jsx and .js files?

[anthonybrown]

at least this works in .jsx files

let g:user_emmet_settings={
\  'javascript.jsx' : {
\    'extends': 'jsx',
\    'default_attributes': {
\      'label': [{'htmlFor': ''}],
\    }
\  },
\}

Thank you for taking the time to help me

[anthonybrown]

Why does it say not loaded?

[mattn]

still have issue?

[anthonybrown]

Yes, not working in .js files @mattn did you get it working?

[mattn]

Yes, no prob.

[anthonybrown]

I'm going to restart iterm, I can't think of why it's not working for me? You looked at my vimrc file, do you see anything else that could be keeping it from working?

[anthonybrown]

set modelines=0
set number
set ruler
set smarttab
set visualbell
set encoding=utf-8
set nowrap
set autoindent
set copyindent
set textwidth=100
set formatoptions=tcqrn1
set tabstop=2
set shiftwidth=2
set softtabstop=2
set expandtab
set noshiftround
set backspace=indent,eol,start
set hidden
set ttyfast
set laststatus=2
set showmode
set showcmd
set hlsearch
set incsearch
set autowrite
set ignorecase
set smartcase
set showmatch
set listchars=tab:▸\ ,eol:¬
set nobackup
set nowritebackup
set noswapfile
set mouse=a
set ft=jsx

if has ("autocmd")
  autocmd!
endif
syntax enable
set t_Co=256

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

call plug#begin('~/.vim/plugged')
Plug 'scrooloose/nerdtree'
Plug 'w0rp/ale'
Plug 'skywind3000/asyncrun.vim'
Plug 'moll/vim-node', { 'for': 'javascript'}
Plug 'tpope/vim-sensible'
Plug 'tpope/vim-rails'
Plug 'tpope/vim-endwise'
Plug 'tpope/vim-ragtag'
Plug 'tpope/vim-surround'
Plug 'tpope/vim-fugitive'
Plug 'tpope/vim-markdown', { 'for': 'markdown' }
Plug 'editorconfig/editorconfig-vim'
Plug 'Raimondi/delimitMate'
Plug 'benmills/vimux'
Plug 'sickill/vim-pasta'
Plug 'vim-airline/vim-airline'
Plug 'nightsense/stellarized'
Plug 'vim-airline/vim-airline-themes'
Plug 'chriskempson/base16-vim'
Plug 'mattn/emmet-vim', { 'for': ['javascript', 'jsx', 'html', 'css'] }
Plug 'prettier/vim-prettier', { 'do': 'yarn install' }
Plug 'mxw/vim-jsx'
Plug 'othree/html5.vim'
Plug 'othree/yajs.vim'
Plug 'mhartington/oceanic-next'
Plug 'scrooloose/nerdcommenter'
Plug 'godlygeek/tabular'
Plug 'pangloss/vim-javascript', { 'for': 'javascript' }
Plug 'MarcWeber/vim-addon-mw-utils'
Plug 'tomtom/tlib_vim'
Plug 'garbas/vim-snipmate'
Plug 'honza/vim-snippets'
Plug 'chrisbra/vim-commentary'
Plug 'sjl/badwolf'
Plug 'altercation/solarized'
Plug 'HerringtonDarkholme/yats.vim'
call plug#end()

filetype plugin indent on
let g:ale_sign_error = '●' " Less aggressive than the default '>>'
let g:ale_sign_warning = '.'
let g:ale_lint_on_enter = 0 " Less distracting when opening a new file
let g:user_emmet_install_global = 0
let g:user_emmet_complete_tag = 1
let g:solarized_termcolors=256
let g:solarized_termtrans=1
" let g:user_emmet_settings={
" \  'javascript.jsx' : {
" \    'extends': 'jsx',
" \    'default_attributes': {
" \      'label': [{'htmlFor': ''}],
" \    }
" \  },
" \}
let g:user_emmet_settings = {
\  'jsx': {
\    'attribute_name': {'for': 'htmlFor', 'class': 'className'},
\  },
\}
"set background=dark
"colorscheme solarized
colorscheme OceanicNext
"colorscheme badwolf
"colorscheme OceanicNextMine
"colorscheme jellybeans
"colorscheme OceanicNext
"colorscheme stellarized_dark
"color mango
"colorscheme base16-chalk
"colorscheme Tomorrow-Night
"colorscheme railscasts
"colorscheme gruvbox
"colorscheme base16-default
"colorscheme base16-chalk
"set guifont=Fira\ Code\ for\ powerline:h22
set guifont=Fura\ Code\ Light\ Nerd\ Font:h16
"set guifont=meslo\ LG\ L\ DZ\ for\ powerline:h16
set guioptions-=T
set guioptions-=r
set go-=L
set hidden
" set colorscheme for macvim
if has('gui_running')
  colorscheme OceanicNext
  "colorscheme gruvbox
  "colorscheme railscasts
  "colorscheme base16-default
  "colorscheme base16-chalk
  "colorscheme 0x7A69_dark
  "colorscheme mango
  set guifont=meslo\ LG\ L\ DZ\ for\ powerline:h16
endif
command! H let @/=""
" trailing white space
fun! <SID>StripTrailingWhitespaces()
    let l = line(".")
    let c = col(".")
    %s/\s\+$//e
    call cursor(l, c)
endfun

autocmd FileType html,css,javascript,jsx EmmetInstall
autocmd BufWritePre * :call <SID>StripTrailingWhitespaces()
autocmd FileType c,cpp,java,php,js,html autocmd BufWritePre <buffer> :%s/\s\+$//e
autocmd BufWritePre *.html :%s/\s\+$//e
autocmd BufNewFile,BufRead *.json setfiletype json syntax=javascript
autocmd BufNewFile,BufReadPost *.md set filetype=markdown
au BufNewFile,BufRead *.ejs set filetype=html
au BufRead,BufNewFile *.scss set filetype=scss.css
autocmd BufWritePost *.js AsyncRun -post=checktime ./node_modules/.bin/eslint --fix %
let g:airline_theme= 'oceanicnext'
let g:airline#extensions#tabline#enabled=1
let g:airline_powerline_fonts=1
let g:Powerline_symbols='fancy'
let g:airline_enable_branch=1
let g:airline_solarized_bg='dark'
let g:oceanic_next_terminal_bold=1
let g:oceanic_next_terminal_italic=1
nmap <leader>w :w!<cr>
nnoremap j gj
nnoremap k gk
nmap <C-h> <C-w>h
nmap <C-j> <C-w>j
nmap <C-k> <C-w>k
nmap <C-l> <C-w>l
nmap <C-v> :vertical resize +5<cr>
nmap 25 :vertical resize 40<cr>
nmap 75 :vertical resize 120<cr>
nmap <C-b> :NERDTreeToggle<cr>
nmap ,c :!open -a Google\ Chrome<cr>
nmap :sp :rightbelow sp<cr>
nmap :bp :BufSurfBack<cr>
nmap :bn :BufSurfForward<cr>
highlight Search cterm=underline
let NERDTreeShowHidden=1
set statusline+=%#warningmsg#
set statusline+=%*
let g:syntastic_always_populate_loc_list=0
let g:syntastic_auto_loc_list=0
let g:syntastic_check_on_open=1
let g:syntastic_check_on_wq=1
let g:syntastic_javascript_checkers=['jsxhint']
let g:syntastic_javascript_checkers=['eslint']
let g:syntastic_typescript_checkers=['tsc', 'tslint']
let g:JSHintHighlightErrorLine=1
let g:jsx_ext_required=1

if I comment out:

let g:user_emmet_settings = {
\ 'jsx': {
\ 'attribute_name': {'for': 'htmlFor', 'class': 'className'},
\ },
\}

and use:

let g:user_emmet_settings={
 \  'javascript.jsx' : {
 \    'extends': 'jsx',
 \    'default_attributes': {
 \      'label': [{'htmlFor': ''}],
 \    }
 \  },
 \}
``
It will work in `.jsx` files but not `js` files

[mattn]

Please check this.

1. open your jsx or javascript file
2. :echo emmet#getFileType()

[anthonybrown]

javascript.jsx in both jsx and .js files. It just started working!!!

I changed this:

let g:user_emmet_settings={
\  'javascript.jsx' : {
\    'extends': 'jsx',
\    'default_attributes': {
\      'label': [{'htmlFor': ''}],
\      'class': {'className': ''},
\    }
\  },
\}

[anthonybrown]

Thanks so much for your help, I can confirm this is working for me. The only thing that's a bit off is input doesn't expand into <input type='' /> like it did, it does <input /> but I can live with that.

[mattn]

So closing

[anthonybrown]

Not sure what happened but in my .js files, emmet is not expanding correctly again 😤

[anthonybrown]

[anthonybrown]

When I do echo emmet#getFileType() in my .js files, I'm getting html

[mattn]

What you get with :echo &ft on the .js file?

[anthonybrown]

I'm getting javascript now

[anthonybrown]

I've made some changes to my .vimrc file. The className is appearing again but the syntax is getting messed up

[anthonybrown]

let g:user_emmet_settings={
\ 'javascript' : {
\   'extends' : 'jsx',
\    'default_attributes' : {
\      'label': [{'htmlFor': ' '}],
\      'class': { 'className': ' '},
\    },
\  },
\}

[mattn]

syntax is getting messed up

What messed up?

[laoshaw]

let g:user_emmet_settings={
\ 'javascript' : {
\   'extends' : 'jsx',
\    'default_attributes' : {
\      'label': [{'htmlFor': ' '}],
\      'class': { 'className': ' '},
\    },
\  },
\}

it's 2020.10 and I use javascriptreact instead of javascript and it worked fine, emmet will treat JSX section as type jsx, and non-JSX part type js correctly.

[evolify]

How did you made it work for javascriptreact?