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!
Related
In the VS code editor, the default setting is to replace tabs by spaces, which is what I want. However, this is disastrous in a make file. I have written a make file (named Makefile) but VS code insists on changing tabs to spaces so I get a "Missing Separator" error when I run make.
If I go to File > Preferences > Settings and type #id:editor.insertSpaces in the menu, I see this:
When I click on Modified elsewhere I see this:
The second screenshot seems to says that the editor won't insert spaces in a Makefile, but it certainly is. What am I doing wrong, or what have I failed to do?
Try modifing settings.json
VScode Settings
There are 3 levels (by higher priority)
Worspace Settings JSON
User Settings JSON
Default Settings JSON
This should fix most inconveniences:
"[markdown]": {
"files.trimTrailingWhitespace": false,
"editor.insertSpaces": false
},
What worked for me was adding the following to settings.json:
"[makefile]": {
"editor.insertSpaces": false
},
I'm not sure how I made this feature but I can't stop highlighting the cursor line. As you can see, I have a green underline at the position of the cursor line.
This feature is good if you do not use .ipynb/jupyter file but if you do you can see this:
I have looked all settings and also deleted .json setting file parameters to be sure not there but did not work.
Does anyone knows the exact parameter name that I can turn off this feature?
I have similar issue, but later I found that is the column select mode. You need to remove it from the setting.json
"editor.columnSelection": true
I have applied the below settings in VS Code to get 4 spaces indentation.
But always when I open a new file, it switches back to 2 in the right-bottom corner.
If I click in the right-bottom corner and change the setting back to 4,
VSCode will still change back to 2 and still apply it with the 2-space auto-indent.
Alt+Shift+F
What am I missing?
Bit of an late answer. But just got the same issue solved...
Multiple things are able to control this. It also has taken me quite a bit of experimentation to get it corrected. For me point 3 below was the final trick to make it work. Before that, I noticed the editor loading with 4, but jumping back to 2 spaces. Now it stays at 4.
Some things to check:
1: VS Code configuration (Settings & Workspace, you can set these for system wide configuration or just for the current Workspace):
Check whether you have set:
"editor.tabSize": 4,
"editor.insertSpaces": true,
"editor.detectIndentation": false
And language specific settings (optional):
"[javascript]": {
"editor.tabSize": 4
},
"[typescript]": {
"editor.tabSize": 4
}
2: Are there any Extensions that could influence the indentation -> people have reported JS-CSS-HTML to also configure the setting.
3: Is there a .editorconfig file in your workspace? If so, check the settings over there. Angular creates one for example and configures the indent_size:
# Editor configuration, see http://editorconfig.org
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 4
insert_final_newline = true
trim_trailing_whitespace = true
[*.md]
max_line_length = off
trim_trailing_whitespace = false
Most answers focussed point 1 which, but for me the last step was important to make VS Code work properly.
This Stack Overflow handles all of the above in different answers:
Visual Studio Code: format is not using indent settings
I fixed it in the VisualStudio settings (1.31)
Go to: settings > workspace settings > Text editor
uncheck 'Detect Indentation' to stick to your default setting.
In many cases, it is Prettier that causes this. In fact, it just ignores all settings listed in #Oskar's answer.
So it needs to be overridden explicitly:
"prettier.tabWidth": 4,
"prettier.useTabs": true
And then just go to your file and hit Ctrlk,Ctrld, and the correct indentation should be applied.
See also Prettier is not indenting as specified.
Slightly different from previous answers. I had one file with the wrong indentation for its type and I wanted to correct only that file.
(If you must know: this Python script started out as text file with some queries in it. I got it from psql's -E \d echo look at the postgres schemas).
Anyway, this file was now a Python .py file, with a 2 spaces indentation. Not something that should be fixed by modifying general vscode settings.
What I did:
click on the bottom status bar spot that says 2 Spaces
choose Convert Indentation to Tabs on the dialog popup. Now it says Tab size 2
click on the status bar again where it says Tab size 2
choose Convert Indentation to Spaces. Now the dialog changes to propose indent size: 2 is selected. Pick 4 instead or any size you want.
Done
Basically there are different ways through this dialog, but if you get into tab mode and then switch back to space-based indentation, it will allow you to pick the number of spaces you want to use.
Be careful; this extension EditorConfig for VS Code interferes with vscode tab and indentation settings. Its installed by default but it is a nightmare. Disable it will solve all your problems.
Another problem I discovered with Python is that VS Code uses autopep8. No matter which setting I tweaked, VS Code seemed to ignore the 2 spaces setting. If you want 2 spaces instead of 4 - the fix is to add this to your settings.json.
"python.formatting.autopep8Args": [
"--indent-size=2",
"--ignore E121"
]
Btw you can see your autopep8 arguments by opening the command palette (⌘-shift-p on mac) and entering >Python: Show Language Server Output then switching to view the "Python" log.
This seems to be a common issue. See: VS Code Python autopep8 does not honor 2 spaces hanging indentation
Is it possible to make VSCode keep indents on empty lines?
Could not find such a setting neither natively nor in "Beautify" extension.
Example of desired behavior:
UPDATE: eventually I've just switched to Prettier - and never had to think about code style again as it's just being formatted automatically for me.
Go to File > Preferences > Settings. On the right side, add the line:
,"editor.trimAutoWhitespace": false
It worked for me perfectly.
Bit of an old question, but I found that a combination of the settings:
"editor.trimAutoWhitespace": false,
"editor.renderWhitespace": "all"
...worked for me.
NOTE: (19/03/2021)
It appears that this issue, registered on GitHub, is still an open case.
As of: 2022-02-01
Here is the solution that worked for me even with VSCODE formatting(linting) on:
There are two native VSCODE settings that format your code automatically:
"editor.formatOnSave": true,
"editor.formatOnType": true,
These settings affect your text editor only if
"editor.defaultFormatter" is not null
Here are the problems
The "editor.trimAutoWhitespace" VSCODE setting solves the problem but only works on the "editor.formatOnType" autoformat, when you save the document this setting is ignored.
You may also want to trimAutoWhitespaces on all cases but the ones where you are leaving an indent on an empty row. (this was my case).
In my case, while coding, I test my code in the terminal chunck by chunck. The problem with, in my case, python is that the end of a for loops and a conditional is defined by indentation. In this case since the terminal run the code line by line, and not in chuncks, with the removal of the indentation, the terminal thinks that the for and if commands are finished before they actually are.
Here is the solution:
Never define an edit.defaultFormatter in your VSCODE settings define it per language.
How do you do that?
Change VSCODE "editor.defaultFormatter" to null as in:
"editor.defaultFormatter": null,
Change the language formatter to your prefered one. In my case:
python.formatting.provider": "black"
VSCODE gives you the possibility of choosing a formatting (linting) provider for any language. These providers' rules are way more detailed than the VSCode native rules. In VS code press CRTL+SHIFT+P and search for "preferences: Configure Language Specific Settings...". Then define your formatting provider for said language.
Every provider (in my case "black") provides the option of ignoring some sort of formatting rule. Set the ignore argument for this provider.
In my case I only ignore 2 rules and my setting is:
"python.formatting.blackArgs": [ "--ignore=E501,W293" ],
Rule E501 = Row with more than 80 character.
Rule W293 = Empty Row containing only WhiteSpaces.
Ignoring W293 allows the Auto Trim White Spaces to keep working for every kind of trailing White Spaces except for the case referred to in W293.
I had the same issue but after removing :
"editor.autoIndent": "none"
I was good to go.
Timestamp:
2021, using VS Code v1.56.2
Use Case:
You use editor.action.trimTrailingWhitespace. Later you wish to write new code in a function. You navigate to a blank line within the function, but discover this line isn't indented and is completely empty. In this scenario, you have four choices:
Hit Tab multiple times until your cursor is at the proper indentation.
Navigate up to a line with proper indentation, press End, then press Enter.
Click your mouse to the right of a properly indented line, then press Enter.
Press Ctrl + ] repeatedly to indent the empty line.[See Footnote 1]
This answer automates this workflow by inserting the indentation for you (when you navigate to an empty line surrounded by indented lines).
Background:
Spent 3 hours trying all of the solutions on this page (and many different extensions). Couldn't find anything else which worked.
Solution via Extension
implicit-indent Extension by jemc:
https://marketplace.visualstudio.com/items?itemName=jemc.vscode-implicit-indent
Automatically indents an empty line when navigated to (if its surrounding lines are indented).
Functionality
From experimenting, here's how implicit-indent seems to work:
Checks and matches either tab or space indentation automatically.
Determines spaces or tabs based on indentation of surrounding text, regardless of editor settings.[See Footnote 2]
Clicking on an empty line automatically indents to match surroundings.
If pressing the up ↑ or down ↓ arrow key navigates the caret (a.k.a. text cursor) to an empty line, implicit-indent will automatically indent the line and place the cursor to the right of the indentation (making it feel the same as if the line were already indented).
-> Before ↑ or ↓ is pressed, it doesn't matter what column the caret is on, this extension will trigger regardless.
Navigating to an empty line matches nested indentation.
Assume you have the following:
Where |n| represents a line
and c represents the caret / text cursor
and only line |2| is empty.
|1| indented line
|2| (empty line)
|3| c indented line
^ assume caret is on line |3|
(caret can be at any column)
Pressing the up ↑ arrow key results in the following:
|1| indented line
|2| c
|3| indented line
^ Line |2| (previously empty)
is automatically indented to
match nested indentation
of line |3|
and the caret is automatically moved
to the end of the inserted whitespace
(as if the line were already indented).
VS Code
As of 2021 May, the following GitHub issues are still unresolved:
https://github.com/microsoft/vscode/issues/49661
https://github.com/microsoft/vscode/issues/54210
https://github.com/OmniSharp/omnisharp-vscode/issues/1980
https://github.com/OmniSharp/omnisharp-vscode/issues/1680
Using implicit-indent is the only workaround I've discovered so far.
I'll amend this answer when automatic indentation is added to VS Code's native settings.
[Footnote 1]
As an alternative to this extension, you can use Tab or the following indent/unindent functionality built-in to VS Code to manually indent an empty line. Slightly out of scope, but it's a good hotkey to know about.
Default built-in hotkeys are:
Hotkey: CTRL + ]
Command: editor.action.indentLines
What it does:
Indent current line (if no selection)
or indent all selected or partially-selected lines.
Hotkey: CTRL + [
Command: editor.action.outdentLines
What it does:
"Outdent" (a.k.a "unindent" a.k.a dedent)
current line (if no selection)
or outdent all selected or partially-selected lines.
[Footnote 2]
Note: regardless of whether you use this extension or not, you can quickly replace your current document's indentation (to either leading tabs or leading spaces) by using the following VS Code commands:
editor.action.indentationToTabs
editor.action.indentationToSpaces
That is probably eslint (and/or beautify) doing that. Look at
"no-trailing-spaces": ["error", { "skipBlankLines": false }],
I have that in my eslintrc.json file and so I get errors on blank lines with spaces or tabs on them. Setting "skipBlankLines" to true might work for you.
Answer edited as for VSC version 1.56.2 and newer.
The command editor.action.insertLineAfter makes a new line and moves the cursor there preserving the indentation.
To bind that command to Enter key, go to your keyboard shortcuts (press ctrl + k ctrl + s) then press the page with the pivot arrow icon on the far right top.
add the following inside keybindings.json to look like so:
// Place your key bindings in this file to override the defaults
[
{
"key": "enter",
"command": "editor.action.insertLineAfter",
"when": "editorTextFocus && !editorReadonly"
},
]
It worked for my without re-opening of VSC
I was having this issue with writing Flutter code.
Only solution for me was to change my default formatter to Flutter.
UPDATE: I also needed to disable Dart: Enable SDK Formatter
I have a file in Visual Studio Code in which I use only tabs for indentation. When I copy the contents of that file somewhere else and edit them, then when I paste them back all tabs are gone and spaces have taken their places.
How can I prevent the use of spaces for indentation and automatically spaces will be converted to tabs?
Also I have changed the preferences:
"editor.insertSpaces": false,
"editor.detectIndentation": false,
Unfortunately you can't (yet). I think it would be nice to get spaces/tabs converted upon file opening - like some editors do. You can quickly convert spaces by tabs by selecting the number of indentation spaces, pressing cmd+F2 in mac or ctrl-F2 in linux/windows (to find and select all occurrences of that amount of spaces), and then pressing tab key (only once). You can also give Untabfy (or Whitespacer) a try.