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
arealmaas opened this issue Apr 16, 2018 · 14 comments

Comments

@arealmaas
Copy link

@arealmaas arealmaas 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
Copy link
Member

@CiGit CiGit 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.

Loading

@arealmaas
Copy link
Author

@arealmaas arealmaas 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

Loading

@CiGit
Copy link
Member

@CiGit CiGit commented Apr 19, 2018

You didn't install prettier in your project?

Loading

@arealmaas
Copy link
Author

@arealmaas arealmaas 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}'",
...
}

Loading

@CiGit
Copy link
Member

@CiGit CiGit commented Apr 19, 2018

Are you using eslintIntegration and have an eslint config somewhere?

Loading

@arealmaas
Copy link
Author

@arealmaas arealmaas 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"
  ]
}

Loading

@CiGit
Copy link
Member

@CiGit CiGit 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...

Loading

@arealmaas
Copy link
Author

@arealmaas arealmaas commented Apr 19, 2018

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

Loading

@arealmaas
Copy link
Author

@arealmaas arealmaas commented Apr 25, 2018

Will you support the typescript-parser any time soon?

Loading

@CiGit
Copy link
Member

@CiGit CiGit commented Apr 25, 2018

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

Loading

@arealmaas
Copy link
Author

@arealmaas arealmaas 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

Loading

@CiGit
Copy link
Member

@CiGit CiGit 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.

Loading

@arealmaas
Copy link
Author

@arealmaas arealmaas commented Apr 25, 2018

That actually seemed to do the trick! Thanks!

Loading

@arealmaas arealmaas closed this Apr 25, 2018
@github-actions
Copy link

@github-actions github-actions bot commented Apr 13, 2020

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Loading

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Apr 13, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
2 participants