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
Related
I have an SCSS file that contains a calc() function.
When i use a calc function without spaces around the operator like so calc(var(--primary-color-h)+5) the transpiled CSS result doesn't work. Only when i set spaces around the operator does it work; like this calc(var(--primary-color-h) + 5)
How would i instruct VSCODE to created spaces around the operator upon save.
I have prettier, scss Formatter and StyleLint installed. But neither seems to fix it.
tnx,
RDG
You can use Stylelint and the following two rules:
function-calc-no-unspaced-operator
function-whitespace-after
These will flag the lack of space before and after the + operator, respectively. See this demo.
This rules are turned on the SCSS standard config, which you can extend in your Stylelint configuration object:
{
"extends": "stylelint-config-standard-scss"
}
How would i instruct VSCODE to created spaces around the operator upon save
You can use the editor.codeActionsOnSave option from the official Visual Studio Code extension for Stylelint. And the following to your VS Code settings file:
"editor.codeActionsOnSave": {
"source.fixAll.stylelint": true
}
Im not using any plugins for breaking my code, i think it's an integrated function. This problem is now since a few weeks and it's driving me crazy pasting code and then putting every line back.
Here is a screenshot of my code (i just copied this line):
https://imgur.com/YOdfM2u
Here is a screenshot of my code (i pasted it):
https://imgur.com/1AfzNIH
Why is my vscode breaking the lines everytime?
Thanks in advance for your help, i really apreciate it
This is the default formatter wrapping text (or trying to) at the default of 80 columns.
If you want to override this, you can do so by adding this line to your settings.json file:
"html.format.wrapLineLength": 0
If you prefer to change your settings from the GUI instead of the json file, open the command palette and open the settings from there. Once in it, look for "HTML format wrap line length" in the search box and change the value to 0.
You find a shortcut to the settings here too:
I just started using VSCODE and faced with an annoyance every time I paste in YAML code in an existing YML file.
Basically the editor seems to auto format the document and in doing so messes up the significant spaces in the document. This causes builds in Azure Devops to break.
Although VS code formats the document nicely into collapsible regions, the formatting annoyance makes it hard to use.
Any help would be appreciated.
BEFORE:
AFTER:
I fixed this by changing editor.autoIndent settings for yaml and dockercompose language
"[yaml]": {
"editor.autoIndent": "advanced"
},
"[dockercompose]": {
"editor.autoIndent": "advanced"
}
In VsCode, press ctrl+shift+p (cmd+shift+p in Mac), and search for Preferences: Open User Settings (JSON). There I added this line:
"[yaml]": {
"editor.defaultFormatter": "redhat.vscode-yaml"
},
I picked it because it contains the word yaml, so I figured it must be yaml specific.
Anyhow, it seems to do a pretty good job for me.
Turn off the setting format on paste. This is a global setting, but plugins sometimes have their own, so if you're running a formatter like prettier, you'll need to see whether this is even an option with that plugin.
Looks like the problem is in the first line. Maybe when you copy the code, you're not copying the indentation on the first line.
One trick I use, is copying from the end of the preceding line, so the copied code starts with a newline, and then the paste is perfect.
Or just add the indentation on that first line, after pasting.
I'm trying to set different width of row for my VSCode prettier(extension) settings, but without any luck.
Tried different variations with prefixes or without in ~root/.vscode/settings.json:
"max-len": 120,
"printWidth": 120
"editor.max-len": 120,
"editor.printWidth": 120
"prettier.max-len": 120,
"prettier.printWidth": 120
none of it respect rules.
How can I solve it?
Did you consider the file extensions Prettier is actually supporting?
If yes, when you have the file opened, is "Prettier" selected in the status bar on the bottom right?
If yes, open the "Output" tab in VS Code and try to format the file. What do you see as output (you might need to select "Prettier" in the dropdown of the "Output" tab).
Find .editorconfig file in your project. If exists, add max_line_length = 120 to it.
See "Print Width" in Prettier document https://prettier.io/docs/en/options.html for details
You're missing trailing commas on line 2 and 4. Click on the "Prettier" link in the status bar and it will tell what to debug.
How can I display lineendings (CR,LF) in Visual Studio Code (not in Visual Studio)?
At the moment there is only the little statusbar menu which display/change the line ending if the actual file. But sometimes it would be great to see the line endings directly in every line especially when there are mixed line endings (not good, but this happens from time to time).
I use the following settings, but none of them show the line endings.
"editor.renderWhitespace": true,
"editor.renderControlCharacters": true,
"editor.renderIndentGuides": true
Is there a setting for lineendings?
I've opened a issue on GitHub: Possibility to display line endings in text area #12223
Soham Kamani made an extensions for this: code-eol
AFAIK there is no way to visually see line endings in the editor space, but in the bottom-right corner of the window there is an indicator that says "CLRF" or "LF" which will let you set the line endings for a particular file. Clicking on the text will allow you to change the line endings as well.
If you want to set it to LF as default, you can paste this line in your editor settings (F1 menu; > Preferences: Open Settings (JSON))
"files.eol": "\n"
Example:
{
"git.confirmSync": false,
"window.zoomLevel": -1,
"workbench.activityBar.visible": true,
"editor.wordWrap": true,
"workbench.iconTheme": "vscode-icons",
"window.menuBarVisibility": "default",
"vsicons.projectDetection.autoReload": true,
"files.eol": "\n"
}
Please note that this will change the default line ending for new files only. This will not edit your files.
Render Line Endings is a Visual Studio Code extension that is still actively maintained (as of September 2021):
https://marketplace.visualstudio.com/items?itemName=medo64.render-crlf
https://github.com/medo64/render-crlf/
It can be configured like this:
{
"editor.renderWhitespace": "all",
"code-eol.newlineCharacter": "¬",
"code-eol.returnCharacter" : "¤",
"code-eol.crlfCharacter" : "¤¬",
}
and looks like this:
You can install an extension to show line endings.
There are several available at the VS Marketplace.
Or if their search moves, try this relevant Google search
In the original answer, I had provided a link to a specific extension by Johnny Härtell After two years, this extension and the author are mysteriously missing from the VS Marketplace.
To provide a better experience and hopefully future proof this answer, I've updated it with search results that should keep us pretty close to a relevant extension.
I used the "find" and simply did a Regex search for "\n". Which seems to show the new lines in a simplistic but useful manner. Hope this helps.
Another way to set the default end of line value in Visual Studio Code:
Navigate to the Visual Studio Code settings tab (e.g., by Ctrl + , (comma))
Search for end of line in the search bar
Set the desired value in the Files: Eol dropdown menu
Screenshot:
Having the opposite problem? How to hide line endings:
Oddly I have the opposite problem! I just ended up with the following highlighting of each newline - which I've never seen before. In all open files and without a selection. Assumed I'd hit a shortcut by mistake, which is how I ended up on this question. Given that the feature doesn't seem to actually exist I resorted to closing and reopening and they went away!