Is there any way in VS Code to highlight files that change regarding to svn?
Git style, so I can see the change status of my files on the fly.
I am used to using native extension with Git and it highlights modified files by default.
I am using SVN extension from johnstoncode.svn-scm.
It seems this feature is experimental so far. To enable SVN status in your file explorer:
Open the file: <vscode path>\resources\app\product.json
Find extensionAllowedProposedApi
Append "johnstoncode.svn-scm" in the array
For example, change:
{
"extensionAllowedProposedApi": [
"ms-vsliveshare.vsliveshare"
]
}
to
{
"extensionAllowedProposedApi": [
"ms-vsliveshare.vsliveshare", "johnstoncode.svn-scm"
]
}
Source: official docs of the extension
Related
In VsCode I am using Cypress with Cucumber preprocessor.
I have installed Cucumber (Gherkin) Full Support v2.15.2 plugin. The problem is, the lines from feature files are not recognized - not referencing to the code itself.
My feature files are placed under:
app/cypress/e2e/features/**/*.feature
and step definitions are in:
app/cypress/support/step_definitions/**/*.js"
I also tried to edit the settings.js (placed under C:/Users AppData) for cucumber:
{
"cucumberautocomplete.steps": [
"support/step_definitions/**/*.js"
],
"cucumberautocomplete.syncfeatures": "e2e/features/**/*.feature"
}
also tried with full path, e.g. app/cypress/support... but still not working. All lines in feature files are underlined with warning - Unable to find step for "And do something..."
ok, for anyone who is struggling with this issue, this worked for me:
in C:\Users\Username\AppData\Roaming\Code\User\settings.json just put:
{
"cucumberautocomplete.steps": [ "cypress/support/step_definitions/**/*.js"],
"cucumberautocomplete.syncfeatures": "cypress/e2e/features/**/*.feature"
}
change it to your path, but the issue was, I need to use full path including cypress. After that restart VSCode and the referencing works.
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 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.
Is it possible to ignore my CSS path, beacuse I only use stylelint for SCSS validation?
e.g. - I have the following structure:
assets/
css/
scss/
How can I disable the css/ folder from being indexed, trough the settings.json file of VSCode?
I found this in the docs, but I don't know how to implement it in VSCode.
If you're using the VS Code stylelint extension, you can specify ignore paths via the stylelint.configOverrides setting.
Add the following to your VS Code settings.json file:
"stylelint.configOverrides": {
"ignoreFiles": "assets/css/**"
}
Alternatively you can add a .stylelintignore file to the root folder of your project and add the ignore paths there:
assets/css/**
I'm using stylelint#9.2.0 with vscode-stylelint#0.20.4, and for me the .stylelintignore file is not being respected. If i use the CLI it is respected but the vscode plugin does not seem to do this correctly.
Similar to Jack Russell, I found that the VS Code stylelint plugin currently seems to ignore the .stylelintignore file.
To get around this limitation, I removed the .stylelintignore entirely and moved its settings into .stylelintrc instead. I.e. from something like this in .stylelintignore:
ignorethisfolder/**/*
path/to/ignorethisfile.css
To something like this in .stylelintrc:
"ignoreFiles": [
"ignorethisfolder/**/*",
"path/to/ignorethisfile.css",
]
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 -.