Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Prettier turns typescript function call with generics into something weird that doesn't work #420

Closed
AlmaasAre opened this issue Apr 16, 2018 · 13 comments

Comments

@AlmaasAre
Copy link

commented Apr 16, 2018

My code turns from:

const result: ApolloQueryResult<ITermScreenQueryResult> =
      await apolloClient.query< ITermScreenQueryResult > (options);

into:

const result: ApolloQueryResult<ITermScreenQueryResult> =
      (await apolloClient.query) < ITermScreenQueryResult > options;

And not sure what could be causing this :|

Using prettier, editorconfig and tslint:

editorconfig

# http://editorconfig.org
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

tslint:

{
  "rules": {
    "ban": false,
    "class-name": true,
    "comment-format": [true, "check-space", "check-lowercase"],
    "curly": true,
    "forin": true,
    "interface-name": true,
    "jsdoc-format": true,
    "label-position": true,
    "member-ordering": [true, "public-before-private", "variables-before-functions"],
    "no-angle-bracket-type-assertion": true,
    "no-arg": true,
    "no-bitwise": true,
    "no-console": [true, "debug", "info", "time", "timeEnd", "trace"],
    "no-construct": true,
    "no-parameter-properties": false,
    "no-debugger": true,
    "no-duplicate-variable": true,
    "no-empty": true,
    "no-eval": true,
    "no-invalid-this": true,
    "no-string-literal": false,
    "no-switch-case-fall-through": false,
    "no-unused-expression": true,
    "no-var-requires": false,
    "no-var-keyword": true,
    "radix": true,
    "switch-default": true,
    "triple-equals": [true, "allow-null-check"],
    "typedef": [
      "call-signature",
      "parameter",
      "property-declaration",
      "variable-declaration",
      "member-variable-declaration"
    ],
    "variable-name": false
  }
}

Prettier:

{
    "useTabs": false,
    "printWidth": 100,
    "tabWidth": 2,
    "singleQuote": true,
    "trailingComma": "all",
    "jsxBracketSameLine": true,
    "parser": "babylon"
}

@CiGit

This comment has been minimized.

Copy link
Member

commented Apr 18, 2018

We do not read from tslint files (yet #414 ) But I don't get this output on latest version at least.

Can you check which prettier version you use ? Over bottom right prettier a tooltip says which version this extension used lately.

@AlmaasAre

This comment has been minimized.

Copy link
Author

commented Apr 18, 2018

Alright, I'm using 1.3.0 of prettier-vscode, but it's using prettier version 1.12.0 it seems: https://prettier.io/blog/2018/04/11/1.12.0.html

@CiGit

This comment has been minimized.

Copy link
Member

commented Apr 19, 2018

You didn't install prettier in your project?

@AlmaasAre

This comment has been minimized.

Copy link
Author

commented Apr 19, 2018

Prettier is installed in my project. When I run the script in terminal, it formats the code correctly. But when I format the code in vscode is make this weird formatting of some function calls. Might be prettier colliding with something else? Not quite sure why it would format it like this, and why you were'nt able to reproduce it.

Using prettier 1.10.2 in the project, but vscode uses 1.12. The script in my package.json:

{...
"autoformat": "prettier es5 --write --loglevel=error '**/*.{ts,tsx,json,js,jsx,css,scss}'",
...
}
@CiGit

This comment has been minimized.

Copy link
Member

commented Apr 19, 2018

Are you using eslintIntegration and have an eslint config somewhere?

@AlmaasAre

This comment has been minimized.

Copy link
Author

commented Apr 19, 2018

No, I have a babelrc, but that shouldn't be a problem..

{
  "sourceMaps": "both",
  "presets": [
    "es2016",
    [
      "es2015",
      {
        "modules": "commonjs"
      }
    ],
    "stage-0",
    "react"
  ]
}
@CiGit

This comment has been minimized.

Copy link
Member

commented Apr 19, 2018

Could you try your file in an empty project?
Or even better, try to debug that output ☺️
I'm out of ideas...

@AlmaasAre

This comment has been minimized.

Copy link
Author

commented Apr 19, 2018

Thanks for helping! I'll try to debug some!

@AlmaasAre

This comment has been minimized.

Copy link
Author

commented Apr 25, 2018

Will you support the typescript-parser any time soon?

@CiGit

This comment has been minimized.

Copy link
Member

commented Apr 25, 2018

Prettier supports typescript. But I'm not sure I understood your question correctly.

@AlmaasAre

This comment has been minimized.

Copy link
Author

commented Apr 25, 2018

Yeah, need the typescript-parser instead of the babylon-parser to make it work correctly. See that you have progress on that part here: #414

@CiGit

This comment has been minimized.

Copy link
Member

commented Apr 25, 2018

#414 is a new option which will read your tslint config file.
You still have a problem with parsing your typescript file.

can you try to remove "parser": "babylon" from your prettier config file? Let the tool infer the right parser.

@AlmaasAre

This comment has been minimized.

Copy link
Author

commented Apr 25, 2018

That actually seemed to do the trick! Thanks!

@AlmaasAre AlmaasAre closed this Apr 25, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.