autocomplete for log should be first console.log

[caub]

I'm using Javascript React language mode by default, since I have jsx code anywhere in my .js files

I often need console.log but typing log then TAB always gives <log><log>, console.log comes in second position, which isn't handy.

since <log> isn't a valid HTML5 tag anyway, (and can't be a component since lower-cased, not even a web-component, is it possible to remove it? I tried to customize this, but didn't find a way

With Javascript language mode, it's fine of course, but as I said, I need Javascript React

• VSCode Version: 1.22.2
• OS Version: Lubuntu 18.04

Does this issue occur when all extensions are disabled?: Yes

[mjbvz]

This suggestion comes from emmet. You can set "editor.snippetSuggestions": "top" to force the log snippet to the top of the list, or disable emmet in javascript react files by setting: "emmet.excludeLanguages": ["javascriptreact"]

Adding @ramya-rao-a to see if there's anything we should tweak about when emmet completions show up

[caub]

@mjbvz Thanks

Talking about Emmet, I'll keep it for tags autocompletion, something else I'd like is that suggestions work both from, for example, div and <div (as I tend to put the < by reflex, sublime text works that way also)

[ramya-rao-a]

I often need console.log but typing log then TAB always gives , console.log comes in second position, which isn't handy.

When I type log in an empty .js file, the first item in the suggestion list is for the console.log snippet

I get the same result even after changing the mode to javascriptreact

Can you share a screen shot where <log></log> from emmet is the first item in the suggestion list and console.log snippet is the second? Also include any emmet related settings you have added.

I am using VS Code version 1.23

[caub]

@ramya-rao-a Thanks, I should have made the captures first sorry

First how it was initially:

Indeed, like you say, console.log comes first, but then, in between lines, the emmet <log> will come as you can see

Second, I put "editor.snippetSuggestions": "top" like @mjbvz suggested, then it works in a convenient way for me:

Full settings:

{
	"explorer.openEditors.visible": 0,
	"editor.tabSize": 2,
	"editor.wordWrap": "on",
	"editor.formatOnSave": true,
	// "eslint.autoFixOnSave": true,
	"javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": false,
	"[javascript]": {
		"editor.formatOnSave": true
	},
	"[json]": {
		// "editor.formatOnSave": true
	},
	"[typescript]": {
		"editor.formatOnSave": true
	},
	"files.associations": {
		"*.js": "javascriptreact"
	},
	"editor.snippetSuggestions": "top",
	"prettier.singleQuote": true,
	"prettier.trailingComma": "all",
	"prettier.printWidth": 110,
	"prettier.requireConfig": true,
	"prettier.ignorePath": "/home/caub/.prettierignore",
	"code-runner.saveAllFilesBeforeRun": true,
	"code-runner.runInTerminal": false,
	"code-runner.clearPreviousOutput": true,
	"code-runner.defaultLanguage": "shellscript",
	"code-runner.enableAppInsights": false,
	"code-runner.showExecutionMessage": true,
	"code-runner.executorMap": {
		"sql": "psql postgres://postgres:pg@localhost:5432/postgres -f",
		"bash": "bash",
		"javascript": "node",
		"javascriptreact": "babel-node --presets ~/.npm-global/lib/node_modules/@babel/preset-env",
	},
	"launch": {
		"version": "0.2.0",
		"configurations": [
			{
				"type": "node",
				"request": "launch",
				"name": "Launch Program",
				"program": "${file}"
				// "cwd": "${workspaceFolder}"
			}
		]
	},
	"editor.multiCursorModifier": "ctrlCmd",
	"docker.showExplorer": false,
	"emmet.triggerExpansionOnTab": true,
	"emmet.syntaxProfiles": {
		"javascript": "jsx"
	},
	"workbench.startupEditor": "newUntitledFile",
	"files.exclude": {
		"**/.git": true,
		"**/.svn": true,
		"**/.hg": true,
		"**/.DS_Store": true,
		"**/package-lock.json": true,
		"**/yarn.lock": true,
		"**/.nyc_output": true,
		"**/coverage": true,
		"**/node_modules": true
	},
	"files.autoSave": "off",
	"git.ignoreLimitWarning": true,
	"explorer.confirmDragAndDrop": false,
	"window.zoomLevel": 0,
	"explorer.confirmDelete": false,
	"search.exclude": {
		"**/node_modules": true,
		"**/node_modules/**": true,
		"**/bower_components": true,
		"**/build": true,
		"**/dist": true
	},
	"extensions.ignoreRecommendations": false,
	"files.watcherExclude": {
		"**/.git/objects/**": true,
		"**/.git/subtree-cache/**": true,
		"**/node_modules/**": true,
		"**/node_modules": true,
		"**/dist": true,
		"**/build": true
	},
	"window.newWindowDimensions": "inherit"
}

[ramya-rao-a]

@mjbvz In the below screenshot, do you know from where is the first entry coming? The second is a snippet.

@caub So the <log></log> is being added only after you hit tab once you are out of the auto-completion mode. This is because of the emmet.triggerExpansionOnTab setting that you have enabled. This makes the tab key trigger emmet. As far as emmet is concerned, any word is a valid abbreviation and so gets expanded to html tags.

You mentioned that lowercase words are not valid react component or web component. Is there any documentation you can point us to that says the same?

[caub]

@ramya-rao-a Thanks, sure:

• User-Defined Components Must Be Capitalized: "When an element type starts with a lowercase letter, it refers to a built-in component like <div> or <span>"
• All lower case JSX tags will now be treated as HTML/SVG elements

Yes, I was using tab for completion, because that's how I like to trigger it. I'm not so familiar with the concept of emmet, even if I tried to learn it. I'd prefer like I said previously, a way to distinguish clearly JSX/HTML completion, by just putting the opening <

example I type:

<foo

then the key for completion (TAB) here, will propose to complete it to <foo>|</foo>

This would really great for me, honestly

_{Thanks again much for this wonderful editor and your efforts}

[ramya-rao-a]

Yes, I was using tab for completion, because that's how I like to trigger it.

Its common to use tab for selecting an item from the auto-completion list, not to trigger the completion itself.

I'm not so familiar with the concept of emmet

In this case, I would suggest to remove the setting emmet.triggerExpansionOnTab

I'd prefer like I said previously, a way to distinguish clearly JSX/HTML completion, by just putting the opening <

Emmet abbreviations don't work that way. For emmet in general see https://emmet.io.

For your purpose, I would suggest the extension auto close tag

[caub]

Thanks, I wish this feature was handled in vscode core, because this extension, after 1 day of intense usage, has some issues, and made vscode process overclock a CPU. I couldn't reproduce those issues deterministically though, when I will, I'll report along with the many other pending issues, and probably try to help

closing. I still wish a more reliable way for tags autocomplete/close in the future

[ramya-rao-a]

@caub In html files we do have the autocomplete the close tag feature coming from the core.
@mjbvz Do you want to consider supporting the same for tags in jsx?

[caub]

Thanks, that would be great, the difficulty can come with typescript generics for example, but it's surely possible to distinguish them with context

[caub]

I'm trying to fix auto-close-tag extension: formulahendry/vscode-auto-close-tag#86

But it's quite nasty to use regexes there, vscode core has surely an AST, and could do this pretty easily

cc: @formulahendry