I'm starting to using VSC and looking for a good formatter for js, jsx, css, html.. etc
Tried several auto-indent extensions for VSC and for now settled with the Prettier, so I have few questions:
How to disable spacing:
on arrow functions to const a=()=>{}; instead const a = () => {};
on } else { to clear one: }else{
on if (), for ()
in function arguments (not important)
...I really hate this useless spacing
plus:
How to refresh file in VSC? (exit without saving + open again - with one button (is it 'revert file', probably..))
How to disable (or setup) amount empty lines between blocks onFormatPrettier (1 by default)
(for devs) Why are there so few settings(for me :) ) in the extension?
Thanks
Modification only
Official answer and "solution"
Related
I´m used to Eclipse, where when you press Ctrl+Shift+C it add two bars to the most left side of the file but keep your indentation (I´m using the Eclipse Keymaps extension for using Eclipse shortcuts), for example:
//Comment here
fn main() {
// Comment here
println!("Hello Stackoverflow!");
// Imagine more indentation here
}
On VS Code comments are handled like this:
//Comment here
fn main() {
//Comment here
println!("Hello Stackoverflow!");
//Imagine more indentation here
}
I don´t like it and it´s a deal breaker for me, I love the editor otherwise.
Is there a way to change this?
I tried a couple of extension for customizing comments and playing around with the settings, but nothing worked for me.
Thank you in advance
I am new to Svelte ( and also to frameworks in general ), I have set up a Svelte project and am trying out a few things.
But the formatting is really distracting me, currently my code gets auto-formatted into this ( Shift + Option + F ):
Is there a way for me to configure this?
I've tried:
adding the prettier key to my package.json
adding settings.json file in the vscode folder with the following:
{
"prettier.tabWidth": 4,
}
In addition to changing the tab size, I'd also like the code in the image above to auto-format to:
config = Object.assign({
mass: 1,
stiffness: 100,
damping: 10,
velocity: 0
}, config);
The template code are also auto-formats to this:
I think it's much easier to read if it was like this:
<FadeIn
from={{ blur: 8, scale: 0.6 }}
config={{ stiffness: 10, damping: 20 }}
>
<p>Hello</p>
</FadeIn>
Please help me if you know how to configure this, thanks!
Regarding your question to "put brace in same line vs put brace in next line": There was an issue regarding this which has been resolved and an option 'braceStyle' has been added, but only for PHP.
| `braceStyle` | `"psr-2"` | If set to `"psr-2"`, prettier will move open brace for code blocks (classes, functions and methods) onto new line. <br> If set to `"1tbs"`, prettier will move open brace for code blocks (classes, functions and methods) onto same line. |
To configure prettier, I use a .prettierrc file in my workspace where I put the configuration.
Ad #name:clitetailor's comment regarding "format svelte files": Did not know which configuration to put into which config file to make prettier-plugin-svelte working, but ended up with installing Svelte VS Code Plugin: jamesbirtles.svelte-vscode. It internally uses prettier-plugin-svelte, and does proper configuration of VS code. Format of svelte files worked immediately after install.
Format single .svelte file in 'vscode' editor.
https://marketplace.visualstudio.com/items?itemName=melihaltintas.svelte-format
Keyboard Shortcuts
mac: cmd+ctrl+p
win: alt+ctrl+p
Sometimes, I add linebreaks to make code more readable, or look more uniform. When applying formatting VSCode removes those again when the code fits on a single line. For example (some Dart code)
double getQuarterValue(String paramName) => isCorrected(paramName)
? state.corrections[paramName].quarterlyValue
: state.selectedReport.issues[paramName].quarterly;
double getYearValue(String paramName) => isCorrected(paramName)
? state.corrections[paramName].yearlyValue
: state.selectedReport.issues[paramName].yearly;
becomes
double getQuarterValue(String paramName) => isCorrected(paramName)
? state.corrections[paramName].quarterlyValue
: state.selectedReport.issues[paramName].quarterly;
double getYearValue(String paramName) => isCorrected(paramName) ? state.corrections[paramName].yearlyValue : state.selectedReport.issues[paramName].yearly;
Is there a way to prevent VSCode from removing line breaks in code statements when formatting? Eclipse, for example, offers an option called Never join already wrapped lines that does exactly that.
Not sure if this also applies to Dart code but could well be.
Preferences: Open Settings
Tab User Settings
Extend Extensions
Select Dart
Search for Wrap options.
Edit
Looked into the documentation and there doesn't seem te be a setting to change the behavior.
You could open a Issue op Github
If I enter "foo ()\n\t{\n"
foo ()
{
<- cursor is now here
I'd like it to be at the same level of indent as the line above (4 spaces in this example), not pushed in a level (8 spaces in this example). So:
foo ()
{
<- cursor here and all will be well in the world
I've tried completely turning off all the indent/tab settings I can find. I'm even prepared to hack around with an extension so a pointer to any in-depth documentation around type/tab commands would also be welcome.
Well, erm, there is an Editor Setting in Preferences, where you can adjust the tabs "editor.tabSize": 4, but I don't there is any level scaling, but I've also discovered a little "hack". If you make double slashes after
{//
and hit return it looks like this:
{//
Hello_world!!
}
Kind of silly, I guess.
I do PHP/Javascript development in NetBeans, and I really like the environment, except for one thing - in Javascript, when I press ENTER after a statement, and type the opening brace, it is indented. Like this:
if ( a == b )
{}
I want the brace to stay on the same level, like this:
if ( a == b )
{}
So that when I press ENTER again, I'd get this:
if ( a == b )
{
}
Can this be done and how?
Sorry, I don't have the answer to your question. I too have searched in vain for somewhere in NetBeans 6 to configure JavaScript formatting.
However, you should note the following:
In languages like Java it's legitimate to choose between opening brace on the same line vs. opening brace on a newline. In JavaScript, however, you should really stick to the former as the latter can give rise to ambiguities that can affect the interpretation of the code. See here. (I know the example you cite relates to the if statement, but presumably you want to be consistent.)
Great news for netbeans devotes here: (netbeans 7.0)
Tools -> Options > Editor > Code Templates: choose Language (Javascript in this case)
Look for "if" Abbreviation:
Change Expanded text definition:
from this:
if (${expr}){
${cursor}
}
to this:
if (${expr})
{
${cursor}
}
Save options.
Now inside a js file type if and press [tab]... and you got it...
Can you imagine all possibilities with these templates?