code format collides with existing tslint rules

[dereklin]

I am using nx 0.6.7

I just gave a code formatting a try.

Before formatting, my linting was perfect.

After npm run format

I have tons of errors like:

Parentheses are required around the parameters of an arrow function definition
Unnecessary semicolon
...

How can I adjust the formatting rules to match my existing tslint rules?

[vsavkin]

Could you provide an example of the expression before and after?

[dereklin]

@vsavkin I was able to get around the problem by adding these rules:

    "arrow-parens": [true, "ban-single-arg-parens"],
    "object-literal-key-quotes": [true, "as-needed"],
    "semicolon": [true, "always", "ignore-bound-class-methods"]

If I don't have these rules, my tslint will fail after npm run format. I have uploaded a repo here in case you want to see it -- just take out the three rules at the bottom of tslint.json: https://github.com/dereklin/nx-demo-jest/tree/try-tslint-config

[probert94]

I am having some issues with the formatter too:

• I am using tabs instead of spaces, the formatter converts them back
• I don't use single-line ifs, code formatter instead does.
• The same goes for @Input, @Output and other annotations, which I like to have above the property.
  Code formatter again removes the new line.
• I would also like to use a space between variable and the colon (:).

So I would like to be able to customize the formatting parameters.
Is that already possible?

[vsavkin]

@dereklin I cannot reproduce the issue with the repo. ng lint doesn't show any formatting-related errors before or after I run yarn format. What TypeScript expression causes an issue?

@Springrbua you can customize prettier as follows: https://prettier.io/docs/en/configuration.html

[dereklin]

@vsavkin
Did you remove the last three tslint rules?

Anyways, I have created another repo where I have removed those rules. I have updated the libraries
and run the nx migration.

Here is the repo: https://github.com/dereklin/nx-demo-jest/tree/code-format-tslint-collision

After npm run format, I run npm run lint. I get these errors:

ERROR: C:/Users/Derek/sandbox/nrwl/nx-demo-jest/apps/app1/src/app/+state/app.effects.spec.ts[27, 21]: Parentheses are required around the parameters of an arrow function definition
ERROR: C:/Users/Derek/sandbox/nrwl/nx-demo-jest/apps/app1/src/app/+state/app.effects.spec.ts[37, 21]: Parentheses are required around the parameters of an arrow function definition
ERROR: C:/Users/Derek/sandbox/nrwl/nx-demo-jest/apps/app1/src/app/app.component.ts[21, 4]: Unnecessary semicolon
ERROR: C:/Users/Derek/sandbox/nrwl/nx-demo-jest/apps/app1/src/main.ts[18, 10]: Parentheses are required around the parameters of an arrow function definition
ERROR: C:/Users/Derek/sandbox/nrwl/nx-demo-jest/apps/app2/src/main.ts[13, 10]: Parentheses are required around the parameters of an arrow function definition
ERROR: C:/Users/Derek/sandbox/nrwl/nx-demo-jest/libs/http-client-service/src/http-client-service.ts[17, 7]: Unquoted property 'Accept' found.
ERROR: C:/Users/Derek/sandbox/nrwl/nx-demo-jest/libs/simple-http-service/src/simple-http-service.ts[32, 12]: Parentheses are required around the parameters of an arrow function definition
ERROR: C:/Users/Derek/sandbox/nrwl/nx-demo-jest/prerender.ts[30, 17]: Parentheses are required around the parameters of an arrow function definition
ERROR: C:/Users/Derek/sandbox/nrwl/nx-demo-jest/prerender.ts[39, 41]: Parentheses are required around the parameters of an arrow function definition
ERROR: C:/Users/Derek/sandbox/nrwl/nx-demo-jest/prerender.ts[45, 13]: Parentheses are required around the parameters of an arrow function definition

[probert94]

@vsavkin thanks for your answer.
I tryed configuring prettier, however, I am facing a few issues:

• The inlining of if-statement and a few other things can't be customized
• The fromatcommand is defined like this:
  prettier --single-quote --print-width 120 --write '{packages,e2e}/**/*.ts'
  This means, that I can't use double-quotes, like I do.

[vsavkin]

@dereklin the repo you linked doesn't seem to be in synced with the errors you pasted (there is no prerender.ts). Since you aren't using Npm5 or yarn, the packages you have installed locally are likely different from what I have locally.

If you could reproduce the issue with a new project by creating it using create-nx-workspace and either npm5 or yarn, that would be great. Make sure to check in yarn.lock or package-lock.json.

[vsavkin]

@Springrbua we are going to make the prettier setup more flexible. Instead of passing the single quote and print width, we will rely on .prettierrc. The if statement inlining cannot be customized though.

[vsavkin]

Closing this issue. If the problem persists, please reopen it with a repro created using npm5 or yarn.

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.