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

Is there any distinction between using glob wildcards in the tsconfig.json file when specifying "include" as "src" versus "include" as "src/**/*"?

Is there a distinction between these two entries in the tsconfig.json file? "include": ["src"] "include": ["src/**/*"] Most examples I've come across use the second version, but upon reviewing my repository, ...

magnify within a div with a set width

Looking for a way to make a div both zoomable and scrollable within a fixed-width container using transform: scale(aScaleRatio) for zooming in/out. Check out this demo for achieving the zoom effect. However, the inner div seems to have trouble aligning to ...

Having trouble getting Jest to manually mock in Nestjs?

When setting up a mock service like this: // /catalogue/__mock__/catalogue.service.ts export const CatalogueService = jest.fn().mockImplementation(() => { return { filterRulesFor: jest.fn().mockImplementation((role: Roles): Rule[] => rules.filt ...

Having trouble moving to a different component in Angular?

In my application, I am facing an issue with navigating from List to Details component by passing the ID parameter. It seems that there is no response or error when attempting to call the relevant method. Below, you can find the code snippets related to th ...

Ensuring accurate date formatting of API responses in TypeScript

My REST API returns data in the format shown below:- {"id": 1, "name": "New event", "date": "2020-11-14T18:02:00"} In my React frontend app, I have an interface like this:- export interface MyEvent { id ...

Guide on properly setting up and configuring Cypress while using a proxy

After downloading the Cypress zip file and extracting it, I proceeded to run the npm installation command from within the e2e folder of my Angular project: npm install /path_to_cypress_folder/cypress/Cypress/resources/app The installation was successful a ...

Issue with Angular routing not functioning properly post form submission

Recently, I created a contact form using Angular for the frontend and NodeJs with Nodemailer for the backend. However, I encountered an issue where after submitting the form, instead of redirecting to the default page set in the app, the page remains on th ...

Attempting to connect to "http://localhost:4242/webhook" was unsuccessful due to a connection refusal when trying to dial tcp 127.0.0.1:4242

In my next.js 13 project, I am integrating stripe with TypeScript and configuring the app router. To create a stripe event in my local machine, I ran stripe listen --forward-to localhost:4242/webhook, but now I am encountered with the error message stripe ...

Dynamically load components within a modal window

I am looking for a way to dynamically load a custom component inside a modal while keeping it as flexible as possible. Here is an example : -HTML CODE- <button id="floating_button" class="floating_button animation_floating_in" (click)="loadCustomComp ...

Name the Angular interpolation function with the (click) event

I have a JSON file that defines different dynamic buttons, but when I click on them, the function is not being called. Here's how my JSON file looks: export const liveButtonData = [ { title: 'My Name', function: 'getName()'} ...

What is the best way to limit the type of the second argument based on the type of the

Within the tutorial Exploring How to Extract Parameter Types from String Literal Types Using TypeScript, a fascinating problem is presented without a solution. function calculate(operation, data) { if (operation === 'add') { return da ...

What is the process for uploading an image with express-fileupload?

Looking to upload an image to Cloudinary via Postman using the express-fileupload library for handling multipart forms. Here is a snippet from my index.ts file: import fileUpload from "express-fileupload"; app.use(fileUpload()); In my controller ...

Utilizing WebPack 5 in conjunction with Web workers in a React/Typescript environment

Can someone help me figure out how to make a web worker function properly with create-react-app, Typescript, and Webpack 5? I've been struggling with limited documentation and can't seem to find a clear explanation. I'm trying to avoid using ...

Using typescript with create-react-app - organizing types in a separate file

I'm currently developing a project using Create React App with TypeScript (create-react-app myapp --typescript) In my App.tsx file, I have written some TypeScript code that I want to move to an external file. I have tried creating App.d.ts, index.d.t ...

Troubleshooting Angular 2 Fallback Route Failure

My current project is using Angular 2 Webpack Starter but I am having trouble with the fallback route. In my app.routes.ts file, I have defined the routes as follows: import { Routes } from '@angular/router'; import { HomeComponent } from &apos ...

What is the best way to delegate the anonymous function logic contained within the subscribe() method?

Imagine you have a code block similar to this: constructor(private _http: HttpClient) { this.fetchUsers(5); } employees: any[] = []; fetchUsers(count: number) { this._http.get(`https://jsonplaceholder.typicode.com/users`).subscribe( ...

Tips for accessing Firebase document fields with Angular Firestore (version 7)

My current task involves retrieving a Firebase document property based on the specified model: After successfully locating a document with this code snippet: //Users - collection name, uid - document uid. I am attempting to access the isAdmin property u ...

Only JSON objects with a boolean value of true will be returned

I am working on returning JSON objects in JavaScript/TypeScript that have a true boolean value for the "team" property. For example, the JSON data I am using is as follows: { "state": "Texas", "stateId": 1, "team": true }, { "state": "Cali ...

How can I generate codegen types using typeDefs?

I have been exploring the capabilities of graphql-codegen to automatically generate TypeScript types from my GraphQL type definitions. However, I encountered an issue where I received the following error message: Failed to load schema from code file " ...

Is there a way to easily access the last element of an array in an Angular2 template without the need to iterate through the entire

I'm not trying to figure out how to access looping variables like i, first, last. Instead, my question is about how to retrieve and set variables as template variables. My current approach doesn't seem to be working... <div #lastElement="arr ...