VSCODE - TAB right after the word not working as expected - visual-studio-code

vscode:
version - 1.40.2
On a normal text type file, type Hello and hit TAB.
All i want is when i hit tab vscode should register 2/4 spaces (what i have configured in the settings.json for the specific language) not a single space.
HelloTAB
Expected: Hello****|
Actual: Hello*|

Make sure you have unchecked Editor: Detect Indentation. Checking this option will override the Tab Size configuration. E.g. if the opened file has 1 space tab indentation but you have configured a 4 spaces tab indentation - the tab size will be 1 space.
Ctrl + , to open Settings.json
Enter in "spaces" in search
Uncheck Editor: Detect Indentation
Leave Editor: Insert spaces checked if you want to insert actual spaces instead of a tab (i.e. you need to do 4 backspaces if you made a mistake). Or unchecked it if you want to insert actual tabs.
Also, you can check what is the configured tab size for that particular opened file by looking at the bottom right of your editor:

Related

How can I improve the alignment of a line on tab press in VSCode?

I switched from Atom to VSCode. There is one point that is very annoying. Below is an example that prompted me to write a question here.
That is, pressing tab always inserts 2 spaces and has no understanding of the position of the beginning of the code in the upper line.
In Atom, tab can insert 1 space if required:
First go to the "Show All Commands" tab in VSCode.
Then search for "convert indentation".
Then you can edit your preference for spacing which should solve your problem.

VSCode: How to split editor using same shortkeys as Sublime Text

In Sublime Text I can use the following shortkeys:
ALT+SHIFT+2 : create two columns
ALT+SHIFT+3 : create three columns
...
I want to be able to do the exact same thing in VSCode (without downloading the Sublime Text keybinding since I want the rest to stay the same)
If you search for columns within the "Keyboard Shortcuts" editor, you wil see these options:
workbench.action.editorLayoutTwoColumns
workbench.action.editorLayoutThreeColumns
They are unbound to any keyboard shortcut by default. Click the plus sign to the left of each of these commands in turn and you will get a dialog box where you can enter your chosen keybinding for each and you are done.

Issue with gist indentation

When creating a Gist on Github there is a setting for indentation (tabs or spaces; size 2, 4, or 8). After setting indents to tabs size 4, it changes to tabs size 8 after I save it. Editing it afterwords doesn't do anything. Other settings don't produce the expected result either. Am I misunderstanding this feature somehow? Can't find any documentation regarding this.
I replaced tabs with four spaces in Notepad++ (Ctrl+H), and it works. You can use any numbers of spaces.
Those tabs are automatically displayed as a 8-character-tab in Github Gist.
This is happening because while writing the code, you used the tab key which inserted 8 spaces. Here's a solution that I use.
Copy all your code to a local file and open it in the vi editor.
cat>temp.js
ctrl+shift+v to paste and ctrl+d to save.
vim temp.js (Or change the extension as per your file.)
Run the following command that I found from here. This will half the existing space.
:%s;^\(\s\+\);\=repeat(' ', len(submatch(0))/2);g
Press the esc key then :x and enter key to save and exit vi.
Copy the code in your temp.js file and paste it in your gist with spaces as 4.
Convert the indentation from Tabs to Spaces or Spaces to Tabs by using vscode with the easy and simple following steps.
Open the file with vscode.
Press,
On MacOS, command + shift + p
On Windows, ctrl + shift + p
Type "convert indentation to spaces" and select then option. (As shown in the below fig)
Save the file. (ctrl+s / ⌘+s)

Visual Studio Code - Convert spaces to tabs

I have both TypeScript and HTML files in my project, in both files tabs are converted to spaces.
I want to turn the auto-conversion off and make sure that my project has only tabs.
Edit:
With this setting it seems to work in HTML files but not in TypeScript files.
{
"editor.insertSpaces": false
}
There are 3 options in .vscode/settings.json:
// The number of spaces a tab is equal to.
"editor.tabSize": 4,
// Insert spaces when pressing Tab.
"editor.insertSpaces": true,
// When opening a file, `editor.tabSize` and `editor.insertSpaces` will be detected based on the file contents.
"editor.detectIndentation": true
editor.detectIndentation detects it from your file, you have to disable it.
If it didn't help, check that you have no settings with higher priority.
For example when you save it to User settings it could be overwritten by Workspace settings which are in your project folder.
Update:
To access these settings, you can open File » Preferences » Settings, click the Manage cog icon at the bottom left, or use the keyboard shortcut:
CTRL+, (Windows, Linux)
⌘+, (Mac)
Update:
Now you have an alternative to editing those options manually. Click on selector Spaces:4 at the bottom-right of the editor:
EDIT:
To convert existing indentation from spaces to tabs hit Ctrl+Shift+P and type:
>Convert indentation to Tabs
This will change the indentation for your document based on the defined settings to Tabs.
To change tab settings, click the text area right to the Ln/Col text in the status bar on the bottom right of vscode window.
The name can be Tab Size or Spaces.
A menu will pop up with all available actions and settings.
Ctrl+Shift+P, then "Convert Indentation to Tabs"
If you want to use tabs instead of spaces
Try this:
Go to File ➤ Preferences ➤ Settings or just press Ctrl + ,
In the Search settings bar on top insert editor.insertSpaces
You will see something like this: Editor: Insert Spaces and it will be probably checked. Just uncheck it as show in image below
Reload Visual Studio Code (Press F1 ➤ type reload window ➤ press Enter)
If it doesn't worked try this:
It's probably because of installed plugin JS-CSS-HTML Formatter
(You can check it by going to File ➤ Preferences ➤ Extensions or just pressing Ctrl + Shift + X, in the Enabled list you will find JS-CSS-HTML Formatter)
If so you can modify this plugin:
Press F1 ➤ type Formatter config ➤ press Enter (it will open the file formatter.json)
Modify the file like this:
4| "indent_size": 1,
5| "indent_char": "\t"
——|
24| "indent_size": 1,
25| "indentCharacter": "\t",
26| "indent_char": "\t",
——|
34| "indent_size": 1,
35| "indent_char": "\t",
36| "indent_character": "\t"
Save it (Go to File ➤ Save or just press Ctrl + S)
Reload Visual Studio Code (Press F1 ➤ type reload window ➤ press Enter)
Check this from official vscode setting:
// Controls whether `editor.tabSize#` and `#editor.insertSpaces` will be automatically detected when a file is opened based on the file contents.
"editor.detectIndentation": true,
// The number of spaces a tab is equal to. This setting is overridden based on the file contents when `editor.detectIndentation` is on.
"editor.tabSize": 4,
// Config the editor that making the "space" instead of "tab"
"editor.insertSpaces": true,
// Configure editor settings to be overridden for [html] language.
"[html]": {
"editor.insertSpaces": true,
"editor.tabSize": 2,
"editor.autoIndent": false
}
Below settings are worked well for me,
"editor.insertSpaces": false,
"editor.formatOnSave": true, // only if you want auto fomattting on saving the file
"editor.detectIndentation": false
Above settings will reflect and applied to every files. You don't need to indent/format every file manually.
In my case, the problem was JS-CSS-HTML Formatter extension installed after january update. The default indent_char property is space. I uninstalled it and the weird behavior stops.
Highlight your Code (in file)
Click Tab Size in bottom righthand corner of application window
Select the appropriate Convert Indentation to Tabs
File -> Preferences -> Settings or just press Ctrl + , and search for spaces, then just deactivate this option:
I had to reopen the file so the changes would take effect.
If you want to change tabs to spaces in a lot of files, but don't want to open them individually, I have found that it works equally as well to just use the Find and Replace option from the left-most tools bar.
In the first box (Find), copy and paste a tab from the source code.
In the second box (Replace), enter the number of spaces that you wish to use (i.e. 2 or 4).
If you press the ... button, you can specify directories to include or ignore (i.e. src/Data/Json).
Finally, inspect the result preview and press Replace All. All files in the workspace may be affected.
Set this to false if you are using .sass files and it's giving you the Expected tabs, was spaces error:
"editor.detectIndentation": false
... then select your block of code and indent it by pressing the tab key and indent it back by pressing the shift + tab key.
In my case it was about unchecking
Prettier: Use Tabs
on VSCode settings
{
"editor.insertSpaces": true
}
True works for me.

Convert Tabs-as-spaces width

I have many source code files which are idented with 8 space characters, I want to convert these to 4 character indents. What is the best way of doing this? A technique using eclipse would be preferable.
Select the project(s), then press Ctrl+H to open the Search dialog (or click the Search > File menu).
Make sure the File Search tab is selected at the top.
Enter 8 spaces into the Containing text: field
Select your File name pattern (probably *.java or just *)
Select the scope (probably Selected Resources)
Press the *Replace... button.
As I said in the comments above, however, using spaces for indentation is a fool's game; tabs are the proper abstraction for indentation so that you don't have this problem.