Vscode: Emmet with JS files (JSX) is not working.

[admmasters]

• VSCode Version: Version 0.10.14-insider (0.10.14-insider)
• OS Version: OSX 10.11.4

Steps to Reproduce:

1. Type div> within the editor in a JS file (JSX)
2. Emmet does not expand to <div></div> as expected.

Note:
This does work if explicitly using a jsx file with "Javascript React" as a language, but then you are missing features like jump to symbol etc that you get with "Javascript".

[egamma]

This does work if explicitly using a jsx file with "Javascript React" as a language,

this is the recommended way to do it, we do not want to enable emmet by default in JS.

Then you are missing features like jump to symbol etc that you get with "Javascript".

this should not be the case, since the same language service/parser is used for .js and .jsx files. Can you add a snippet that illustrates the problem.

[egamma]

@admmasters ping?

[christianmalek]

Is there an option to enable emmet in JS files? The jsconfig.json doesn't seem to have an option. It's annoying to change every time the language mode to JavaScript React to be able to use Emmet.

[msudgh]

Put bellow line into your user settings, most probably that will work.
"emmet.syntaxProfiles": { "javascript": "html" }

[sillero]

"emmet.syntaxProfiles": { "javascript": "jsx" } did the trick
it properly expands with the jsx notation (class -> className, for -> htmlFor, ...)

[admmasters]

Confirmed - great work, thank you! @egamma sorry it took so long for me to reply - I never received my notifications for this!

[johnpeele]

Confirmed as well! - @sillero's suggestion worked for me.

Visual Studio Code - v1.8.1
Mac OS X - v10.11.6

[Cipher-geek-Studios]

Thanks overwriting the setting page helped me thanks.
"emmet.syntaxProfiles": { "javascript": "html" }

[danfma]

Hey guys, this doesn´t work for tsx files. I tried with typescript, typescriptreact and javascript.

"emmet.syntaxProfiles": {
    "javascript": "jsx",
    "typescript": "jsx",
    "typescriptreact": "jsx"
}

[vernondegoede]

@johnpeele Did you set any other options to get this working properly? Typing div and pressing tab results in inserting HTMLDivElement

However, typing div.test results in <div className="test"></div>.

[yogeshlonkar]

for HTML code in tsx file (Inside render's return) I can't get single quote attributes by setting

"emmet.syntaxProfiles": {
    "typescriptreact": {
        "attr_quotes": "single"
    }
}

this doesn't work. But If i put below in settings it works

"emmet.syntaxProfiles": {
    "xml": {
        "attr_quotes": "single"
    }
}

is it expected behavior?

[johnpeele]

@vernondegoede Here are my Emmet settings:

"emmet.syntaxProfiles": {
    "javascript": "jsx",
    "xml": {
        "attr_quotes": "single"
    }
}

Here is a screencap of me using tab expansion in a .js file:

I am also using the Sublime Babel grammar for my JSX files.

[vernondegoede]

@johnpeele Thank you so much! This works like a charm.

[admmasters]

@danfma have you managed to get emmet expansion working in tsx?

[admmasters]

@egamma this doesn't seem to be working with tsx.

[cAstraea]

How can I add more ?
Doing something like
"emmet.syntaxProfiles": {
"javascript": "jsx,vue",
.....}
doesn't seem to work

[egamma]

@danfma have you managed to get emmet expansion working in tsx?

Strictly speaking it is a separate issue, but I've reopened this one.

[ramya-rao-a]

for HTML code in tsx file (Inside render's return) I can't get single quote attributes

@yogeshlonkar This issue was tracked in #16354 where you can read more about it. The fix is in the latest VS Code 1.9. Please give that a try.

Typing div and pressing tab results in inserting HTMLDivElement However, typing div.test results in <div className="test"></div>.

@vernondegoede The HTMLDivElement is coming from autocomplete. Currently when you hit TAB, and there are suggestions in the completion items, then the selected suggestion gets expanded, emmet doesn't even get a chance to come in and play. #1952 is tracking this kind of problem. Please up vote and chime in there. As a workaround, you can press ESC to escape the suggestion and then press TAB so that emmet expansion can take place, or assign a different keybinding for emmet.

How can I add more ?

@cAstraea At the moment you cannot map more than a single language mode. Can you open a separate issue and elaborate your use case?

@admmasters Emmet expansions are working fine in .tsx files. For it to work in .ts files you need to either map "typescript" to "jsx" in emmet.syntaxProfiles or change language mode to tyspescriptreact

[caiolopes]

The feature "updateTag" is not working when language mode is JavaScript React, only HTML.. And it is so useful for adding a class, etc, in an already existing component.

[ramya-rao-a]

@caiolopes I can repro that. Pardon me, I am new to emmet. Is this is regression? Was it ever working before?

[caiolopes]

@ramya-rao-a Here is a screencast.. I don't know if it was ever working before.. But actually it is working if the language mode is HTML.

[ramya-rao-a]

Created separate issue for the problem with Update Tag feature with jsx. #20953
Closing this current issue as emmet expansion works just file for jsx and tsx and we haven't heard back anything supporting otherwise

[orangemooncreative]

does anyone have an idea why even after updating my emmet syntax profile my class expansion is class and not className? here is a gif of my settings and my expansion.
http://cloud.orangemooncreative.com/401H2z3c2G0T

[ramya-rao-a]

First off, thanks for trying out the new emmet @orangemooncreative

The className issue is being tracked here: https://github.com/emmetio/expand-abbreviation/issues/2

[ramya-rao-a]

@orangemooncreative The className issue is fixed with https://github.com/Microsoft/vscode/commit/02783b149c99cc6e8b7f066d4660cec0d4c361d6 and you should be able to see the fix in tomorrow's insiders

[ramya-rao-a]

Hey All,

From VS Code 1.15 onwards, please use emmet.includeLanguages instead of emmet.syntaxProfiles to get Emmet abbreviation expansion features in your language of choice.

We are making this move because of the confusion around what emmet.syntaxProfiles setting was originally meant for i.e Customizing final output and what it became i.e enabling emmet in new languages.

Please read more on this at Emmet 2.0

[MrZhang123]

@ramya-rao-a Hi , I use VS Code 1.15 , I set the emmet

"emmet.includeLanguages": {
    "javascript": "javascriptreact",
}

but in my reactjs file , i use emmet to click Tab , but it can not use like this code:

class Payment extends Component {
  render() {
    return (
      View>Text
    );
  }
}

how to fix it ?

[ramya-rao-a]

@MrZhang123 Do you have editor.quickSuggestions disabled? If not, then you should have been able to get emmet abbreviation in the suggestion list. Selection it will expand the abbreviation.

Read Emmet 2.0 for more on this

[bigkrp]

After update to x64 emmet stop to support custom components

When i tried tab - nothing happens. But befor installation x64 version of visual code - it worked well

[EQuimper]

Get same problem, all was working before this version and now emmet break with my component. I did the change like you say in the docs but ...

[ramya-rao-a]

Follow the issue number 32243 for the tab issue.

Emmet suggestions for simple words that are not abbreviations themselves will not show up. Otherwise you will end up with emmet suggestion for every word you type.

MyComponent>Text will expand to the below though

<MyComponent>
    <Text></Text>
</MyComponent>

[EQuimper]

@ramya-rao-a It's still not work. I mean just even the simple MyComponent. I don't know if this is the tab don't work but I add the

"emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },

But that still not work. Maybe I miss something. I read the other issue but nothing really help.

[ramya-rao-a]

@EQuimper Did you try MyComponent>Text? Have you disabled editor.quickSuggestions ?

Tab for emmet is now available in the VS Code Insiders build. You can try it from https://code.visualstudio.com/insiders

[EQuimper]

I just did and install insiders and remove the quicksuggestions and don't work.

// Place your settings in this file to overwrite the default settings
{
  "editor.fontSize": 14,
  "editor.tabSize": 2,
  "editor.fontFamily": "Monaco",
  // "editor.fontFamily": "Hasklig",
  "editor.wordWrapColumn": 80,
  "editor.fontLigatures": true,
  "editor.snippetSuggestions": "top",
  "editor.minimap.enabled": true,
  "files.exclude": {
    "**/.git": true,
    "**/.svn": true,
    "**/.DS_Store": true,
    "**/node_modules": true,
    "**/.idea": true,
    "**/.vscode": false,
    "**/yarn.lock": true,
    "**/tmp": true
  },
  "files.watcherExclude": {
    "**/.git/objects/**": true,
    "**/node_modules/**": true,
    "**/tmp": true
  },
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
    // "javascript": "javascript"
  },
  "search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true,
    "**/.git": true,
    "**/.DS_Store": true,
    "**/tmp": true,
    "**/coverage": true,
    "**/ios": true,
    "**/android": true,
    "_build": true,
    "deps": true
  },
  "files.trimTrailingWhitespace": true,
  "html.suggest.html5": true,
  "npm-intellisense.scanDevDependencies": true,
  "stylelint.enable": true,
  // "typescript.check.tscVersion": false,
  "window.zoomLevel": 0,
  "terminal.integrated.shell.osx": "/bin/zsh",
  "javascript.validate.enable": false,
  "extensions.autoUpdate": true,
  "terminal.integrated.fontSize": 13,
  "terminal.integrated.cursorStyle": "line",
"sync.gist": "95e4cfd731754a9c023d59c0538fa6e6",
"sync.lastUpload": "",
"sync.autoDownload": false,
"sync.autoUpload": false,
"sync.lastDownload": "2017-08-11T20:58:30.447Z",
"sync.forceDownload": false,
"sync.anonymousGist": false,
  "color-highlight.markerType": "outline",
  "vsicons.projectDetection.disableDetect": true,
  "vsicons.dontShowNewVersionMessage": true,
  "fileHeaderCommentHelper.languageConfigs": {
    "language_javascript": {
      "template": [
        "/**",
        " * Project: $(projectName)",
        " * File: $(currentFile)",
        " * Author: Emanuel Quimper",
        " */"
      ]
    }
  },
  // "workbench.welcome.enabled": false,
  "workbench.iconTheme": "material-icon-theme",
  "material-icon-theme.showUpdateMessage": false,
"sync.host": "",
"sync.pathPrefix": "",
  "eslint.autoFixOnSave": true,
  "editor.formatOnSave": false,
  "editor.renderIndentGuides": true,
  "prettier.singleQuote": true,
  "prettier.printWidth": 80,
  "prettier.trailingComma": "all",
  "prettier.semi": true,
  "prettier.useTabs": false,
  "prettier.bracketSpacing": true,
"sync.quietSync": false,
  "files.associations": {
    "*.gohtml": "html"
  },
  "git.enableSmartCommit": true,
  "flow.useNPMPackagedFlow": true,
"sync.askGistName": false,
  "extensions.ignoreRecommendations": true,
  "editor.autoIndent": true,
  // "emmet.showExpandedAbbreviation": "never",
  "editor.quickSuggestions": false
}

[ramya-rao-a]

@EQuimper Set emmet.triggerExpansionOnTab to `true to get tab working. Sorry forgot to mention that in the previous comment.

You don't have to set editor.quickSuggestions to false. If you set that to true then you will see emmet in suggestion list as well where you can see the preview for the expanded value

[EQuimper]

Good work with that thank you :)

[goncy]

Like is commented on this update https://code.visualstudio.com/blogs/2017/08/07/emmet-2.0

An important change is that the Tab key is no longer the dedicated keyboard shortcut for expanding Emmet abbreviations. Instead, Emmet abbreviations will now appear in the suggestion list. They can be selected like any other smart completion and on selection, the abbreviation will be expanded.

This may take some getting used to but we think you'll see the benefits of Emmet abbreviations being treated as suggestions or smart completions. You can still bind any keyboard shortcut (other than Tab key) to the editor.emmet.action.expandAbbreviation command or use Emmet: Expand Abbreviation from the Command Palette.

So, if you want to mantain the old behavior (for example, for autocompleting JSX components), you have to go to preferences > keyboard shorcuts, find Emmet: Expand abbreviation and map it to tab, like this:

There you go :)

After @ramya-rao-a comment realized that this is not ok, just dismiss this comment

[ramya-rao-a]

@goncy Mapping to tab that way in VS Code 1.15 has problems of its own as there is no fallback to the real tab (indenting) when there is no valid emmet abbreviation to expand.

For example, with that setting you will never be able to just tab expecting an indent. You will end up getting warning message that says something like "Running emmet failed.. ".

Here are your options

• If on VS Code 1.15 use emmet from suggestions, bind any other keyboard shortcut (other than tab) for the emmet expand command
• If on VS Code 1.16 Insiders build (you can get it from https://code.visualstudio.com/insiders), then set emmet.triggerExpansionOnTab to true. The appropriate fallback for tab exists.

We really wanted to move away from using tab for emmet due to the problems it brings for non emmet users. But there has been feedback requesting the tab->emmet feature back, and so it is now available in the latest Insiders

[tuoxiansp]

This works for me.

{
        "key": "tab",
        "command": "editor.emmet.action.expandAbbreviation",
        "when": "suggestWidgetVisible"
}

[MrZhang123]

@tuoxiansp how to setting this ?

[tuoxiansp]

@MrZhang123

[ramya-rao-a]

@tuoxiansp I wouldn't suggest to do that. You will not be able to select anything from the suggestion list using tab if you do that I believe

[tuoxiansp]

@ramya-rao-a
Yeah, it's not the elegant way.

[MrZhang123]

@ramya-rao-a the new version 1.15.1 fix it , that's great😁

[rmichnik]

This did the trick:

"emmet.includeLanguages": {
"javascript": "javascriptreact"
},

VSCode: 1.15.0
Macos: 10.12.6 (16G29)

[MrZhang123]

@rmichnik you need update new version 1.15.1 , this bug fixed

[fpigeonjr]

thanks @rmichnik. Confirmed working on macOSX and VSCode 1.15.1

[antoniandre]

I have the config "emmet.triggerExpansionOnTab": true and I replaced the tab key in keybindings with ctrl+e (like in ST3) so I can keep my tab key to tab :)

[EQuimper]

It's only me or the first component I can tab and get the autocomplete, but the second one who is inside this the other one never work. Before all was perfect but now ...

Video about it https://drive.google.com/open?id=0B-wdzKw8lrR8MXFYSnN0RXJydjA

[ramya-rao-a]

@EQuimper That looks wrong but I can't repro. Can you log a new issue with repro steps?
The video helps but I need the exact steps and the keys you pressed

[bullyork]

VScode Version 1.16
the setting key has changed
so you should set it as follows

"emmet.includeLanguages": {
"javascript": "jsx"
},

[beholderrk]

@EQuimper same problem. vscode 1.15.1
https://www.dropbox.com/s/f4nq2zx3nixc4lb/2017-09-15_13-18-36.mp4?dl=0

[ramya-rao-a]

@beholderrk Can you upgrade to 1.16 and see if you still have the issue?
@EQuimper Are you on 1.15.1 too?
@bullyork The right hand side should be javascriptreact in your setting for emmet.includeLanguages

[EQuimper]

No i'm on the insiders version @ramya-rao-a v17

{
  // Place your settings in this file to overwrite the default settings
  "editor.fontSize": 18,
  "editor.tabSize": 2,
  "editor.fontFamily": "Operator Mono",
  // "editor.fontFamily": "Inconsolata",
  // "editor.fontFamily": "Menlo",
  "editor.wordWrapColumn": 80,
  "editor.fontLigatures": true,
  "editor.snippetSuggestions": "top",
  "editor.minimap.enabled": true,
  "files.exclude": {
    "**/.git": true,
    "**/.svn": true,
    "**/.DS_Store": true,
    "**/node_modules": true,
    "**/.idea": true,
    "**/.vscode": false,
    "**/yarn.lock": true,
    "**/tmp": true
  },
  "files.watcherExclude": {
    "**/.git/objects/**": true,
    "**/node_modules/**": true,
    "**/tmp": true
  },
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },
  "search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true,
    "**/.git": true,
    "**/.DS_Store": true,
    "**/tmp": true,
    "**/coverage": true,
    "**/ios": true,
    "**/android": true,
    "_build": true,
    "deps": true
  },
  "files.trimTrailingWhitespace": true,
  "html.suggest.html5": true,
  "npm-intellisense.scanDevDependencies": true,
  "stylelint.enable": true,
  // "typescript.check.tscVersion": false,
  "window.zoomLevel": 0,
  "terminal.integrated.shell.osx": "/bin/zsh",
  "javascript.validate.enable": false,
  "extensions.autoUpdate": true,
  "terminal.integrated.fontSize": 13,
  "terminal.integrated.cursorStyle": "line",
  "sync.gist": "95e4cfd731754a9c023d59c0538fa6e6",
  "sync.lastUpload": "",
  "sync.autoDownload": false,
  "sync.autoUpload": false,
  "sync.lastDownload": "2017-08-11T20:58:30.447Z",
  "sync.forceDownload": false,
  "sync.anonymousGist": false,
  "color-highlight.markerType": "outline",
  "vsicons.projectDetection.disableDetect": true,
  "vsicons.dontShowNewVersionMessage": true,
  "fileHeaderCommentHelper.languageConfigs": {
    "language_javascript": {
      "template": [
        "/**",
        " * Project: $(projectName)",
        " * File: $(currentFile)",
        " * Author: Emanuel Quimper",
        " */"
      ]
    }
  },
  // "workbench.welcome.enabled": false,
  "workbench.iconTheme": "material-icon-theme",
  "material-icon-theme.showUpdateMessage": false,
  "sync.host": "",
  "sync.pathPrefix": "",
  "eslint.autoFixOnSave": true,
  "editor.formatOnSave": false,
  "editor.renderIndentGuides": true,
  "prettier.singleQuote": true,
  "prettier.printWidth": 80,
  "prettier.trailingComma": "all",
  "prettier.semi": true,
  "prettier.useTabs": false,
  "prettier.bracketSpacing": true,
  "sync.quietSync": false,
  "files.associations": {
    "*.gohtml": "html"
  },
  "git.enableSmartCommit": true,
  "flow.useNPMPackagedFlow": true,
  "sync.askGistName": false,
  "extensions.ignoreRecommendations": true,
  "editor.autoIndent": true,
  // "emmet.showExpandedAbbreviation": "never",
  // "editor.quickSuggestions": false,
  "emmet.triggerExpansionOnTab": true,
  "workbench.startupEditor": "newUntitledFile",
  "vscode_custom_css.imports": [
    "file:///Users/equimper/coding/customStuff/custom.css"
  ],
  "workbench.colorTheme": "One Monokai"
}

[ramya-rao-a]

@EQuimper I copied all your settings and I still can't repro.
Can you run code-insiders --disable-extensions and then see if you can still repro?
It might be the case that some other extension is interfering.

[EQuimper]

@ramya-rao-a So have test with the disable extensions options and all work. Which kind of extensions can interfering with emmet ? :)

[EQuimper]

Ok now work after disable this extensions https://marketplace.visualstudio.com/items?itemName=joshpeng.sublime-babel-vscode

[beholderrk]

@ramya-rao-a @EQuimper wow thanks! The problem was precisely in this extention.

[ramya-rao-a]

@EQuimper @beholderrk Add the below in your settings and Emmet should work as expected inside the nested tag when using the babel extension

"emmet.includeLanguages": {
      "jsx-sublime-babel-tags": "javascriptreact"
  }

[EQuimper]

@ramya-rao-a thank you :)