What I want to do is tell Visual Studio Code to associate all files containing the word "Dockerfile" in their filename with the Dockerfile language to get the syntax highlighting. According to this site the language is just called "Dockerfile", so I added the following entry to settings.json:
"files.associations": {
"*Dockerfile*": "Dockerfile"
}
But all that happened was that now even the standard Dockerfiles are no longer associated with their respective language. What am I doing wrong?
The language identifier for Dockerfile is a lower-case dockerfile as stated on https://code.visualstudio.com/docs/languages/identifiers. Hence, you need to adjust your snippet as follows:
"files.associations": {
"*Dockerfile*": "dockerfile"
}
Related
I installed Beautify extension to VSC, however, I could not find .jsbeautifyrc file to set some options. For example, I want to set "brace_style" to ""collapse,preserve-inline". How can I change extension's parameters?
you can create your own .jsbeautify file in your project directory or any containing folder. Please refer to this link for an example file: https://gist.github.com/wzup/fc3254562236c1ec3f69
Here you can also see some of the parameters which you can change. In your case:
{
"html": {
"brace_style": "collapse"
}
}
I have a .envDEV file name that I use for development environment variables.
And VSCode is not recognizing it as a dotenv file.
If I change the language mode for the file, it seems to work (the proper styles are applied, 'though the icon won't change). But it goes away whenever I close and re-open the file.
I'm trying to set a custom file association for this, but without success so far.
seetings.json
"files.associations": {
"*.envDEV": "dotenv" // DOES NOT WORK
"*.envDEV": ".env" // DOES NOT WORK
},
Does anybody know how to do this?
By default .env files have a language id of plaintext, but vscode does something special with it to assign a different icon. The only way I've been able to accomplish what you're asking for is with an icons extension.
The dotenv extension adds syntax highlighting and the dotenv language id to all your .env variant files. Pair that with the vscode-icons extensions, and it changes the icon to the gear that the basic .env file has.
With just the icons extension, you can use the properties file association and that works as well, just add the following to settings.json:
"files.associations": {
"*.env": "properties"
}
With the dotenv extension this works:
"files.associations": {
"*.env*": "dotenv" // THIS WORKS NOW
}
If you don't want to install a separate extension you can set language mod for .env file as makefile or python to get syntax highlighting and # comment support.
"files.associations": {
".env*": "makefile" // or "python"
}
I am wonder, if it is way how to enable autocompletion for WDIO global variables ( $, $$, browser ) in VSCode. I know, that wdio has support for Webstorm, but it doesn't work for VSCode.
Any idea, how to use autocompletion in VSCode? Without it is pretty hard to create some tests.
I struggled with this as well. Firstly, ensure you've followed the "Autocompletion" Setup described on the website; for example, they require something like the following exist in a file called jsconfig.json at the root of your project:
{
"include": [
"**/*.js",
"**/*.json",
"node_modules/#wdio/sync",
"node_modules/#wdio/mocha-framework"
]
}
You may already have a jsconfig.json; if so, ensure that the node_modules directories are not in a section called "exclude": { ... }. When setting up other things like Babel (for mocha) this may get installed as a default configuration entry. When node_modules is in both include and exclude, exclude takes precedence.
I had zero success importing npm #types pacakges, adding typeAcquisition: {} to jsconfig.json, or adding interface browser; into the file global.d.ts as other people have suggested in various forums.
Auto completion is pre-installed on vs code. If it is not working you might want to check through extension and install. And to use, once the open tag is created, it often auto suggest, just do appropriately then input your attribute.
I would like to create my own extension that would provide predefined configuration for debugger (launch.json) and a predefined set of tasks (tasks.json).
Right now I have vs code configured in those 2 files but there are lot of hardcodes in many places that will vary across different projects. So ideally I would like to have a plugin that eg reads one configuration file and applies all that stuff to "tasks.json" and "launch.json".
Wondering if that's even possible with vs code extensions API.
I think you can do this with variables defined in settings.json. You can define your own custom settings in settings.json (either user or workspace settings):
{
"editor.formatOnSave": false, // normal settings defined by the editor and plugins
"foo.bar": "baz" // custom setting
}
You can then reference this setting inside tasks.json or launch.json using string interpolation as "${config.foo.bar}".
I'm not sure where this is documented, but I found a reference to this in https://github.com/Microsoft/vscode/pull/11291
Update:
I've created a test repo at https://github.com/boyvinall/vscode-c-dbg. When I invoke the "run" task within tasks.json, I get the following output:
Using through launch.json with my current configuration doesn't seem to work with the "gdb" configuration, although the "cppdbg" configuration does seem to work ok:
NB, in case it's important, I'm running vscode v1.8.1
Visual Studio Code:1.15.1
settings.json (.vscode folder current dir)
{
"foo.bar": "baz" // custom setting
}
launch.json (example)
{
"program": "${workspaceRoot}/${config:foo.bar}.exe"
}
I was looking around found it. But it was out date and was trying to figure it out. Until the helper visual studio code hint gave me the information when mouse hover/over the strings.
"${config.foo.bar}"
does not work.
"${config:foo.bar}"
does work.
Is there a way to extend the supported languages/grammars in Visual Studio Code?
I'd like to add a custom language syntax, but I've not been able to find any information on how language services are provided.
Can anybody point to any references or even examples of existing language implementations?
It's possible with the new version 0.9.0. There's an official documentation on how to add a custom language: https://github.com/microsoft/vscode-docs/blob/main/release-notes/v0_9_0.md
You need a .tmLanguage file for the language you want to add. You can find existing files e.g. on GitHub or you can define your own language file. Look here to get an idea of how to create one: http://manual.macromates.com/en/language_grammars
After finding a .tmLanguage file you have two ways to create an extension based on it.
Option 1: Using a Yeoman generator
Install node.js (if you haven't already done)
Install yo (if you haven't already done) by executing npm install -g yo
Install the Yo generator for code: npm install -g generator-code
Run yo code and select New language support
Follow the instructions (define the .tmLangauge file, define the plugin name, file extensions etc.)
The generator creates a directory for your extension with the name of the plugin in your current working directory.
Option 2: Create the directory on your own
Create a directory with the name of your plugin (only lowercase letters). Let's say we call it mylang.
Add a subfolder syntaxes and place the .tmlanguage file inside of it
Create a file package.json inside the root of the extension folder with content like this
{
"name": "mylang",
"version": "0.0.1",
"engines": {
"vscode": ">=0.9.0-pre.1"
},
"publisher": "me",
"contributes": {
"languages": [{
"id": "mylang",
"aliases": ["MyLang", "mylang"],
"extensions": [".mylang",".myl"]
}],
"grammars": [{
"language": "mylang",
"scopeName": "source.mylang",
"path": "./syntaxes/mylang.tmLanguage"
}]
}
}
Finally add your extension to Visual Studio Code
Copy the extension folder to the extension directory. This is:
on Windows %USERPROFILE%\.vscode\extensions
on Mac/Linux $HOME/.vscode/extensions
Restart Code. Now your extension will run automatically everytime you open a file with the specified file extension. You can see the name of the used plugin in the down right corner. You can change it by clicking on the name of the extension. If your extension is not the only one registered for a specific file extension then Code may chooses the wrong one.
To extend Wosi's .tmLanguage answer, using a .tmLanguage file is optional. Using a regular .json is a perfectly valid and—in my opinion—better readable alternative.
For an example, see VSCode_SQF: sqf.json
Inside the package.json, you would only need to change the path from ./syntaxes/mylang.tmLanguage to ./syntaxes/mylang.json.
Using reverse engineering you can add a new language to VSCode. You can take a look on how typescript is implemented as a JavaScript plugin and how it communicates with node.exe via pipe. But it's a hard thing since it's coming all without documentation
I'll provide a really short documentation here:
You can define a new plugin in the plugins folder C:\Users\USER\AppData\Local\Code\app-0.3.0\resources\app\plugins.
Copy the typescript plugin folder and rename mentioned file extensions and language names in all files to your new language, so that your new plugin is going to be used when a .mylang file is opened.
In typescriptServiceClient.js you see that a child process is being forked and that its stdout is coupled to a new WireProtocol.Reader. Bind your own mylanguage.exe (you'll probably need to write that exe on your own). VSCode asks that binary to get more language specific information.
In typescriptMain.js you find the feature registration for the language. Delete every call to monaco.Modes.XXXXXXSupport.register except monaco.Modes.DeclarationSupport.register.
Now open a directory in VSCode that contains .mylang files and open one of them via CTRL+P + FileName. Right click on an identifier and select Go to Definition. VSCode sends now a request like this via StdIn to your exe
{"seq":1,"type":"request","command":"definition","arguments":{"file":"d:/Projects/MyProj/Source/MyFile.mylang","line":45,"offset":9}}
VSCode expects an answer like this:
Content-Length: 251
[LINE BREAK]
{ "seq" : 1, "type" : "response", "command" : "definition", "request_seq" : 1, "success" : true, "body" : [{ "file" : "d:/Projects/MyProj/Source/MyOtherFile.mylang", "start" : { "line" : 125, "offset" : 3 }, "end" : { "line" : 145, "offset" : 11} }] }
If everything works VSCode will open MyOtherFile.mylang and set the cursor to line 124 in column 3.
Try it on your own ;-)
Simplest recipe IMHO as of 2021 Q2:
Follow Option 2 in Wosi's answer. You only need two files to get started. Just create the folder structure directly in your extensions directory.
Set "path": "./syntaxes/your_language.plist" in package.json
Use IRO to build your regexes.
Make sure that in the "Scope Information" screen, anything to do with Textmate is green. Don't worry about the other editors.
Save the contents of the "Textmate" tab into the path above, i.e., .syntaxes/your_language.plist
Reload VSCode
That's it. I also save the IRO (left pane) text into my own project.
You can read the source code of the built-in language extensions online:
https://github.com/microsoft/vscode/tree/main/extensions
You can pick an extension that is close to your language's syntax and change it as you wish. (e.g. you can do some modifications to the JavaScript extension and rebrand it for use with jQuery!)
It is important to note that this would be too much work if you choose a language that is so different from your desired language! If you didn't manage to find a language that is similar to your desired language, you may want to create a whole new extension from the ground up - https://stackoverflow.com/a/32996211/14467698 -.