I'd like to keep some space between some html blocks in my code. However, Prettier wants to remove these lines. Is there a Prettier setting to keep this spacing?
Before prettier:
<template>
<form>
<div>First block</div>
<div>Second block</div>
</form>
</template>
After pretter:
<template>
<form>
<div>First block</div>
<div>Second block</div>
</form>
</template>
There is no way to actually do this, you might only use tricks.
First trick
Ignore completely the file (or file extensions) but you will not benefit from Prettier
Second trick
Deny Prettier to trim whitespaces
trim_trailing_whitespace = true
And add whitespaces in line breaks.
Once again this is not an effective solution, it's only a trick.
An issue has been closed by devs
adding and removing line breaks is core to prettier's formatting algorithm
According to #suchipi , Github member:
adding and removing line breaks is core to prettier's formatting algorithm, so preserving them isn't consistently possible.
As a work around you can try:
setting very short printWidth
put // prettier-ignore comment above your code.
For Refernce:
Github issue
Is there a config in prettier to keep line breaks?
Don't know if this will work as intended however, in the document for Prettier, there is a section for "Empty Line" that says;
"Prettier collapses multiple blank lines into a single blank line."
By this, you may want to add a double blank line instead of a single blank, where you are wanting a space to be, as it should compress it into a single line rather than removing it all together.
Take a look on this thread https://github.com/prettier/prettier/issues/4870, it's pretty good explaining why this is still non-existing feature.
There is no simple way for formatter to determine what to keep and what to remove.
So the only practical things you can do
Add comments to disable formatting in certain places (which is bad idea and never work well, dev gents become annoyed with this super quickly).
Accept that empty lines would be collapsed (still bad, because of poor readability)
Disable this feature and maintain empty lines yourself (alternative editor). This one "arguably" seems to me the simplest (best) option in a long-term.
I'm using prettier to format my Vue files, but can't find to seem a setting that puts props/attributes of html elements to new lines.
I'd like to make sure that my code is always formatted as it is for v-text-fieldin a yellow frame, rather than below. I set Prose Wrap to "never", but I guess that was not it. Any help appreciated!
You can set the setting of Print Width to higher value.
That's what Prettier does: breaks lines if they get too long. It doesn't make sense to use Prettier if you don't need its line-breaking behavior as this behavior and Prettier are one and the same.
How can I automatically hard wrap lines in VSCode? By that I mean if a line reaches a specified column, automatically insert a newline at the word boundary closest to that column without going over. Vim has a setting called textwidth that does this that I like to use when editing Markdown. It doesn't seem like VSCode does, as far as I can tell. It just has ways to control softwrapping.
VSCode doesn't support this out of the box. But you can install the Rewrap extension, which allows you to format the block that your cursor is currently in by pressing Alt + Q.
Rewrap requires no further settings, since it reads VSCode's settings to obtain the column at which to break.
Rewrap also supports automatic wrapping (off by default): https://github.com/stkb/Rewrap/wiki/Auto-wrap
Unfortunately, VSCode doesn't have this feature yet. But, we still can make it to be as close as vim automatic word wrapping beautiful feature.
First Step
We need to setup soft word wrap feature in VSCode.
Open VSCode Settings via Code => Preferences => Settings.
Add these 3 lines of editor settings.
"editor.wordWrap": "wordWrapColumn",
"editor.wrappingIndent": "same",
"editor.wordWrapColumn": n
Don't forget to change (n) with your preferred length of columns line. For me, I feel more comfortable to set it to 60.
Save this setting.
The main purpose of this first step is to make us feel more comfortable when we're typing because we don't need to manually type Enter and see a long line of text.
Second Step
We need to install Vim emulation for VSCode and set vim textwidth.
Install Vim emulation via VSCode extensions.
Open VSCode Settings via Code => Preferences => Settings.
Add this line of vim setting.
"vim.textwidth": n,
Don't forget to change (n) with your preferred length of columns line. For me, I will set this to be the same with (n) in the first step.
Save this setting.
Actual Use
When you finish to write your whole document, you can format it to be hard wrap lines using this way.
Block all text using visual line mode (Shift + v)
Type 'gq'
Now VSCode support auto "soft" wrapping out of the box.
Settings --> Text Editor --> Last 3 options (as on today) is for autowrapping.
Word Wrap (Controls how lines should wrap)
Word Wrap Column (Controls the wrapping column of the editor)
Wrapping indent (Controls the indentation of wrapped lines)
By default Word Wrap is off.
As of 2020 and if you're using the Prettier - Code formatter plugin:
Go to Plugins -> Find Prettier -> Cog -> Extension Settings -> Prettier: Print Width Fit code within this line limit and set to whatever you want. By default it's 80.
When you save the file, Prettier will format automatically.
Hard Wrap Comments
Use the Rewrap extension.
Soft Wrap Code
Add the following setting (replace column width with your preference): "editor.wordWrapColumn": 100
Then add either "editor.wordWrap": "wordWrapColumn" (wraps at the column) or "editor.wordWrap": "bounded" (wraps at either the column or the viewport).
Hard Wrap Comments and Soft Wrap Code
Unfortunately the extension and VSCode settings do not play nicely.
Feel free to upvote this feature request.
There is currently an Open request for this in the VS Code Issue tracker on GitHub, You Can Find It Here
Most of these didn’t work for me, but I found the extension Vsctoix, which does.
We start out with line breaks at column 80:
Mechanisms such as a “windfall clause” help distribute riches within particular
futures. But for a windfall clause to be useful, many conjunctive assumptions
have to be true. We present a new method to borrow against potential future
windfalls today, when they have greater marginal use. The method also increases
the probability and thus the expected value of the windfalls.
Then we execute “IX: Join Lines” (no parameter):
Mechanisms such as a “windfall clause” help distribute riches within particular futures. But for a windfall clause to be useful, many conjunctive assumptions have to be true. We present a new method to borrow against potential future windfalls today, when they have greater marginal use. The method also increases the probability and thus the expected value of the windfalls.
And then “IX: Break Line At” with parameter 100:
Mechanisms such as a “windfall clause” help distribute riches within particular futures. But for a
windfall clause to be useful, many conjunctive assumptions have to be true. We present a new method
to borrow against potential future windfalls today, when they have greater marginal use. The method
also increases the probability and thus the expected value of the windfalls.
It would be neat if it respected paragraph breaks and did both steps at once, but so far it’s the only extension that works for me – except I haven’t tried the vim emulation yet.
You can do this without any extension. You just use two regex search-and-replace.
Isolate the lines you want to rewrap by moving them to a separate file.
Join all the lines into one line. For example, ctrl+h, "\n" ==> " ". Note: make sure regex is enabled (the dot star icon)
Split the line into multiple lines. For example, ctrl+h, "(.{100}) " ==> "$1\n". Notice the space after the paren.
Copy the lines back to the original file.
There are many variations on this technique. For example, you could using comma instead of space "(.{100})," ==> "$1,\n". You could use Find in Selection alt+L instead of using a temp file.
Edit: (below answer might be for a soft wrap, see here for difference between soft and hard wrap: https://stackoverflow.com/a/319932/9481613)
In my version it is Preferences -> Settings then scroll down to "Editor: Word Wrap" where a dropdown box is available from which I selected wordWrapColumn. After choosing this and closing, when I click on View now at the bottom it says Word Wrap Alt+Z.
If anyone is running having issues, accessibility support/screen reader may need to be disabled. Go to preferences >> text editor >> accessibility support and toggle it off.
You can easily set the column limit using ColumnLimit member in C_Cpp.clang_format_fallbackStyle in settings.json (You have to install Microsoft C/C++ extension)
"C_Cpp.clang_format_fallbackStyle": "{ BasedOnStyle: WebKit, IndentWidth: 4, ColumnLimit: 80 }",
Then you can format the file using Shift + Alt + F
There are many options you can change in this format feature
"C_Cpp.clang_format_fallbackStyle": "{ BasedOnStyle: WebKit, UseTab: Never, IndentWidth: 4, TabWidth: 4, BreakBeforeBraces: Attach, AllowShortIfStatementsOnASingleLine: false, IndentCaseLabels: false, ColumnLimit: 80, AccessModifierOffset: -4 }",
Name of the predefined style used as a fallback in case clang-format
is invoked with style file but the .clang-format file is not found.
Possible values are Visual Studio, LLVM, Google, Chromium, Mozilla,
WebKit, Microsoft, GNU, none, or use {key: value, ...} to set specific
parameters. For example, the Visual Studio style is similar to: {
BasedOnStyle: LLVM, UseTab: Never, IndentWidth: 4, TabWidth: 4,
BreakBeforeBraces: Allman, AllowShortIfStatementsOnASingleLine: false,
IndentCaseLabels: false, ColumnLimit: 0, AccessModifierOffset: -4,
NamespaceIndentation: All, FixNamespaceComments: false }
Before
void Proc::Memory::getSramOff(const char* mem_name, uint dataSize, uint addrBits, uint& noOfBytes, uint& sram_off)
After
void Proc::Memory::getSramOff(const char* mem_name, uint dataSize,
uint addrBits, uint& noOfBytes, uint& sram_off)
Note the attached screenshot from my Emacs 24. It is in Fundamental mode, no visual line mode is turned on, and I don't think I've turned on any word wrap mode either:
You can clearly see that the lines at the bottom are closer together than the lines at the top, but I have no idea why.. it's all just text? Why is emacs doing that?
This is the mode I am in:
Update: It just occured to me that perhaps this issue is that I am copying/pasting this text into emacs as I take notes from a PDF I am reading. Perhaps emacs is somehow getting formatting based from this copy/paste? I thought this was a text-only file with no formatting, but perhaps that is not true?
The issue is due to unusual quote symbols, both apostrophes and quotation marks, that are affecting the line heights. Removing these and using "normal" quote marks resolves the issue.
Is there a quick and easy way to word wrap like "Apply Word Wrap" function of KDE's Kate?
Enter to wrapping mode = M-x auto-fill-mode
Wrap text = select text -> M-q
While the mishadoff's answer is great for default word wrapping, I once had to re-implement it because I wasn't content with the way Emacs did it, so I tried to scratch the bits of it together and here it is: http://pastebin.com/75q65hRf in case you need it.
With that bit of code you can configure what characters to wrap on, what characters terminate words, and also set exception rules for when the characters that would've otherwise break the line won't do it. It may also pad the created column on the right and on the left (I was using this function to format and display documentation text).