Currently, I am utilizing Visual Studio Code along with Prettier, and I have noticed that the function:
(token: string) => this.token = token
is being transformed into:
(token: string) => (this.token = token)
This modification seems to decrease readability. Is there a method to avoid this?
The reason for this issue is the no-return-assign rule. You can find more information about it here.
Surprisingly, your arrow function actually translates to
(token: string) => {return this.token = token}
Even though it may not seem apparent at first glance, there is indeed a return statement included due to the assignment operation.
There are only two options with this rule - either allow when parentheses are present or disallow completely.
To address the "readability issue," consider using curly braces or potentially disabling the rule (although this is not recommended).
If you're waiting for a more open-minded code formatter to come around, here's a workaround (let me know if one already exists).
First, locate and open the following file:
%USERPROFILE%\.vscode\extensions\esbenp.prettier-vscode-5.8.0\node_modules\prettier\index.js~/.vscode/extensions/esbenp.prettier-vscode-5.8.0/node_modules/prettier/index.js(where %USERPROFILE% typically represents C:\Users\YourUsernameHere\)
Next, search for
case "AssignmentExpression":return true to return false. I located this on line 41587, but remember that it may shift in future Prettier versions, so rely on Ctrl + F to navigate.
After saving the file, restart VSCode and witness the magic.
I noticed that meddling with the internal workings of VSCode on macOS might trigger some undesired responses. Look for a settings icon in any error messages, choose to ignore the error, then restart VSCode for normal functionality.
To customize your configuration, consider adding a config file in formats like JSON, JavaScript, YAML, and more. This link might offer assistance:
When working with Arrow Functions, it's recommended to include "arrowParens": "aviod" in your .prettierrc file if you're utilizing a JSON schema to prevent automatic addition of parenthesis.
My goal is to validate a number input field using Angular2: <input type="number" class="form-control" name="foo" id="foo" [min]="0" [max]="42" [(ngModel)]="foo" formControlName="foo"> In Chrome, everything works perfectly because it ignores ...
Is it possible to bypass a validator rule in Angular 2-5's FormBuilder if another property within the FormBuilder group is set to a certain value? For example, consider the following code snippet: this._fb.group({ "stake": [data.stake, ...
I am currently facing an issue while testing a component that utilizes two resolvers (pagesResolver and UploadResolver): Below is the code snippet for my component: export class AdminPagesComponent implements OnInit { fileUploads$: Observable<FileUpl ...
In my Angular project, I have been utilizing the npm module punycode. However, I recently noticed that VsCode is indicating that this module is deprecated. Upon further investigation at https://nodejs.org/api/punycode.html#punycode_punycode, it has been co ...
I have been working on integrating Sign in with Apple into an Angular website. The implementation process begins with adding to the index.html file. Then I created a service named apple-login-service.ts using scriptjs. Here is the code for the apple but ...
After running the command ionic cordova run android --device, everything functions properly. However, when attempting the same command with the --prod flag, the input click fails to display the keyboard despite implementing the (onFocus) attribute in the & ...
Consider this example: type UpdateFieldValue<T extends Record<string, unknown>> = (key: keyof T, value: SomeType) => void The goal is to have SomeType represent the value type of the property (key) within object T, with key being provided t ...
I am currently in the process of compiling https://github.com/Microsoft/vscode from the source code, but I am facing some challenges. After successfully running scripts\npm.bat install, I proceeded to run scripts\code.bat and a strange window app ...
I am working on a TeamSeasonComponent with the URL http://localhost:4200/teams/season/<team_id>. On this page, there are links to other team's pages which would take me to http://localhost:4200/teams/season/team_2_id>. I switch between these ...
Can someone help me with this issue? I'm facing an error with the JSON data retrieved from an API: ERROR in src/app/weather/weather.component.ts(39,30): error TS2339: Property 'main' does not exist on type 'Iweather[]' Here is ...
If I am looking to verify the length of a string in two different ways (either fixed or within a specific range), I can do so using the following examples: /* Fixed check */ check('abc', {length: 1}); // false check('abc', {length: 3}) ...
As a first-year university student, I recently discovered that the canDeactivate() guard in Angular is deprecated, while the canDeactivateFn guard functions without any issues. Admittedly, navigating through official documentation is still new to me. From ...
I have a unique issue that I haven't been able to find a solution for on StackOverflow: Within an Angular 6 service, I am trying to call a function from another service using TypeScript. Here is the code snippet: Service1: myArray: Array<IMyInte ...
Recently, I encountered a situation where I needed to utilize an abstract class. export abstract class ABaseModel { public static isKeyOf<T>(propName: (keyof T)): string { return propName; } } Following that, I also created another class wh ...
I am looking to define a specific type like this: type RenderItems<T> = { [K in keyof T]: { label: string; options: { defaultValue: T[K]['options'][current_index_of_array]; item: (value: T[K][&apo ...
Is there a way for node's module loader to support TS's baseUrl compiler option? With the introduction of the baseUrl compiler option in TS 2, project relative require() and import requests are now possible. However, this feature requires that ...
I am encountering an issue with extracting the selected value from the Datepicker component in the flowbite-react library while using it with NextJS. The component is being displayed correctly. I attempted the code below, but it does not return anyth ...
I am interested in using a directive to draw a triangle above a series of div elements. In my scenario, I have four squares and two values: charge and normal. The value of charge determines the color of the squares, while normal is used for drawing the t ...
Currently, my goal is to create a modal using angular-ui-bootstrap combined with typescript. To begin, I referenced an example from this link (which originally utilizes jQuery) and proceeded to convert the jQuery code into typescript classes. After succes ...
After passing functions from one component to its parent and then through context, updating the state works fine. However, there is an issue with accessing the data inside these functions. They continue to show as the initial data rather than the updated v ...