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

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

Closed
admmasters opened this Issue Apr 5, 2016 · 60 comments

Comments

Projects
None yet
@admmasters

admmasters commented Apr 5, 2016

  • 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 comment has been minimized.

Member

egamma commented Apr 6, 2016

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

This comment has been minimized.

Member

egamma commented Apr 13, 2016

@admmasters ping?

@egamma egamma closed this Apr 17, 2016

@christianmalek

This comment has been minimized.

christianmalek commented May 6, 2016

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

This comment has been minimized.

msudgh commented Sep 28, 2016

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

@sillero

This comment has been minimized.

sillero commented Oct 11, 2016

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

@admmasters

This comment has been minimized.

admmasters commented Nov 4, 2016

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

@johnpeele

This comment has been minimized.

johnpeele commented Dec 28, 2016

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

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

@Cipher-geek-Studios

This comment has been minimized.

Cipher-geek-Studios commented Jan 10, 2017

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

@danfma

This comment has been minimized.

danfma commented Jan 11, 2017

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

This comment has been minimized.

vernondegoede commented Jan 14, 2017

@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

This comment has been minimized.

yogeshlonkar commented Jan 17, 2017

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

This comment has been minimized.

johnpeele commented Jan 17, 2017

@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:
kapture 2017-01-17 at 10 52 23

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

@vernondegoede

This comment has been minimized.

vernondegoede commented Jan 19, 2017

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

@admmasters

This comment has been minimized.

admmasters commented Feb 8, 2017

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

@admmasters

This comment has been minimized.

admmasters commented Feb 8, 2017

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

@cAstraea

This comment has been minimized.

cAstraea commented Feb 10, 2017

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

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

@egamma

This comment has been minimized.

Member

egamma commented Feb 10, 2017

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

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

@egamma egamma reopened this Feb 10, 2017

@ramya-rao-a

This comment has been minimized.

Member

ramya-rao-a commented Feb 10, 2017

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

This comment has been minimized.

caiolopes commented Feb 14, 2017

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

This comment has been minimized.

Member

ramya-rao-a commented Feb 15, 2017

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

@caiolopes

This comment has been minimized.

caiolopes commented Feb 15, 2017

@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.
emmet-vscode-updatetag

@ramya-rao-a

This comment has been minimized.

Member

ramya-rao-a commented Aug 11, 2017

@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

This comment has been minimized.

EQuimper commented Aug 11, 2017

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

This comment has been minimized.

Member

ramya-rao-a commented Aug 11, 2017

@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

This comment has been minimized.

EQuimper commented Aug 11, 2017

Good work with that thank you :)

@goncy

This comment has been minimized.

goncy commented Aug 12, 2017

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:

image

There you go :)

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

@ramya-rao-a

This comment has been minimized.

Member

ramya-rao-a commented Aug 12, 2017

@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 comment has been minimized.

tuoxiansp commented Aug 16, 2017

This works for me.

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

This comment has been minimized.

MrZhang123 commented Aug 17, 2017

@tuoxiansp how to setting this ?

@tuoxiansp

This comment has been minimized.

tuoxiansp commented Aug 17, 2017

@ramya-rao-a

This comment has been minimized.

Member

ramya-rao-a commented Aug 17, 2017

@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

This comment has been minimized.

tuoxiansp commented Aug 18, 2017

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

@MrZhang123

This comment has been minimized.

MrZhang123 commented Aug 19, 2017

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

@rmichnik

This comment has been minimized.

rmichnik commented Aug 21, 2017

This did the trick:

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

VSCode: 1.15.0
Macos: 10.12.6 (16G29)

@MrZhang123

This comment has been minimized.

MrZhang123 commented Aug 22, 2017

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

@fpigeonjr

This comment has been minimized.

fpigeonjr commented Aug 31, 2017

thanks @rmichnik. Confirmed working on macOSX and VSCode 1.15.1

@antoniandre

This comment has been minimized.

antoniandre commented Sep 12, 2017

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

This comment has been minimized.

EQuimper commented Sep 12, 2017

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

This comment has been minimized.

Member

ramya-rao-a commented Sep 12, 2017

@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

This comment has been minimized.

bullyork commented Sep 15, 2017

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

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

@beholderrk

This comment has been minimized.

beholderrk commented Sep 15, 2017

@ramya-rao-a

This comment has been minimized.

Member

ramya-rao-a commented Sep 15, 2017

@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

This comment has been minimized.

EQuimper commented Sep 15, 2017

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

This comment has been minimized.

Member

ramya-rao-a commented Sep 15, 2017

@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

This comment has been minimized.

EQuimper commented Sep 18, 2017

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

@EQuimper

This comment has been minimized.

EQuimper commented Sep 18, 2017

@beholderrk

This comment has been minimized.

beholderrk commented Sep 19, 2017

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

@ramya-rao-a

This comment has been minimized.

Member

ramya-rao-a commented Sep 21, 2017

@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

This comment has been minimized.

EQuimper commented Sep 22, 2017

@ramya-rao-a thank you :)

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.