I want to know how to keep additional inline whitespace while using the default JS/TS formatter in VS Code

Take this line, for example:

var x          = 5;
var yyyyy   = 10;
var zzzzzz = 15;

The VS Code Formatter removes the extra spaces between variable names and values.

var x = 5;
var yyyyy = 10;
var zzzzzz = 15;

Is there a way to configure it to keep the formatting as is? Are there specific settings to adjust this behavior? I have looked through the different settings but have not found anything related to this feature.

I am currently using the default formatter (no extensions) for JavaScript files.

javascripttypescriptvisual-studio-codeformattingwhitespace

Answer №1

The default JavaScript and TypeScript formatter in VS Code is powered by the built-in typescript-language-features extension. You can access the source code of this extension at extensions/typescript-language-features/src/languageFeatures/formatting.ts. Basically, it sends a request to a TypeScript language server for formatting guidelines. For more information, check out https://github.com/search?q=repo%3Amicrosoft%2FTypeScript%20formatrequest&type=code.

In short, if you want VS Code's built-in JS/TS formatter to incorporate certain features, you'll have to wait as these functionalities are not available currently. Refer to the following two feature-request issue tickets:

If you support these requests, consider giving them a thumbs up on the issue ticket. Additionally, subscribing to stay updated on discussions and progress would be beneficial. It's recommended to avoid leaving comments like "+1" or "bump" as they add noise to the thread.

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

Is there a way to update a select box in JavaScript without refreshing the entire form?

Recently, I've encountered a challenge with using a form inside a modal. I need to dynamically add new fields to the select box and have them appear without reloading the entire page. Is this feasible? If so, could someone guide me on how to achieve t ...

javascriptjquery

Reducing HTML content to 20 words efficiently through the use of JS and VueJS

Currently in the process of developing a news feed using VueJS and have encountered an issue with rendering the content. Unfortunately, the API I am working with does not allow for easy customization to fit my specific needs. This API provides all the cont ...

javascripthtmlvue.jsvuejs2

Validating CodeIgniter using advanced JavaScript techniques

When trying to insert data using a JavaScript and Bootstrap validation script, I encountered an issue. After entering a value in the text box, a warning pops up stating that the input value already exists. What should I modify in my script to address this ...

javascriptphpjquerytwitter-bootstrapcodeigniter

The 'string' data type cannot be assigned

Let me share how I define and utilize my font sizes in my custom React app: FontSizes.ts const fontSizes = { xs: 'xs', sm: 'sm', base: 'base', lg: 'lg', xl: 'xl' ...

reactjstypescript

Initiate data extraction immediately upon the DOM being fully loaded using NightmareJS

Currently, I am utilizing nightmarejs and facing a challenge that I am struggling to resolve. After using the goto(URL) command, I then proceed to use the evaluate() command to execute specific operations on the webpage. However, I have noticed that while ...

javascriptnode.jsweb-scrapingelectronnightmare

Tips for clearing form validation errors on dynamically populated fields using data stored in localStorage

Currently, I have a form that requires validation. The desired behavior is for the form to display an error message ("this is required") and disable the submit button if any of the input fields are left empty. The validation works correctly as intended, bu ...

javascriptphpjqueryangularjslocal-storage

Navigating to specific location on page following addition of dynamic elements

My website utilizes ajax for dynamically adding content, and I am attempting to make the page automatically scroll to the newly added content. However, despite my efforts, I am unable to get it to function properly. Below is the link I am currently using ...

javascriptjqueryhtmlajax

transferring libraries via functions in TypeScript

As I work on developing my app, I have decided to implement the dependency-injection pattern. In passing mongoose and config libraries as parameters, I encountered an issue with the config library. Specifically, when hovering over config.get('dbUri&ap ...

typescriptfunctiondependency-injectionparameterslibraries

Box2dweb: Interaction Point of Collision

Currently working with box2dweb for a game development project. Need assistance in determining the contact point between a "Circle" and "Box". Aware that this can be achieved through b2ContactListener and the Post-Solve Event. Seeking guidance on impleme ...

javascripthtmlcanvasbox2d

I keep encountering the issue where I receive the message "Unable to access property 'innerText' of an undefined element" when running the Array forEach function. This problem seems to be happening within the HTMLInputElement section of the code

I am facing an issue where the error occurs because "cardTxt" is not recognized as a string. I verified this using typeof syntax, but I'm unable to understand why it can't be a string. This code snippet includes the use of bootstrap for styling. ...

javascriptarraysjsontypeerror

Having trouble with changing images or background images in JavaScript?

Encountering issues with dynamic elements. When I click a button, the following JS function is executed. It displays a stylish CSS alert upon postback and then runs the function. function scrollToTop(sender, args) { window.scrollTo(0, 0); document. ...

javascriptjquerycssimage

Creating an ngFor loop with an ngIf condition for true and false bot conditions

I am attempting to troubleshoot an issue where if my condition is true, return true. If my condition is false, return false. However, currently, if only one condition is true, all conditions are being applied as true. Please help me resolve this problem. ...

javascriptangular

Customize the text displayed on the select box button in a React application

My task involves working with an array of JSON objects structured like this - [ { "country_code": "AF", "country_name": "Afghanistan", "country_flag": " ...

javascripthtmlreactjsselectdrop-down-menu

Having trouble sending a POST request with body parameters in Node.js? The error "undefined req.body.param" might be popping up when you're

I've encountered an issue with my server.js code: const bodyParser = require('body-parser'); const cors = require('cors'); const morgan = require('morgan'); var express = require('express') , http = requir ...

javascriptnode.jsexpresshttp

Tips for incorporating several d3 elements on a single webpage

I am currently facing an issue where I am attempting to add a line graph below a d3 map, but the map and line graph are appearing below where the map should be located. I have tried creating separate div tags with distinct id's, but I am unsure of wha ...

javascriptcssd3.js

Typescript - neglecting a package that lacks typings

I am considering using an open source package that does not have TypeScript bindings. After checking the linked resource, I was unable to find a solution. Although I attempted to use @ts-ignore, it did not function as expected. Could someone please prov ...

typescripttypes

Insert a value within each iteration of ng-repeat

Is it possible to iterate over a set of items and increment the value of X by 10 each time it is repeated? For example: <rect ng-repeat="a in b" x="0" y="0" fill="#00000" width="206.2" height="117.7" class=" {{ a.name }} " /> I am looking to achie ...

javascriptangularjs

A program that removes rows while also decreasing the overall sum

I have implemented a form that allows users to add labor and its price, while also displaying the assigned labor on the same page underneath. My objective is to have functionality where if a user clicks on delete, it will remove the corresponding table ro ...

javascriptphpjqueryajax

There was an issue loading the map on an HTML code that was returned from an ajax request

I'm currently working on building my own personal website, which is also my first webpage, and I'm encountering some difficulties with displaying a Google map. Here's a breakdown of my situation: my webpage consists of four links that load ...

javascriptcssajaxgoogle-maps

Ways to include a variable in a string when using the .open("GET", "[...]") method

Is it possible to include a variable in the URL using JavaScript and PHP interaction? requeteAjax.open("GET", "../src/App/handler.php?id="); For instance, if the event number is 13, the desired URL should be: requeteAjax.open("GET", "../src/App/handler. ...

javascriptphpajax