Use tslint-config-prettier for typescript

[alexjoverm]

What problem does this feature solve?

Similar to how the new vue-cli 3 has eslint-config-prettier in order to use both without conflicts, I think it can be useful to add tslint-config-prettier to achieve the same thing when using typescript.

What does the proposed API look like?

It should be transparent to the user as long as it selects typescript and a formatter on the cli questions

[yyx990803]

Does tsling-config-prettier support --fix via TSLint? Or does it simply turn off conflicting rules and require the user to setup prettier themselves?

[alexjoverm]

Right now it disables conflicting rules, so yeah it assumes prettier is already configured. In that way, it works just as eslint-config-prettier.

[eladcandroid]

That would be great (TSLint + Prettier option in the CLI)

[backbone87]

you can simply npm i -D prettier tslint-plugin-prettier tslint-config-prettier and setup your tslint.json:

{
  "extends": [
    "tslint-config-prettier"
  ],
  "rulesDirectory": ["tslint-plugin-prettier"],
  "rules": {
    "prettier": true
  }
}

the only problem i had with this is that when running npm run lint the prettier rule reports alot of consecutive newline errors. (and doesnt seem to be able to autofix...).

the problem is here:
https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-plugin-typescript/lib/tslint.js#L46

this pads the extracted script with newlines (see https://www.npmjs.com/package/vue-template-compiler#pad )
while the tslint rule for consecutive newlines is disabled by npm run lint, prettier has its own rules.

[backbone87]

ok i have found out what the problem is:
i used fork-ts-checker-webpack-plugin 0.4.3 for my webpack run which used vue-parser to extract the script from vue files. vue-parser comments out padded lines.

vue-cli-service lint uses parseComponent from vue-template-compiler. vue-template-compiler does this too, but only if no script lang is specified:
https://github.com/vuejs/vue/blob/dev/src/sfc/parser.js#L103

(and since v0.4.4 fork-ts-checker-webpack-plugin will use vue-template-compiler too insteadof vue-parser)

so changes to parseComponent need to be made to comment out the padding for linting

[wminshew]

Is there a temporary workaround for this or are you just ignoring those error messages?

[backbone87]

There is no workaround. There needs to be an option in vue-template-compilers parseComponent to comment out newlines (like vue-parser does) when lang="ts" is specified. After that, the option can be used downstream (if not enabled by default).

[backbone87]

i have opened a PR which fixes script content padding inside the vue-cli tslint command

[haoqunjiang]

Now that TSLint is officially deprecated, TSLint support will be fully dropped in the next major version; as for the current major version, no more bug fixes or features will be implemented except for security reasons. So I'm closing this issue now.