Unable to find the registered languages while saving the file - visual-studio-code

Steps to Reproduce:
1.Create a new sample project by selecting New Language support.
2.Now add the following code in package.json to register 3 new languages.
"languages": [
{
"id": "db2_z",
"aliases": ["Db2Z"],
"extensions": [".spsql", ".sql",".z"],
"configuration": "./language-configuration.json"
},
{
"id": "db2_i",
"aliases": ["Db2i"],
"extensions": [".spsql", ".sql",".i"],
"configuration": "./language-configuration.json"
},
{
"id": "db2_luw",
"aliases": ["Db2Luw"],
"extensions": [".spsql", ".sql",".luw"],
"configuration": "./language-configuration.json"
}
]
3.Now when I run the extension it displays only one language type while saving. But while selecting the language mode it shows three languages.
Please check the attached screenshots.
But while saving we can see only one language.
I tried all the things but unable to figure out the problem.
Thanks.

According to language overview
"You can add new file extensions to an existing language with the files.associations setting."
"files.associations": {
"*.php4": "php",
"*.php5": "php"
}
"files.associations": {
"**/somefolder/*.*": "php"
}

Related

How to create a new panel section in Visual Studio Code using extension

How can I create a panel section like the one that Gitlens has (see the screenshot below)? I've looked over the documentation and the Github examples presented here and I could not find anything on how to create this.
I want to have a button there next to TERMINAL and when I press on it to present a webview.
I have managed to do this by creating a viewContainer in the contributes object.
"viewsContainers": {
"panel": [
{
"id": "myPanel",
"title": "Colors",
"icon": "images/views/history.svg"
}
]
},
and then I create a view that uses the viewContainer.
"contributes": {
"views": {
"myPanel": [
{
"type": "webview",
"id": "calicoColors.colorsView",
"name": "Calico Colors"
}
]
},

How to add configurations to user to a VSCode extension

I am trying to add a simple configuration to my VSCode extension, but I can't find the correct information.
I just want that the user have a string input field, that has a default value, and read it from my typescript code through the vscode library
Can someone provide me and example about which file should I add, where, and how to consume? also if more configurations are needed.
Thanks!
Ok, found
I need to add into my package.json
...
"contributes": {
"commands": [
...
],
"configuration": {
"title": "My Extension",
"properties": {
"myExtension.myProperty": {
"type": "string",
"default": "default",
"description": "description"
}
}
}
},
and consume
vscode.workspace.getConfiguration('myExtension').myProperty;

How to use multiple tmLanguage files in vscode extension

I am creating a language extension in vscode for myself. Because it will associate with different file types, I plan to make different tmlanguge files for specific rules. According to this, I could extend the scopeName to achieve that.
So I created in my ./package.json files something like this:
{
"name": "tst",
"displayName": "Test Language",
"description": "A test for language extension",
"version": "0.0.1",
"engines": {
"vscode": "^1.34.0"
},
"contributes": {
"languages": [{
"id": "tst",
"aliases": ["Test", "tst"],
"extensions": [".tst",".type1",".type2"],
"configuration": "./language-configuration.json"
}],
"grammars": [{
"language": "tst",
"scopeName": "source.tst",
"path": "./syntaxes/tst.tmLanguage.json"
},
{
"scopeName": "source.tst.type1",
"path": "./syntaxes/type1.tmLanguage.json"
},
{
"scopeName": "source.tst.type2",
"path": "./syntaxes/type2.tmLanguage.json"
}]
}
}
Then I create the base rules in ./syntaxes/tst.tmLanguage.json and both .type1 and .type2 have been applied with my grammars.
{
"name": "Test",
"patterns": [
{
"match": "test",
"name": "constant.character"
}
],
"scopeName": "source.tst"
}
Afterwards I also make ./syntaxes/type1.tmLanguage.json something like this:
{
"name": "type1",
"patterns": [
{
"match": "type1",
"name": "constant.language"
}
],
"scopeName": "source.tst.type1"
}
Nothing works for any rules in .type1.
I hope both file in the picture can recognize test and type1.
I checked the vscode pre-installed cpp language extension.
They also use scopeName for source.c and source.c.platform.
I guess it is for the similar purpose?
Did I overlook something?
Thanks for the help.
If you want to use these scopes from different tmLanguage files in the main grammar, you have to explicitly include them:
{
"name": "Test",
"patterns": [
{
"match": "test",
"name": "constant.character"
},
{
"include": "source.tst.type1"
},
{
"include": "source.tst.type2"
}
],
"scopeName": "source.tst"
}
Regarding the built-in cpp extension and platform.tmLanguage.json - as far as I can tell, it's not actively being used by the c and cpp grammars. There's this comment in cpp/build/update-grammars.js:
// `source.c.platform` which is still included by other grammars
So that sounds more like a backwards-compatibility measure in case any third-party grammars still use it.

How can I author a Snippet Collection to multiple languages in VSCode Marketplace?

My goal is to create a collection of Snippets that will be available in the VSCode Marketplace. These snippets will be for 3 languages (html, css, and JS). This will be helpful for anyone who works on the specific framework, but especially my team.
I know that I can scope snippets (How can I add language-agnostic snippets in vscode?) to multiple languages. I also know that according to the docs I'm supposed to have a contributes object that has a snippets array in it. In my package.json for my vsc-extension the default is like the below:
"contributes": {
"snippets": [
{
"language": "markdown",
"path": "./snippets/markdown.json"
}
]
}
Is it correct for me to then update my package.json to something like:
"contributes": {
"snippets": [
{
"language": "html",
"path": "./snippets/snippets.json"
},
{
"language": "javacript",
"path": "./snippets/snippets.json"
}
]
}
and then have my snippets declare their own scope ("scope": "html")?
The way I went about this was to create a file for each type of snippet: php-snippets.json, js-snippets.json, etc. and then add those files to the snippets array.
"contributes": {
"snippets": [
{
"language": "php",
"path": "./snippets/php-snippets.json"
},
{
"language": "javascript",
"path": "./snippets/js-snippets.json"
}
]
}
One piece of information I left out from my question is that I used the Yo generator to create my snippet project. This was the recommended action in the documentation.
This worked. I added several languages to the snippets array in contributes as seen below.
"contributes": {
"snippets": [
{
"language": "html",
"path": "./snippets/snippets.json"
},
{
"language": "javacript",
"path": "./snippets/snippets.json"
}
,
{
"language": "scss",
"path": "./snippets/snippets.json"
}
]
}
Then inside snippets/snippets.json there is one large object that contains all of my snippets. You can see an example of that below. The key lines for each are "scope": "html and "scope": "scss".
"Each Helper": {
"scope": "html",
"prefix": "each",
"body": [
"{{#each $1}}",
" $2",
"{{/each}}"
],
"description": "Creates each helper -- handlebars"
},
"Break Point Small": {
"scope": "scss",
"prefix": "bps",
"body": [
"",
"#include breakpoint(\"small\") {// 551px and up",
" $1",
"}"
],
"description": "Tablet Break Point --Stencil"
},
I suppose I should have just tried it after not being able to find the answer here or in documentation.

Theme syntax color for custom language in VS Code

I was able to successfully add basic language support for ColdFusion in visual studio code and for the most part it seems to work properly.
The only issue is that the syntax highlighting does not work at all, specifically the colorization. Otherwise the file extension association works and bracket highlight works and even the commenting rules work.
I used the yo code generator to create the new language.
I got the .tmLanguage file from here:
https://github.com/textmate/coldfusion.tmbundle
I feel like there must be a step I'm missing in order to get the new language to work with the theme being used.
Thanks in advance!
EDIT: added package.json
{
"name": "cf",
"displayName": "ColdFusion",
"description": "ColdFusion VSCode Support",
"version": "0.0.1",
"publisher": "epetti",
"engines": {
"vscode": "^0.10.1"
},
"categories": [
"Languages"
],
"contributes": {
"languages": [{
"id": "coldfusion",
"aliases": ["ColdFusion", "coldfusion"],
"extensions": [".cfm",".cfml",".cfc"],
"configuration": "./coldfusion.configuration.json"
}],
"grammars": [{
"language": "coldfusion",
"scopeName": "text.html.cfm",
"path": "./syntaxes/coldfusion.tmLanguage"
}]
}
}