Complete Emmet 2.0 support

[ramya-rao-a]

Contd. from #21943

Emmet Actions:

• Increment/Decrement by n
• Evaluate Math Expression
• Toggle Comment
• Multi cursor support for Wrap with abbreviation and Expand abbr commands Wrap with abbreviation and Expand abbr commands do not work with multiple cursors #27621

Port current Emmet customizations to the new model:

• Emmet: Expand Abbreviation command in languages that are not supported by emmet explicitly like php 1.13.0 | New Emmet expansion suggestions don't honor emmet.syntaxProfiles setting #28286
• Port customization of output profile
• Port customization of variables in emmet snippet. In new emmet, this will be via a new setting emmet.variables
• Port the use of emmet.extensionsPath for custom variables and profiles "emmet.extensionsPath" incompatible with "emmet.useNewEmmet": true #28465
• Port the use of emmet.exlcudeLanguages

Optimize Emmet expansions

• Use right language in case of embedded language. For eg: <style> block in html should use css Emmet css abbreviation not expanded in style block in html file #28039
• Use regex to filter out invalid abbreviations. Invalid emmet abbr returns weird expanded value in css files #27628 and Emmet resolves invalid format #27975
• Dont provide emmet suggestion inside the html tag or inside css selectors New Emmet completes html attribute as tag #28829
• Use VS Code specific stream reader for more efficient html and css parser
• Enable language extensions to call emmet completion provider Enable language extensions to call emmet completion provider #29114

Others:

• Add typings

Deferred Emmet Actions:

• Update Image Size (Pending resolution of Pull image-size and locate-file out of atom-plugin and into their own module emmetio/atom-plugin#21)
• Reflect CSS Value (No re-usable module from emmet yet. We should probably do this on our own)

[Fred-Vatin]

Just to be sure the follow will be considered.

Currently, users need to assign custom keybinding to Emmet commands to use it in a efficient workflow.

Question 1

I see among the available commands that Emmet has 2 flavors for some of them such as:

emmet.nextEditPoint
editor.emmet.action.nextEditPoint

Do they refer to new vs old emmet implementation? Witch one to use in future?

Question 2

If user set this custom keybinding

// Increment Number by 1
  {
      "key": "ctrl+up",
      "command": "editor.emmet.action.incrementNumberByOne",
      "when": "editorTextFocus && !editorReadonly"
  }

What would be the way to only enable this keybinding according to context (when emmet can effectively use this command)?

This would allow user to use the same keybinding for anything else or keep the default one working when the emmet context if FALSE (typically in this case: not in emmet supported language && caret not around numbers).

// Default VSC keybinding that could keep working even with the custom emmet set by user
{
  "key": "ctrl+up",
  "command": "scrollLineUp",
  "when": "editorTextFocus"
}

[ramya-rao-a]

@freMea

To your first question:

• When emmet.useNewEmmet is set to false, editor.emmet.action.nextEditPoint uses old implementation and emmet.nextEditPoint uses the new one
• When emmet.useNewEmmet is set to true, editor.emmet.action.nextEditPoint calls emmet.nextEditPoint internally
• Eventually (some time when we deprecate the setting emmet.useNewEmmet and make the new implementation the default), you will have only editor.emmet.action.nextEditPoint which will use the new implementation

This is done so that users who have keybindings to the editor.emmet.action.... don't have to change their key bindings

To your second question:

The when clause can work on file types as well. So you can add resourceLangId == html and restrict few of the emmet commands based on file type. See https://code.visualstudio.com/docs/getstarted/keybindings#_when-clause-contexts

I don't think using cursor position is possible in the when clause.

Hope that helps

[Fred-Vatin]

@ramya-rao-a

Thanks for your answers.

The problem with editorLangId in when clause is that you must duplicate your keybinding as many times as there are languages to restrict.

It could be partially solved if when clause supported OR operator such as:

"when": "editorTextFocus && ( (editorLangId == html) || (editorLangId == css) || (editorLangId == js) || (editorLangId == xml) )"

But it wouldn't be as powerful and smart as a contextual Boolean state of command at caret position (instead of language used by file). It would allow using same keybinding for different commands in the same file depending on emmet context.

[nanaasumadu]

@ramya-rao-a

The new Emmet does not work in php document with embedded html. Can PHP be added to the supported language??

A test case.

1. Create standard html document.
2. Change the extension from html to php
3. Insert HTML element and child elements using emmet format.

[ramya-rao-a]

@nanaasumadu Have you tried adding the below setting?

"emmet.syntaxProfiles":{
"php": "html"
}

[nanaasumadu]

@ramya-rao-a

No, it doesn't work.

• VSCode Version: 1.14.0-insider (1.14.0-insider), 2017-06-22T05:29:25.846Z

• OS Version: MacOS 10.12.5

• settings.json file:
  "emmet.useNewEmmet": true,
  "emmet.syntaxProfiles": {
  "php": "html"
  },

Steps to Reproduce:

1. Create a new file with .php as extension.
2. Try to insert HTML elements using emmet syntax.

[ramya-rao-a]

@nanaasumadu Can you try reloading VS Code after you added the syntaxProfiles setting?

[nanaasumadu]

@ramya-rao-a

Yes, I have reloaded VS Code and still does not work.

[ramya-rao-a]

@nanaasumadu It works fine for me. Can you check if the language mode of your file?

@jens1o Can you give it a try? i.e Set the below, reload VS Code and see if you get emmet autcompletions in a php file?

"emmet.syntaxProfiles": {
"php": "html"
}

[nanaasumadu]

@ramya-rao-a

The language mode is set to PHP. If I change the language mode to HTML, emmet auto-completion works but there is no syntax highlighting for PHP.

[ramya-rao-a]

@nanaasumadu To ensure that no other extensions is interfering here, can you run code-insiders --disable-extensions and try again?

[nanaasumadu]

@ramya-rao-a

Done that and still doesn't work.

The only option left for me now is to completely re-install code-insiders.

Something definitely is not right.

BTW this is my complete settings.json file:

// Place your settings in this file to overwrite the default settings
{
"code-runner.runInTerminal": false,
"code-runner.enableAppInsights": false,
"code-runner.clearPreviousOutput": true,
"code-runner.executorMap": {
"javascript": "node",
"java": "cd $dir && javac $fileName && java $fileNameWithoutExt",
"c": "cd $dir && gcc $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt",
"cpp": "cd $dir && g++ $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt",
"objective-c": "cd $dir && gcc -framework Cocoa $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt",
"php": "php",
"python": "python",
"perl": "perl",
"ruby": "ruby",
"go": "go run",
"lua": "lua",
"groovy": "groovy",
"powershell": "powershell -ExecutionPolicy ByPass -File",
"bat": "cmd /c",
"shellscript": "bash",
"fsharp": "fsi",
"csharp": "scriptcs",
"vbscript": "cscript //Nologo",
"typescript": "ts-node",
"coffeescript": "coffee",
"scala": "scala",
"swift": "swift",
"julia": "julia",
"crystal": "crystal",
"ocaml": "ocaml",
"r": "Rscript",
"applescript": "osascript",
"clojure": "lein exec",
"haxe": "haxe --cwd $dirWithoutTrailingSlash --run $fileNameWithoutExt",
"rust": "cd $dir && rustc $fileName && $dir$fileNameWithoutExt",
"racket": "racket",
"ahk": "autohotkey",
"autoit": "autoit3",
"html": "/usr/bin/open -a Opera"
},
// "debug.inlineValues": true,
"deploy": {
"clearOutputOnStartup": true,
"openOutputOnDeploy": false,
"showDeployResultInStatusBar": true
},
"editor.rulers": [
200
],
"editor.autoIndent": true,
"editor.cursorStyle": "line-thin",
"editor.wordWrap": "on",
"editor.minimap.enabled": true,
"editor.minimap.renderCharacters": true,
"editor.dragAndDrop": true,
"editor.renderIndentGuides": true,
"editor.formatOnType": true,
"editor.fontLigatures": true,
"editor.formatOnPaste": true,
"editor.formatOnSave": true,
"editor.tabCompletion": true,
"editor.fontFamily": "FiraCode-Retina",
"editor.fontSize": 16,
"editor.snippetSuggestions": "top",
"emmet.useNewEmmet": true,
"emmet.syntaxProfiles": {
"php": "html"
},
"explorer.openEditors.dynamicHeight": true,
"explorer.openEditors.visible": 0,
"files.exclude": {
"/.git": true,
"/.svn": true,
"/.DS_Store": true,
"/.awestruct": true,
"/.sass-cache": true,
"/_developer-materials": true,
"/_downloads": true,
"/_tmp": true,
"/_specs": true,
"/_site": true,
"/_products": true,
"/_projects": true,
"/node_modules/": true,
"/tmp/": true
},
"files.autoSave": "onFocusChange",
"files.trimTrailingWhitespace": true,
"files.associations": {
".bashrc": "shellscript"
},
"files.hotExit": "onExitAndWindowClose",
"html.format.indentInnerHtml": true,
"html.format.wrapAttributes": "auto",
"html.validate.scripts": true,
"html.validate.styles": true,
"path-intellisense.autoSlashAfterDirectory": true,
"php.suggest.basic": false,
"php.validate.executablePath": "/usr/local/bin/php",
"php.validate.enable": true,
"php.validate.run": "onType",
// "[php]": {
// "editor.formatOnSave": false
// },
"search.useRipgrep": true,
"search.useIgnoreFilesByDefault": true,
"vim.easymotion": true,
"vim.incsearch": true,
"vim.useSystemClipboard": true,
"vim.useCtrlKeys": true,
"vim.hlsearch": true,
"vim.insertModeKeyBindings": [
{
"before": [
"j",
"j"
],
"after": [
""
]
}
],
"vim.otherModesKeyBindingsNonRecursive": [
{
"before": [
"",
"d"
],
"after": [
"d",
"d"
]
},
{
"before": [
""
],
"after": [],
"commands": [
{
"command": ":nohl"
}
]
}
],
"vim.leader": "",
"vim.handleKeys": {
"": false,
"": false
},
"window.restoreFullscreen": false,
"workbench.sideBar.location": "right",
"workbench.editor.showTabs": false,
"workbench.colorTheme": "Quiet Light",
"workbench.iconTheme": "vs-seti",
"workbench.editor.tabCloseButton": "left",
"window.newWindowDimensions": "inherit",
"workbench.activityBar.visible": false,
// "telemetry.enableCrashReporter": false,
// "telemetry.enableTelemetry": false,
"terminal.external.osxExec": "iTerm.app",
"terminal.integrated.fontFamily": "FiraCode-Retina",
"terminal.integrated.fontSize": 14,
"terminal.integrated.confirmOnExit": true,
"typescript.referencesCodeLens.enabled": true,
"window.nativeTabs": true,
"workbench.editor.closeOnFileDelete": false,
"workbench.editor.revealIfOpen": true,
"workbench.editor.swipeToNavigate": true,
"workbench.welcome.enabled": true,
// "workbench.colorCustomizations": {
// "statusBarBackground": "#451879",
// "editorWhitespace.foreground": "#808080",
// // "editorCursor.foreground": "#00FFFF"
// // "editorLineNumber.foreground": "#AA3731"
// },
"zenMode.hideStatusBar": true,
"zenMode.hideTabs": true,
"zenMode.fullScreen": false,
"vim.disableAnnoyingNeovimMessage": true,
"window.zoomLevel": 0,
"window.openFilesInNewWindow": "off",
"workspace": {}
}

[nanaasumadu]

@ramya-rao-a

I have re-installed vscode insider and the problem still persist.

[jens1o]

@ramya-rao-a
Sure, I'll try that.

Result:

It works. But...

• when I write a php tag, it annoys.
• it does not work in nowdoc nor heredoc

... will create a new issue for each one.

[jens1o]

created #29318 and #29320

[nanaasumadu]

@ramya-rao-a

Thanks the issue has been resolved for me.

The followed the steps below:

1. Backed up my settings.json file.
2. Uninstalled Code Insider
3. Removed "~/Library/Applications Support/Code Insider"
4. Removed "~/.code-insider/extensions" directory
5. Re-installed vscode-insider
6. Restored my settings.json
7. Created test.php file and testing emmet expansion (that works)
8. Re-installed extensions (emmet expansion continues to work)

[Fred-Vatin]

@ramya-rao-a

Good job. Thanks for your hard work for Code 1.14.0.

[ramya-rao-a]

Thanks @freMea and Happy Coding!