Adjusting the tab size and space size to their default settings within VSCode

I'm currently facing an issue with my VSCode setup. I am trying to configure the space size to be equal to 1 and tab size to be equal to 2 as the default for every project. However, despite my efforts, it keeps reverting back to spaces: 4 for each new project. Interestingly, when I manually set the spaces to 2 and run a Beautify file, everything appears correctly with a space size of 2. But as soon as I save the file, it automatically formats it back to an indent size of 4. How can I make sure that the default is always equal to 2?

Even after making changes in User settings,

htmlcssvisual-studio-code

Answer №1

VSCode typically attempts to detect the indentation settings for a file on its own. To override this behavior, you can manually set editor.detectIndentation to false.

// By disabling auto detection, you can specify your preferred tab size and whether to use spaces or tabs.
  "editor.detectIndentation": false,

Answer №2

Looking to establish project-wide formatting options? Check out EditorConfig, a convenient standard that can help: .

If you're using VSCode, there's an extension available that supports EditorConfig: https://github.com/editorconfig/editorconfig-vscode

While this may not directly address your specific question, utilizing EditorConfig can still be beneficial for maintaining consistent formatting across different editors. Simply download the plug-in for each editor you use and keep your standards intact.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Looking to retrieve HTML elements based on their inner text with queryselectors?

I am looking to extract all the HTML divs that contain specific HTML elements with innerText = ' * ' and save them in an array using Typescript. If I come across a span element with the innerText= ' * ', I want to add the parent div to ...

javascripthtmltypescriptqueryselector

In HTML, the usage of "*" and <body> element within a <style

Can you explain the distinction between * and body when used in the style tag of HTML? Providing examples would greatly aid my understanding. Thank you! ...

html

Manipulating the content of a specific row's table cells with a text box in jQuery Datatables

I am working with a jQuery datatable that consists of only one column. Every time a row is selected, a panel opens with a text box that automatically populates with the name of the selected td. I am trying to figure out how to edit the name of the selected ...

javascriptjqueryhtml

What is the best way to wrap the countdown numbers with <span> tags?

I have implemented the following countdown script: var clock = document.getElementById("timeleft"), tdy = new Date(1494979200000); countdown.setLabels( '| <span class="time-label">second</span>| <span class="time-label">minute< ...

javascriptjqueryhtmlcountdownjs.js

Trimming Picture on User's Device

Currently, I am utilizing the jQuery ImgAreaSelect 0.9.10 plugin to crop images that are uploaded by users. The data input format being used is "multipart/form-data". Upon cropping an image with the plugin, it provides me with coordinates in pixels. Howev ...

javascriptjqueryhtmlimage

The drawback of using a datepicker within an Angular input field

When attempting to open the Angular Material datepicker, it was appearing above the input field. How can I make it open below the input field instead? <mat-form-field appearance="outline" class="w-100 date-class"> < ...

cssangularangular-materialmat-datepickermat-form-field

Having trouble setting a value as a variable? It seems like the selection process is not functioning properly

My Hangman game has different topics such as cities and animals. When a user selects a topic, the outcome should be a random item from that specific topic. For example: London for cities or Zebra for animals. Currently, I am only generating a random lett ...

javascripthtmlvariablesdomrandom

Is there a way to set the content to be hidden by default in Jquery?

Can anyone advise on how to modify the provided code snippet, sourced from (http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_show), so that the element remains hidden by default? <!DOCTYPE html> <html> <head> <scrip ...

javascriptjqueryhtmlcssajax

The onClick event is not functioning properly with React's select and option elements

Looking for a way to get the option value from each region? const region = ['Africa','America','Asia','Europe','Oceania']; <div className="options"> <select> ...

javascripthtmlreactjsjsx

Is the "footer" div automatically nested within the "main" div if they are not nested in the code?

Within my code structure, I currently have the following: <html> <head> ... </head> <body> <div id="body"> <div id="main"> ... </div> <div id="foot ...

htmlcss

Is there a way to make this display appear on vscode?

Can anyone help me figure out which setting or plugin I need to enable in VSCode to get the same hover feature as shown in this screenshot from a YouTube tutorial? I can't seem to replicate it with the code provided... // Here are the contents of my ...

visual-studio-codenext.js

Exploring the World of Github on Windows: Understanding the 'master' and 'gh-pages' Branches

I have developed a simple jQuery plugin and uploaded it to Github. I am using both the Github website and Github for Windows to manage this project. However, when I try to include the .js or .css files from Github using the Raw links, my browser fails due ...

javascriptjquerycssgithubgithub-for-windows

Ways to assign a CSS class specifically for images

.calendarList { background-image: url('/resource3/hpsc/common/images/calendar.png'); background-position: 135px 50%; background-repeat: no-repeat; cursor:pointer; } <input type="text" id="toDatepicker" class="cal ...

javascriptjquerycss

Modify the hue of the iron-icon upon being tapped

There's a simple example I have where my goal is to modify the color of an iron-icon when it's tapped. To achieve this, I'm utilizing iron-selector for tapping: <template> <style> :host { display: block; padding: 10 ...

javascriptcsspolymer

Rendering the page using ReactDOM.render

Just started with ReactJS, I'm struggling to figure out why my page isn't displaying anything - <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> ...

javascripthtmlreactjs

Alignment issue with text in Vuetify Datatables cells

I'm experimenting with Vuetify on my Laravel Vue application, and everything seems to be working fine except for the DataTables styles. The padding of the cells is not vertically center aligned as expected. Here's a screenshot Interestingly, the ...

cssvue.jsbootstrap-4vuetify.js

A versatile CSS solution for fixed background images that stretch to fit any screen height across multiple browsers

Similar Question: Stretch and Scale CSS Background I am interested in finding a method to create a background with specific criteria: - remain fixed in place - adjust proportionally based on the window's height - work across all browser types or ...

cssbackgroundheightfixedstretched

Conceal elements of a rectangular shape using CSS

https://i.stack.imgur.com/ebaeI.jpg I need help hiding the second rectangular shape on my website. I want the width to be 100% and responsive, but whenever I use position: absolute; with right:-10%, it's not working as expected. Even trying body { ma ...

htmlcss

Tips on connecting a file upload button to a flip card

In my current project located in index.html, I have integrated a flip card as a profile photo feature. Additionally, I have included a file uploader button on the page. However, I am struggling to connect the functionality of the file uploader button to au ...

htmlcss

The HtmlHelper ActionLink consistently establishes the current controller instead of allowing for the specification of another controller

I have been utilizing the HtmlHelper class to incorporate some code into my layout Navbar as a menu. Here is the code snippet: public static MvcHtmlString MenuLink(this HtmlHelper helper,string text, string action, string controller) { ...

htmlbootstrap-4asp.net-mvc-5