customizing VSC formatting on Save - visual-studio-code

I have an existing PHP codebase where methods are formatted:
public function myIssue() {
// some code...
}
VSC changes this on save to:
public function myIssue()
{
// some code...
}
Is there some way I can turn off this specific VSC formatting rule from occurring on save and allow all the other formatting changes VSC suggests to still occur?

Not the answer you are looking for but an explanation from vscode's perspective:
Visual studio code is implementing what is called a PSR coding style and is considered to be the standard for PHP. As you can see over at the documentation at 4.1 (functions), it mentions that:
The opening brace MUST go on its own line, and the closing brace MUST
go on the next line following the body.

Related

configure prettier to push curly braces on new lines & not clear empty lines

I am using prettier with VSCode, How can I configure it to format my code like this :
function test()
{
if()
{
MYCODE GOES HERE;
}
}
I want the { and } on new lines, and an empty line after { and before }.
Currently, it moves the curly brackets to same lines if condition or function name, and also remove the empty lines after/before { and }.
Prettier is considered an " opinionated " formatter, which means it doesn't let you choose things like that. If you want more control over the formatting, you can use a different formatter.
The built-in VS code formatter allows you to do what you're looking for, just search the settings for " function new line " and similar options.
There are of course many other formatting extensions available in the VS code marketplace as well. Whichever you choose, you will have to select it has your default formatter in your VS code settings.
As mentioned in this answer, VS Code's formatter itself works quite well, but if you want this to be part of workflow, then using ESLint might make things easier. There's a rule called brace-style.
You can then run eslint ./path/to/your/file --fix to format your code, or eslint . --fix to format code in the entire project directory.
Disclaimer: I use ESLint for code formatting most of the time and it works for me. I actually use it to find & fix problems too so it's like killing two birds with one stone, but note that ESLint is more about finding problems in the code and fixing them, so using ESLint just for code formatting might not be the best idea.

Why does VS Code break my Markdown fenced code blocks?

I'm creating a markdown document with some CSharp code blocks. Here's a sample:
Next, it feeds the strings to the regular expression matcher to produce a sequence of matches.
```csharp
let patternMatch = azimuthEncoderRegex.Match(message)
```
In the editor, this seems to be working nicely, like so:
As you can see, the code is formatted as expected and shows up correctly formatted in the preview window (not shown).
Now, when I save my file, the above text instantly changes to this:
If I use search-and-replace to change all the code specifiers back, the same thing happens. This breaks the code formatting!! The entire file is also re-flowed to remove all the line breaks I put in (that may be a clue).
UPDATE: I noticed that all of the reference-style hyperlinks were also removed from the end of the document, causing data loss.
WTF? Why is VS-Code doing this? I've tried disabling the Markdown extensions and the same thing happens. Any ideas, please?
Resolved by a change in settings.json for VS Code:
{
"pandocFormat.command": "pandoc --standalone --atx-headers --wrap=auto --columns=80 -f markdown-auto_identifiers -t markdown-simple_tables-multiline_tables-grid_tables-auto_identifiers-fenced_code_attributes --reference-links"
}
Thanks and credit to monofon (the author of the VS Code extension, based on Pandoc) for steering me to this solution.

How to stop curly brace on new line when formatting the code

I am using VSCode and have installed phpfmt PHP formater extension. When I hit the format code option, the cruly braces of functions and classes are set to new line. I have practice of adding curly brace on the same line and I want the same to be done by the formater.
What I want is:
public function abc () {
}
What PHP formater does is:
public function abc ()
{
}
It works for me:
"phpfmt.psr2": false,
This option is enabled by default and and as written in this standard:
Opening braces for methods MUST go on the next line
"phpfmt.exclude": ["AllmanStyleBraces"]
It is coming default as you are looking for. Try to add formate extensions. Look for PHP phpcs extension.
If it is not working than reinstall your visual studio code again.

When folding a line in VS Code is it possible to override the indentation and choose which lines are included in that fold?

Is it possible to customize the way code folding works in Visual Studio Code?
I use a common pattern of defining regions of code across a variety of different document types.
So, for XML I wrap sections of text with <!-- #region --> and <!-- #endregion -->
For c#, I use #region to #endregion,
For TypeScript/Javascript, I use /* #region */ and /* #endregion */.
In full Visual Studio (not VS Code), I have a custom extension which snoops for the pattern across document types, and creates folds based on that, allowing me to create neat, custom document outlines. I'd like to use the same pattern in Visual Studio Code. Is it possible to create a custom VS Code extension which detects these comment patterns, and somehow tags folds based on the patterns?
FoldingRangeProvider can be used if you are looking to contribute custom folding logic in an extension.
Be sure to set your VS Code version in engines in package.json to 1.23, the version that introduced this.
Here's how you'd use one.
export function activate(context: ExtensionContext) {
languages.registerFoldingRangeProvider({ scheme: 'file', language: 'markdown' }, new MyFoldingRangeProvider());
}
class MyFoldingRangeProvider implements FoldingRangeProvider {
provideFoldingRanges(document: TextDocument, context: FoldingContext, token: CancellationToken): FoldingRange[] {
return detectRanges().map(({ lineStart, lineEnd }) => new FoldingRange(lineStart, lineEnd));
}
}
On August 6th 2022 the feature "Fold Selection" was added to "V.S. Code" as part of the sem-minor v1.70.0 release. This new feature gives users complete control over line folds, by total I mean, when & where. Fold Selection allows you to fold whatever code you want, wherever you want.
Below is a GIF image that was appended to the official v1.70.0 release notes
I copy & pasted this image because..,
A. The image shows how the new feature works, and...
B. because it shows that the feature works much like line folding does in IDEs — i.e. VS-22, Intelli-J, CLion, etc...
V.S. Code is actually the first editor I ever used, and I stuck with it for the last 5 years, but one thing I noticed on day 1 of test driving V.S. Code was that it did not have this feature.
Using the new Fold Selection Feature
You can use the feature via the quick input, just type "Fold Selection" until the option pops up for you to select, however, I perfer customizing a keybinding for it.
Here is the default configuration for fold selection in the default keyboard shortcuts JSON document:
{
"key": "ctrl+k ctrl+,",
"command": "editor.createFoldingRangeFromSelection",
"when": "editorTextFocus && foldingEnabled"
}
How to configure the above snippet is beyond the scope of this post, but I suggest keeping the when statement as it is configured above (which is the default).
You can use the keybinding shown in the JSON snippet w/o any configuration, which would be:
CTRL + K CTRL+,
...however, vscode has to attach most all commands to some keyboard shortcut. Most people cannot remember all of the commands and shortcuts, so for features you use often, it makes since to attach it to more practicle option, I like to use something like
CTRL + SHIFT + SPACE SPACE
Its almost like quickly pressing space twice.
Anyways, this is a far better option than what was available before, cheers!
CLICK HERE TO READ THE OFFICIAL RELEASE NOTES
There are three ways to achieve customized folding in a VSCode extension.
You can define regex as folding markers in a [language-name].configuration.json file. (However, we don't have much customization with this approach)
{
"folding": {
"markers": {
"start": "starting regex",
"end": "ending regex"
}
}
}
You can define a FoldingRangeProvider from within the extension as described in this answer. FoldingRange in vscode package supports folding customization with startLine, endLine, and foldingKind.
You can use Language Server support with textDocument/foldingRange. FoldingRange in the vscode-languageserver-protocol supports folding customization with startLine, endLine, startCharacter, endCharacter, and foldingKind.
Check this for more details.
Unfortunately, not at the moment. There is a an open issue in github for this very topic.

How can I customize comment block characters in Visual Studio Code?

I created a language extension for Visual Studio Code and I would like to change the comment block characters, but I couldn't find a way to do so..
How can I do it?
OK, I finally figured out what the problem was.
There are two ways you can change the comment blocks:
1. Configuration file
I don’t know why it's not in the documentation (or at least I couldn't find it), but there is an optional property you pass to the object inside the contributes.languages array in the package.json file named configuration.
The description found on the Visual Studio Code source code:
A relative path to a file containing configuration options for the
language.
In those files you can create an object like this one and it's going to overwrite the default comment characters
{
"comments": {
"lineComment": "//",
"blockComment": [ "<!--", "-->" ]
}
}
You can see this properties on the API references: CommentRule
Note: That comment block command is triggered with a different shortcut. You can overwrite it though (in a general or even for a specific language using the property when on the key binding object).
⇧⌥A - Toggle Block Comment - editor.action.blockComment
Key Bindings for Visual Studio Code
2. "Syntax" file .tmLanguage
Yes, you can do it from there too and you can make it even better.
You can see an example on vscode-handlebars/syntaxes/handlebars.tmLanguage.
Try deleting the Babel extension if you are using the Visual Studio Code editor. It worked for me.