Emmet with JS files (JSX) is not working. #4962

admmasters · 2016-04-05T13:28:01Z

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

Steps to Reproduce:

Type div> within the editor in a JS file (JSX)
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".

The text was updated successfully, but these errors were encountered:

egamma · 2016-04-06T08:24:10Z

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 · 2016-04-13T18:28:14Z

@admmasters ping?

christianmalek · 2016-05-06T19:16:08Z

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 · 2016-09-28T11:26:32Z

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

sillero · 2016-10-11T16:16:04Z

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

admmasters · 2016-11-04T11:25:59Z

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

johnpeele · 2016-12-28T16:54:31Z

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

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

Cipher-geek-Studios · 2017-01-10T11:19:06Z

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

danfma · 2017-01-11T03:00:25Z

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 · 2017-01-14T15:30:33Z

@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 · 2017-01-17T04:39:14Z

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 · 2017-01-17T15:54:47Z

@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 · 2017-01-19T07:20:49Z

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

admmasters · 2017-02-08T10:37:59Z

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

admmasters · 2017-02-08T10:38:41Z

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

cAstraea · 2017-02-10T09:42:56Z

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

egamma · 2017-02-10T16:31:55Z

@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 · 2017-02-10T17:43:26Z

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 · 2017-02-14T17:04:09Z

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 · 2017-02-15T05:01:23Z

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

caiolopes · 2017-02-15T12:58:15Z

@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 · 2017-08-11T20:39:19Z

@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 · 2017-08-11T21:08:06Z

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 · 2017-08-11T21:12:10Z

@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 · 2017-08-11T21:16:30Z

Good work with that thank you :)

goncy · 2017-08-12T07:04:13Z

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 · 2017-08-12T18:18:21Z

@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 · 2017-08-16T06:12:07Z

This works for me.

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

MrZhang123 · 2017-08-17T07:38:06Z

@tuoxiansp how to setting this ?

tuoxiansp · 2017-08-17T07:42:04Z

@MrZhang123

ramya-rao-a · 2017-08-17T15:55:19Z

@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 · 2017-08-18T08:32:27Z

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

MrZhang123 · 2017-08-19T07:38:23Z

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

rmichnik · 2017-08-21T23:50:08Z

This did the trick:

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

VSCode: 1.15.0
Macos: 10.12.6 (16G29)

MrZhang123 · 2017-08-22T01:42:50Z

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

fpigeonjr · 2017-08-31T04:47:59Z

thanks @rmichnik. Confirmed working on macOSX and VSCode 1.15.1

antoniandre · 2017-09-12T03:22:30Z

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 · 2017-09-12T04:14:15Z

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 · 2017-09-12T04:27:08Z

@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 · 2017-09-15T03:53:23Z

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

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

beholderrk · 2017-09-15T10:23:33Z

@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 · 2017-09-15T16:26:42Z

@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 · 2017-09-15T16:31:18Z

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 · 2017-09-15T18:23:22Z

@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 · 2017-09-18T15:08:33Z

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

EQuimper · 2017-09-18T15:29:30Z

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

beholderrk · 2017-09-19T08:17:41Z

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

ramya-rao-a · 2017-09-21T22:29:28Z

@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 · 2017-09-22T15:46:57Z

@ramya-rao-a thank you :)

alexdima assigned egamma Apr 5, 2016

egamma added info-needed Issue requires more information from poster javascript JavaScript support issues labels Apr 6, 2016

egamma closed this as completed Apr 17, 2016

fahrradflucht mentioned this issue Jul 19, 2016

Feature Request: Enable emmet for other file extensions. #9500

Closed

egamma assigned ramya-rao-a and unassigned egamma Feb 10, 2017

egamma reopened this Feb 10, 2017

ramya-rao-a mentioned this issue Feb 20, 2017

Emmet Update Tag does not work with JSX, but works file with HTML #20953

Closed

michaelgmcd mentioned this issue Aug 28, 2017

Emmet is not working with this VSCode extension michaelgmcd/vscode-language-babel#6

Closed

vscodebot bot locked and limited conversation to collaborators Nov 17, 2017

Emmet with JS files (JSX) is not working. #4962

Emmet with JS files (JSX) is not working. #4962

Comments

admmasters commented Apr 5, 2016

egamma commented Apr 6, 2016

egamma commented Apr 13, 2016

christianmalek commented May 6, 2016

msudgh commented Sep 28, 2016

sillero commented Oct 11, 2016

admmasters commented Nov 4, 2016 • edited Loading

johnpeele commented Dec 28, 2016

Cipher-geek-Studios commented Jan 10, 2017

danfma commented Jan 11, 2017

vernondegoede commented Jan 14, 2017

yogeshlonkar commented Jan 17, 2017

johnpeele commented Jan 17, 2017

vernondegoede commented Jan 19, 2017

admmasters commented Feb 8, 2017

admmasters commented Feb 8, 2017

cAstraea commented Feb 10, 2017

egamma commented Feb 10, 2017

ramya-rao-a commented Feb 10, 2017 • edited Loading

caiolopes commented Feb 14, 2017

ramya-rao-a commented Feb 15, 2017

caiolopes commented Feb 15, 2017

ramya-rao-a commented Aug 11, 2017

EQuimper commented Aug 11, 2017

ramya-rao-a commented Aug 11, 2017

EQuimper commented Aug 11, 2017

goncy commented Aug 12, 2017 • edited Loading

ramya-rao-a commented Aug 12, 2017

tuoxiansp commented Aug 16, 2017

MrZhang123 commented Aug 17, 2017

tuoxiansp commented Aug 17, 2017 • edited Loading

ramya-rao-a commented Aug 17, 2017

tuoxiansp commented Aug 18, 2017

MrZhang123 commented Aug 19, 2017

rmichnik commented Aug 21, 2017

MrZhang123 commented Aug 22, 2017

fpigeonjr commented Aug 31, 2017

antoniandre commented Sep 12, 2017

EQuimper commented Sep 12, 2017 • edited Loading

ramya-rao-a commented Sep 12, 2017

bullyork commented Sep 15, 2017 • edited Loading

beholderrk commented Sep 15, 2017 • edited Loading

ramya-rao-a commented Sep 15, 2017

EQuimper commented Sep 15, 2017

ramya-rao-a commented Sep 15, 2017

EQuimper commented Sep 18, 2017

EQuimper commented Sep 18, 2017

beholderrk commented Sep 19, 2017

ramya-rao-a commented Sep 21, 2017

EQuimper commented Sep 22, 2017

admmasters commented Nov 4, 2016 •

edited

Loading

ramya-rao-a commented Feb 10, 2017 •

edited

Loading

goncy commented Aug 12, 2017 •

edited

Loading

tuoxiansp commented Aug 17, 2017 •

edited

Loading

EQuimper commented Sep 12, 2017 •

edited

Loading

bullyork commented Sep 15, 2017 •

edited

Loading

beholderrk commented Sep 15, 2017 •

edited

Loading