Tips for organizing your Typescript code in Visual Studio Code: avoid breaking parameters onto a

Currently, I am working on an Angular project using Visual Studio Code and encountering an irritating issue with the format document settings for Typescript files. It keeps breaking parameters to a new line:

Here is an example of the code before formatting (alt+shift+f):

this.opportunityId = this.route.snapshot.paramMap.get('opportunityid');
this.opportunityTermVendorId = this.route.snapshot.paramMap.get('vendorid');
this.opportunityTermVendorAssetId = this.route.snapshot.paramMap.get('assetid');
this.opportunityTermCollateralId = this.route.snapshot.paramMap.get('collateralid');

And here is what happens after formatting (alt+shift+f):

this.opportunityId = this.route.snapshot.paramMap.get('opportunityid');
this.opportunityTermVendorId = this.route.snapshot.paramMap.get('vendorid');
this.opportunityTermVendorAssetId = this.route.snapshot.paramMap.get(
  'assetid'
);
this.opportunityTermCollateralId = this.route.snapshot.paramMap.get(
  'collateralid'
);

Even though I have turned off word wrap, I have also attempted to set it to a larger value for the word wrap column. You can see my current overridden settings below:

{
   "git.confirmSync": false,
   "terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe",
   "workbench.iconTheme": "material-icon-theme",
   "editor.formatOnSave": true,
   "prettier.singleQuote": true,
   "editor.wordWrapColumn": 180
 }

Answer №1

Initially, I attempted to use "prettier.printWidth": 180 without success. However, upon further investigation, I discovered that the most recent version of prettier no longer requires the "prettier" prefix before each property.

As a result, my updated .prettierrc file now includes "printWidth": 180, resolving the issue I was experiencing.

Answer №2

Based on the information found here

When setting editor.wordWrap to "off", lines will not wrap. Alternatively, with editor.wordWrap set to "on", lines will wrap based on the width of the viewport. For editor.wordWrapColumn, lines will wrap at the specified value. Finally, when using "bounded", lines will wrap at the minimum of the viewport width and editor.wordWrapColumn.

To achieve this behavior:

"editor.wordWrap": "bounded",
"editor.wordWrapColumn": 180

Answer №3

After some investigation, I discovered that the problem was being caused by the "Prettier" extension included in the "Angular Essentials" package. The solution was as simple as adding "prettier.printWidth": 160 to the settings.

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

Tips for setting up a listener for when the month changes in an ion-datetime object

When the user selects a different month, I need to update the highlightedDates by calling a query to retrieve all the dates of that specific month. This currently works if the user manually chooses a month and year using the top button, but not when they c ...

Middleware in Redux Toolkit is ineffective in managing successful asynchronous actions

After integrating my own middleware into the Redux-Toolkit store using configureStore in my Next.js app, I noticed that the middleware functions appear to be greyed out. I added them via: getDefaultMiddleware({ thunk: { extraArgument: updateNavTabMid ...

Integrate a JS file into my Angular 4 project

For one of my components, I am looking to implement a specific effect: https://codepen.io/linrock/pen/Amdhr Initially, I attempted to convert the JavaScript code to TypeScript, but faced challenges. Eventually, I decided to directly copy the JS file from ...

Error: The page "..." contains an invalid "default" export. The type "..." is not recognized in Next.js

Currently, I have a functional component set up for the Signup page. My goal is to define props within this component so that I can pass the necessary values to it from another component. This is my current approach: export default function SignupPage({mod ...

Using a function to implement *ngFor results in generating a loop

When using *ngFor in Angular with a function that returns data, the function gets called multiple times and can sometimes result in a loop: app.component.ts export class AppComponent { getArray(): string[] { //I can track when this function is c ...

Issue with App.Module imports not functioning properly on Ionic pages

I am currently working on a directive that I want to implement in my pages. However, when I import something into app.module, it seems as though the pages are not considered children of app.module. On the other hand, if I directly import the directive into ...

Run a function from an alternate element

I have successfully created a grid with a button that enables me to control a timer. When I click on the start button in the grid on the home page, the timer begins counting the time. By using a service, I am able to determine whether the timer is active ...

Can you verify that the client's date and time locale are accurate in JavaScript before proceeding with processing?

For my application, I am seeking the current locale datetime. However, before retrieving the date, it is crucial to verify that the local date and time are accurate. If the user has adjusted the date and time incorrectly on their machine, I must prompt a ...

Angular fixes corrupted Excel files

My current project involves using Angular to call an API and retrieve a byte[] of an Excel file. However, I am facing issues with the file becoming corrupted when I convert the byte[] to a file using blob. Can anyone offer assistance with this problem? M ...

Issue with exclude not functioning in tsconfig.json for Angular Typescript deployment

I am encountering an issue with a module within the node_modules directory while compiling my Angular 4 project. The error messages I'm receiving are as follows, even after attempting to exclude the problematic module in the tsconfig.json file. Can an ...

Leveraging Angular Universal Prerendering to fetch content from /static/data.json using the httpClient module

I am currently exploring how to prerender a component using Angular Universal, which involves fetching data with httpClient from the app's /static folder. How can I correctly utilize httpClient in Angular Universal? Is it feasible to access static r ...

The module named "tapable" does not contain an export for the item "Tapable"

While developing a WordPress plugin for a custom Gutenberg block, I encountered a challenge. I needed to incorporate additional scripts in TypeScript and opted to use "$ tsc --watch" along with a "tsconfig.json" file for compilation. Upon installing @word ...

How do I design a reactive form in Angular 8 that dynamically selects another dropdown option based on the selection of one dropdown?

I am a beginner in Angular and currently working on creating a reactive form. I want to have a functionality where selecting one value in a dropdown menu will automatically populate another dropdown menu with relevant data. Here is the object structure tha ...

What is the best approach for managing and obtaining accurate JSON responses when working with PHP API and AngularJS 2 services?

Encountering a backend issue with MySQL, wherein one query is producing a specific dataset: {"candidat":[{"ID":1,"nom":"Danny","prenom":"Hariot","parti":"Quamba","departement":"Ukraine","commune":"Chapayeve"},{"ID":2,"nom":"Shari","prenom":"Adamkiewicz"," ...

Utilizing an external TypeScript class without the need for importing it

Let's consider a scenario where we have a class named Constant. The requirement is to make this class accessible globally without the need for importing, is there a way to achieve this? In the constant.ts file: class Constant { public stati ...

How can one avoid the use of an opening curly bracket in Angular?

Is there a way to avoid the first opening curly brace shown below? <div> { <ng-container *ngFor="let x of [1,2,3,4]; let last=last"> {{x}} <ng-container *ngIf="!last">,</ng-conta ...

What is the method for transmitting a URL API from an ASP.NET Core server to my Angular 2 single application?

Is there a way to securely share the url of the web api, which is hosted on a different server with a different domain, from my asp net core server to my client angular2? Currently, I am storing my settings in a typescript config file within my angular2 ap ...

The phrase 'tsc' is not identified as a valid cmdlet, function, script file, or executable program

Recently, I attempted to compile a TypeScript file into a JavaScript file by installing Node.js and Typescript using the command "npm install -g typescript". However, when I tried to compile the file using the command tsc app.ts, an error occurred: tsc : T ...

`Upkeeping service variable upon route alteration in Angular 2`

Utilizing a UI service to control the styling of elements on my webpage is essential. The members of this service change with each route, determining how the header and page will look. For example: If the headerStyle member of the service is set to dark ...

Encountering a hiccup with dependencies during the transition to Angular 9 with jodit-angular

Encountering the following error when attempting to execute the command npm install after migrating Angular to version 9. Error npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: <a href="/cdn-cgi/l/email-pro ...