I want to use full viewport while coding in VS Code. But the lines are not expanding when i expand my VS Code window.
Any Fix ?
The correct configuration to use:
In order to configure V.S. Code so that the lines of code in
your editor will only wrap at the end of the view port, and
never before, you need to assign the correct value to the
setting: editor.wordWrap
There are 4 different values that can be assigned to the
editor.wordWrap setting. There is one that I believe
is exactly what you are asking for, however; 2 of the other
three could work too, so I will list them all, and suggest
the one I think will work best for you. The following are
the only "out-of-the-box" line-wrapping configurations that
VSCode supports, and they are as follows:
01| "editor.wordWrap": "off"_
— Assigning off to the wordWrap setting will make it
so that your editors lines will never auto-wrap. The only
way a line will ever be moved to the next line is if you add
a line break — by pressing the [ENTER] key. — and
proceed to continue typeing text on the next line. This way
could work for you, because you get 100% control over when
the lines break.
02| "editor.wordWrap": "on"
Assigning on to the editor.wordWrap setting makes it
so that that the lines of code in your editor will wrap
exactly where the viewport ends. No matter how big, or how
small the editor's viewport width is, the lines always
extend the entirety of the viewport, and never before.
NOTE: "on" sounds to me like what you were asking for
in your question
03| "editor.wordWrap": "wordWrapColumn"
When you assign wordWrapColumn —to— "editor.wordWrap" the lines of code inside your editors view-port will wrap at what ever you set the setting editor.wordWrapColumn to. To be more specific, I'll give you an example.
if you configure wordWrapColumn so that it looks like the code-snippet below:
"editor.wordWrapColumn": 80
...then your lines will all wrap at 80.
This is by far the most popular configuration, as it is frequently coupled with 3rd party formatters, and linters, such as ESLint & Prettier. Prettier's printWidth setting, coupled with "editor.wordWrap": "wordWrapColumn", is an extremely reliable and consistent configuration.
4| "editor.wordWrap": "bounded"
— Last is "bounded", bounded is a mix between on, and print width. In a nutshell, lines will wrap if either of two conditions are true.
- First lines will wrap at what ever "editor.wordWrapColumn" is set to, just like the configuration example #3.
- Secondly, lines will wrap at the end of the view port.
To reiterate through what I just typed, lines wrap at _"editor.wordWrapColumn"'_s value, unless the view-port is smaller than the value of "editor.wordWrapColumn", in that case lines wrap at the view-port.
That's all...
You can add any extension in you VS code such as Beautify or Prettier. Or if you want to format the document you can simply use shortcut Shift+Alt+F.
If you want to merge multiline code into single.Follow the steps
1.Select all line you want to merge in single.
2.Press F1 and search for join lines.
3.Select join lines and press enter.
You can also create a keyboard shortcut for this command editor.action.joinLines
"editor.mouseWheelZoom": true
Adding this setting to your settings.json will enable zooming in when holding CTRL and scrolling. After you save settings.json with this setting, you can hold the ctrl key and scroll with your mouse or trackpad to zoom in which will make your code cover the full screen. If you want more focus, you can enter Zen Mode. It is a nice feature built into Visual Studio Code, which helps you to focus more on your code than the activity bar or other files. You can toggle zen mode with shortcut keys CTRL + K Z, Command palette, or View menu.
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)
In Eclipse, I can format comments by selecting them and pressing Shift + Ctrl + F. For example, when I select a method comment like this:
/**
* This method
* does some stuff.
*/
and press Shift + Ctrl + F, Eclipse automatically wraps it:
/**
* This method does some stuff.
*/
Is there anything comparable to this in IDEA?
EDIT: To clarify, I'm looking for comment formatting that also breaks lines that are too long into multiple lines.
The closest thing that you can get is Edit | Join Lines (Ctrl+Shift+J). You have to select the lines you want to join first.
To wrap long comments enable Settings | Code Style | JavaDoc | Wrap at right margin.
For Javadoc comments, you want to make sure the "Wrap at right margin" setting is checked. See Code Style > JavaDoc, under "Other". However, this setting only seems to take effect when you reformat the whole file, since a reformat of just the Javadoc (i.e., select the Javadoc, then do a Code (menu) > Reformat Code... or CtrlAltL) that exceeds the right margin doesn't force it to wrap. If I reformat the entire file, then it wraps at the margin as expected.
This seems like a bug (though one that doesn't seem to have been reported), since if you have to set the "Ensure right margin is not exceeded" checked, then selecting the Javadoc text and doing a reformat code does indeed wrap the lines. This setting is in Settings > Code Style > Wrapping and Braces. You can also do a search in the Settings dialog for "ensure right margin".
You'll still have to manually join the lines using CtrlShiftJ
This might be worthy of an improvement request to JetBrains.
Existing comment will be reformatted when you do "Reformat Code" (⌥⌘L in Mac).
#kghastie uncovered the key.
Steps:
Set the Code Style > Java > JavaDoc > Wrap at right margin setting.
Select the full lines of the entire JavaDoc comment.
Reformat Code (Ctrl-Alt-L or ⌥⌘L).
Lesser alternative:
Set the Code Style > Java > JavaDoc > Wrap at right margin setting and the Code Style > Java > Wrapping and Braces > Ensure right margin is not exceeded setting.
Select some text within a JavaDoc comment.
Join Lines (Ctrl-Shift-J) followed by reformat Code (Ctrl-Alt-L or ⌥⌘L).
Beware: This will leave all the selected lines joined even where you had paragraph breaks (<p/> or \n\n).
The JetBrains plugin Wrap to Column is made for this:
From the overview:
Wraps text to the specified column width. Similar to the Emacs command 'Fill Paragraph' and Vim's gq (format lines) command. This is a replacement for the native Intellij Fill Paragraph command, which doesn't work quite how I need it to.
This plugin provies two IDE actions:
Wrap Line to Column: Wraps selected text or the current line if no text is selected. This is useful for IdeaVim users who wish to pair the command with motions like vip (select current paragraph).
Wrap Paragraph to Column: Wraps the paragraph (multiple lines) in which the cursor appears. No selection is needed, and will be ignored.
I'm using IntelliJ 14 on a Mac, which has a Fill Paragraph command. Access it via the awesome universal Command-Shift-A action search feature. Works like a charm!
This is a hack, not a really good solution, but if you have a block of code that you want formatted like this and it's in serious need of auto format, because it's going over the 80 line max, or it's just unreadable...
You can just put if ("foo" == "bar") { on top of whatever you want formatted, and then and the} at the bottom of the if statement, to close it, and voila, your code should auto-indent, auto format, etc... Then take it out, highlight all of what you just formatted and press SHIFT+TAB to move it back 4 spaces and remove the dummy if statement
Does anyone know a way to display code in Microsoft Word documents that preserves coloring and formatting? Preferably, the method would also be unobtrusive and easy to update.
I have tried to include code as regular text which looks awful and gets in the way when editing regular text. I have also tried inserting objects, a WordPad document and Text Box, into the document then putting the code inside those objects. The code looks much better and is easier to avoid while editing the rest of the text. However, these objects can only span one page which makes editing a nightmare when several pages of code need to be added.
Lastly, I know that there are much better editors/formats that have no problem handling this but I am stuck working with MS word.
Here is the best way, for me, to add code inside word:
Go to Insert tab, Text section, click Object button (it's on the right)
Choose OpenDocument Text which will open a new embedded word document
Copy and paste your code from Visual Studio / Eclipse inside this embedded word page
Save and close
Advantages
The result looks very nice. Here are the advantages of this method:
The code keeps its original layout and colors
The code is separated from the rest of the document, as if it was a picture or a chart
Spelling errors won't be highlighted in the code (this is cool !)
And it takes only few seconds.
Download and install Notepad++ and do the following:
Paste your code in the window;
Select the programming language from the language menu;
Select the text to copy;
Right click and select Plugin commands -> Copy Text with Syntax Highlighting;
Paste it into MS Word and you are good to go!
Update 29/06/2013:
Notepad++ has a plugin called "NppExport" (comes pre-installed) that allows you to copy to RTF, HTML and ALL. It permits dozens of languages, whereas the aforementioned IDEs are limited to a handful each (without other plug-ins).
I use Copy all formats to clipboard and "paste as HTML" in MS word.
After reading a lot of related answers, I came across my own solution, which for me is the most suitable one.
Result looks like this:
As you can see, it is the same syntax highlighting like on Stack Overflow which is quite awesome.
Steps to reproduce:
on Stack Overflow
Goto Ask Question (preferably with Chrome)
Paste Code and add a language tag (e.g. Java) to get syntax hightlighting
Copy code from preview
in Word
Insert > Table > 1x1
Paste code (you may need to use Paste Special... > Formatted Text (RTF) from the Edit menu to not lose the syntax hilighting)
Table Design > Borders > No Border
Select code > Edit > Find > Replace
Search Document ^p (Paragraph Mark)
Replace With ^l (Manual Line Break)
(This is required to remove the gaps between some lines)
Select code again > Review > Language > check "Do not check spelling or grammar"
Finally add a caption using References > Insert Caption > New Label > name it "Listing" or sth
Sample code thanks to this guy
There is a nice Online Tool for that : https://www.troye.io/planetb/
Just copy the generated code and paste it into your word editing software. So far I've tried it on MS Word and WPS Writer, works really well.
Doesn't play nice with Firefox but works just fine on Chrome (and IE too, but who wants to use that).
One of the main benefits is that, unlike the Code Format Add-In for Word, it does NOT mess with your code, and respects various languages' syntax.
I tried many other options offered in other answers but I found this one to be the most efficient (quick and really effective).
There is also another online tool quoted in another answer (markup.su) but I find the planetB output more elegant (although less versatile).
Input :
Output :
I type my code in Visual Studio, and then copy-paste into word. it preserves the colors.
When I've done this, I've made extensive use of styles. It helps a lot.
What I do is create a paragraph style (perhaps called "Code Example" or something like that) which uses a monospaced font, carefully chosen tabs, a very light grey background, a thin black border above and below (that helps visibility a lot) and with spelling turned off. I also make sure that inter-line and inter-paragraph spacing are set right. I then create additional character styles on top (e.g., "Comment", "String", "Keyword", "Function Name Decl", "Variable Name Decl") which I layer on top; those set the color and whether the text is bold/italic. It's then pretty simple to go through and mark up a pasted example as being code and have it come out looking really good, and this is works well for short snippets. Long chunks of code probably should not normally be in something that's going to go on a dead tree. :-)
An advantage of doing it this way is that it is easy to adapt to whatever code you're doing; you don't have to rely on some IDE to figure out whatever is going on for you. (The main problem? Printed pages typically aren't as wide as editor windows so wrapping will suck...)
Maybe this is overly simple, but have you tried pasting in your code and setting the font on it to Courier New?
Try defining a style called 'code' and make it use a small fixed width font, it should look better then.
Use CTRL+SPACEBAR to reset style.
If you are using Sublime Text, you can copy the code from Sublime to MS Word preserving the syntax highlighting.
Install the package called SublimeHighlight.
In Sublime, using your cursor, select the code you want to copy, right click it, select 'copy as rtf', and paste into MS Word.
I'm using Easy Code Formatter. It's also an Office add-in. It allows you to select the coding style / and has a quick formatting button. Pretty neat.
In case you're like me and are too lazy or in a hurry and don't want to download additional software, you can use http://markup.su/highlighter/. It's very straight forward and supports several highlight themes and many programming languages. In my case I was using Visual Studio Code, which doesn't allow copying with format due to CSS involved in styling (as reported here).
Copy the text from the Preview box and then in Word go to Insert -> Textbox, paste the Preview from the website, highlight all the text, and then disable spell checking for that textbox.
This is what the code looks like finally.
The best way I found is by using the table.
Create a table with 1x1. Then copy the code and paste it.
If you're using the desktop app then it will inherit the code editor theme color and paste it accordingly, else you can change the table style to any color.
UPDATE ------------------
From Word 2021, you can directly paste the code and it will preserve the formatting. No need to create the table.
Thank you #RdC1965 for mentioning this.
This is a bit indirect, but it works very nicely. Get LiveWriter and install this plugin:
http://lvildosola.blogspot.com/2007/02/code-snippet-plugin-for-windows-live.html
Insert your code using the plugin into a blog post. Select all and copy it to Word.
It looks great and can include line numbers. It also spans pages decently.
HTH
Colby Africa
Vim has a nifty feature that converts code to HTML format preserving syntax highlighting, font style, background color and even line numbers. Run :TOhtml and vim creates a new buffer containing html markup.
Next, open this html file in a web browser and copy/paste whatever it rendered to Word. Vim tips wiki has more information.
In my experience copy-paste from eclipse and Notepad++ works directly with word.
For some reason I had a problem with a file that didn't preserve coloring. I made a new .java file, copy-paste code to that, then copy-paste to word and it worked...
As the other guys said, create a new paragraph style. What I do is use mono-spaced font like courier new, small size close to 8px for fonts, single spaced with no space between paragraphs, make tab stops small (0.5cm,1cm,..,5cm), put a simple line border around the text and disable grammar checks. That way i achieved the line braking of eclipse so I don't have to do anything more.
Hope I helped ;)
This is the simplest approach I follow. Consider I want to paste java code.
I paste the code here so that spaces, tabs and flower brackets are neatly formated http://www.tutorialspoint.com/online_java_formatter.htm
Then I paste the code got from step 1 here so that the colors, fonts are added to the code http://markup.su/highlighter/
Then paste the preview code got from step 2 to the MS word. Finally it will look like this
You can use VS code to keep code format and highlighting. Directly copy and paste code from VS.
you can simply use this Add-in on any office program.
Go to insert tab, then Get Add-ins, and search for Easy Syntax Highlighter
It supports
185 languages and 89 themes.
Automatic language detection.
Multi-language code highlighting.
Use a monospaced font like Lucida Console, which comes with Windows. If you cut/paste from Visual Studio or something that supports syntax highlighting, you can often preserve the colour scheme of the syntax highlighter.
Answer for people trying to resolve this issue in 2019:
Most answers to this question are outdated by now. I wish there was a way to reinspect old questions and answers every now and then!
The method I found for this question that works with Office 365 and its associated programs can be found here.
I'm using Word 2010 and I like copying and paste from a github gist. Just remember to keep source formatting!
I then change the font to DejaVu Sans Mono.
You can opt to copy with or without the numbering.
Copying into Eclipse and paste it in Word is also another option.
You can also use SciTE to paste code if you don't want to install heavy IDEs and then download plugins for all the code you're making. Simply choose your language from the language menu, type your code, high-light code, select Edit->Copy as RTF, paste into Word with formatting (default paste).
SciTE supports the following languages but probably has support for others: Abaqus*, Ada, ANS.1 MIB definition files*, APDL, Assembler (NASM, MASM), Asymptote*, AutoIt*, Avenue*, Batch files (MS-DOS), Baan*, Bash*, BlitzBasic*, Bullant*, C/C++/C#, Clarion, cmake*, conf (Apache), CSound, CSS*, D, diff files*, E-Script*, Eiffel*, Erlang*, Flagship (Clipper / XBase), Flash (ActionScript), Fortran*, Forth*, GAP*, Gettext, Haskell, HTML*, HTML with embedded JavaScript, VBScript, PHP and ASP*, Gui4Cli*, IDL - both MSIDL and XPIDL*, INI, properties* and similar, InnoSetup*, Java*, JavaScript*, LISP*, LOT*, Lout*, Lua*, Make, Matlab*, Metapost*, MMIXAL, MSSQL, nnCron, NSIS*, Objective Caml*, Opal, Octave*, Pascal/Delphi*, Perl, most of it except for some ambiguous cases*, PL/M*, Progress*, PostScript*, POV-Ray*, PowerBasic*, PowerShell*, PureBasic*, Python*, R*, Rebol*, Ruby*, Scheme*, scriptol*, Specman E*, Spice, Smalltalk, SQL and PLSQL, TADS3*, TeX and LaTeX, Tcl/Tk*, VB and VBScript*, Verilog*, VHDL*, XML*, YAML*.
If you are using Intellij IDEA, just copy the code from the IDE and paste it in the word document.
A web site for coloration with lots of languages.
http://hilite.me/
You can host one yourself since it is open source. The code is on github.
There really isn't a clean way to do it, and it could still look fishy based on your exact style settings.
What you could try to do is to first run a code-to-HTML conversion (there are many programs that do that), and then try to open up the HTML file with word, that might hopefully provide you with the formatted and pretty code, and then copy and paste it into your document.
I was also looking for it and ended up creating something for my code display.
Here's a good way:
Create a rectangular form and place your text inside.
Change the font to Consolas and size ~10.
Change the text font to gray near-black (gray 25%, darker 75%)
Use darker colors to highlight your text if needed and choose one to be the contour.
I have created an easier method using tables, as they are easier to create, manage, and more consistent (with the possibility to save the table's style inside the document itself), but I couldn't find a better way for code colouring scheme, sorry for that.
Steps:
Create a 3x3 table.
Select the table, and make its borders invisible ("No Borders" option), and activate "View Gridlines" option.
Make the adjustments to cells' spacing and columns' widths to get the desired aspect. (You will have to get in "Table Properties" for fine tuning).
Create a "Paragraph Style" with the name of "Code" just for your code snippets (as mentioned in https://stackoverflow.com/a/25092977/8533804)
Create another "Paragraph Style" with the name of "Code_numberline" that will be based upon the previous created style, but this you will add a numbering line in its definition (this will automate line numbering).
Apply "Code_numberline" to the first column, and "Code" to the 3 column.
Add a fill in the middle column.
Save that table style and enjoy!
The best presentation for code in documents is in a fixed-width font (as it should appear in an IDE), with either a faint, shaded background or a light border to distinguish the block from other text.
If its Java source code copy it to Visual Studio and then copy it back to Word.