Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to format all my vscode files from 4 space indentation to 2 spaces?

How to format all vscode files in my application folder so that all existing codes be formatted to two spaces from 4 space indentation?

I understand that at the bottom of my VSStudio web editor, I can click on Spaces to change the code indention/spacing of a particular file. I have several files though - I have copied and paste some code from React-Bootstrap docs (e.g navbar, list group, jumbotron).

I am also trying to use bootstrap in my REACT folders that has built in boiler plate codes that does not match with bootstraps boiler plate codes. I just want to be able to synchronize all codes into one type of indention to make the codes cleaner and readable.

Is there an easy way, or a keyboard short cut perhaps, or a vscode built in programming that allows all codes to be follow the same number of spacing/indentation to all files in my project folder?

Thanks in advance.

like image 756
Gel Avatar asked Feb 21 '18 03:02

Gel


2 Answers

How to turn 4 spaces indents in all files in VS Code to 2 spaces

  • Open file search
  • Turn on Regular Expressions
  • Enter: ((( {2})(?: {2}))(\b|(?!=[,'";\.:\*\\\/\{\}\[\]\(\)]))) in the search field
  • Enter: $3 in the replace field

How to turn 2 spaces indents in all files in VS Code to 4 spaces

  • Open file search
  • Turn on Regular Expressions
  • Enter: ((( {2}))(\b|(?!=[,'";\.:\\*\\\/{\}\[\]\(\)]))) in the search field
  • Enter: $3$3 in the replace field

NOTE: You must turn on PERL Regex first. This is How:

  • Open settings and go to the JSON file
  • add the following to the JSON file "search.usePCRE2": true
like image 69
casual234 Avatar answered Oct 21 '22 19:10

casual234


You probably want these in your settings:

"editor.tabSize": 2,
"editor.insertSpaces": true,
"editor.detectIndentation": false,

Particularly the last one as it will override the prior two if set to true.

As to whether it is possible to format all files in a folder or the workspace in one go, that is not possible via built-in functionality of vscode. However there is a new extension that looks interesting:

format files extension : format all files in a folder or the workspace.

It is new and has no ratings so you will have to test it and let us know if it works :}

like image 6
Mark Avatar answered Oct 21 '22 18:10

Mark