prettier-vscode@4.0.0 uses prettier@2.x config by default

trivikr commented 4 years ago

Summary

Github Repository to Reproduce Issue

https://github.com/trivikr/prettier-vscode-4-test

Steps To Reproduce:

Clone this repo, and open it in VSCode
Install prettier-vscode extension v4.0.0
Run yarn to install dependencies
Open index.js, and remove trailingComma from the end of array
Notice that prettier-vscode extension adds the trailingComma on Save

Expected result

prettier-config should use default config for the prettier version installed in the workspace

Actual result

prettier-vscode@4.0.0 uses prettier 2 config.

Screen recording

![prettier-vscode-adds-trailingComma](https://user-images.githubusercontent.com/16024985/78379369-1c0efb00-7587-11ea-8c3a-4d1654947fe0.gif)

Additional information

Issue in which prettier 2 config was not used with prettier-vscode@3.20.0: https://github.com/prettier/prettier-vscode/issues/1285

VS Code Version: Version: 1.43.2 Commit: 0ba0ca52957102ca3527cf479571617f0de6ed50 Date: 2020-03-24T07:34:57.037Z Electron: 7.1.11 Chrome: 78.0.3904.130 Node.js: 12.8.1 V8: 7.8.279.23-electron.0 OS: Darwin x64 18.7.0

Prettier Extension Version: Extension Name: "prettier-vscode". Extension Version: "4.0.0".

OS and version: macOS 10.14.6 (18G4032)

Prettier Log Output

Details

``` ["INFO" - 8:38:54 AM] Extension Name: "prettier-vscode". ["INFO" - 8:38:54 AM] Extension Version: "4.0.0". ["INFO" - 8:38:54 AM] Loaded module 'prettier@1.19.1' from '/Users/trivikr/workspace/prettier-vscode-test/node_modules/prettier/index.js' ["INFO" - 8:38:54 AM] Enabling prettier for languages [ "css", "graphql", "html", "javascript", "javascriptreact", "json", "json5", "jsonc", "less", "markdown", "mdx", "mongo", "postcss", "scss", "typescript", "typescriptreact", "vue", "yaml" ] ["INFO" - 8:38:54 AM] Enabling prettier for range supported languages [ "graphql", "javascript", "javascriptreact", "json", "typescript", "typescriptreact" ] ["INFO" - 8:38:57 AM] Formatting /Users/trivikr/workspace/prettier-vscode-test/index.js ["INFO" - 8:38:57 AM] Using ignore file (if present) at /Users/trivikr/workspace/prettier-vscode-test/.prettierignore ["INFO" - 8:38:57 AM] Loaded module 'prettier@1.19.1' from '/Users/trivikr/workspace/prettier-vscode-test/node_modules/prettier/index.js' ["INFO" - 8:38:57 AM] File Info: { "ignored": false, "inferredParser": "babel" } ["INFO" - 8:38:57 AM] No local configuration (i.e. .prettierrc or .editorconfig) detected, falling back to VS Code configuration ["INFO" - 8:38:57 AM] Prettier Options: { "arrowParens": "always", "bracketSpacing": true, "endOfLine": "lf", "htmlWhitespaceSensitivity": "css", "insertPragma": false, "jsxBracketSameLine": false, "jsxSingleQuote": false, "printWidth": 80, "proseWrap": "preserve", "quoteProps": "as-needed", "requirePragma": false, "semi": true, "singleQuote": false, "tabWidth": 2, "trailingComma": "es5", "useTabs": false, "vueIndentScriptAndStyle": false, "filepath": "/Users/trivikr/workspace/prettier-vscode-test/index.js", "parser": "babel" } ["INFO" - 8:38:57 AM] Formatting completed in 31.578346ms. ```

trivikr commented 4 years ago

If you're using prettier@1.19.1 in your projects, the fix is to manually install version 3.20.0 as shown in the screenshot below

SCREENSHOT

ntotten commented 4 years ago

We recommend you use your own configuration file in your project. When a configuration file is present, it will be used. The prettier configuration in the extension is always going to default to the version of prettier installed with the extension - now that is 2.0. You should include a .prettierrc file in your project to maintain control over the settings you would like.

trivikr commented 4 years ago

I would like to request to reopen this issue, so that community attempt to provide a fix if maintainers are ready to accept it.

Proposed fix: Give preference to default configuration of prettier version installed in the workspace.

We recommend you use your own configuration file in your project

Most of my projects are simple, and have no configuration.

We're slowly moving to prettier@2 in projects one-by-one, and it would be difficult for us to use different versions of prettier-vscode extensions in different workspaces.
An easier solution for us would be to uninstall prettier-vscode extension altogether and let husky+lint-staged prettify the code on precommit. But we really like running format on save option in VSCode.

ntotten commented 4 years ago

I'm open to accepting a PR for this if you're willing to do so.

jabranr commented 4 years ago

Just came across this as I am having similar issue with v4. I have a shared prettier config file and it is unable to use that.

Here is the setting in package.json.

  "prettier": "@jabranr-lab/prettier",

Here is the error log:

["INFO" - 10:25:18 AM] Formatting /Users/jabran.rafique/TestProject/src/components/MyIframe/index.js
["ERROR" - 10:25:18 AM] Invalid prettier configuration file detected.
["ERROR" - 10:25:18 AM] Cannot find module '@jabranr-lab/prettier' from '/Users/jabran.rafique/TestProject'
Error: Cannot find module '@jabranr-lab/prettier' from '/Users/jabran.rafique/TestProject'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:717:15)
    at Function.n.resolve (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/loader.js:15:584)
    at Object.transform (/Users/jabran.rafique/.vscode/extensions/esbenp.prettier-vscode-4.0.0/node_modules/prettier/index.js:23283:40)
    at run (/Users/jabran.rafique/.vscode/extensions/esbenp.prettier-vscode-4.0.0/node_modules/prettier/third-party.js:11472:51)
    at async cacheWrapper (/Users/jabran.rafique/.vscode/extensions/esbenp.prettier-vscode-4.0.0/node_modules/prettier/third-party.js:11300:20)
    at async cacheWrapper (/Users/jabran.rafique/.vscode/extensions/esbenp.prettier-vscode-4.0.0/node_modules/prettier/third-party.js:11300:20)
    at async cacheWrapper (/Users/jabran.rafique/.vscode/extensions/esbenp.prettier-vscode-4.0.0/node_modules/prettier/third-party.js:11300:20)
    at async cacheWrapper (/Users/jabran.rafique/.vscode/extensions/esbenp.prettier-vscode-4.0.0/node_modules/prettier/third-party.js:11300:20)
    at async Explorer.search (/Users/jabran.rafique/.vscode/extensions/esbenp.prettier-vscode-4.0.0/node_modules/prettier/third-party.js:11457:22)
    at async Promise.all (index 0)

NB This all works if I switch to v3.20.0

ntotten commented 4 years ago

@jabranr The issue you were having is separate from this. See #1289. It should be resolved in 4.1.1.

uloco commented 4 years ago

Why not just use the prettier version that resides in the project (if there is one) or globally? Why do you need to ship a prettier version at all? I hoped it could be done like the eslint plugin is doing it. I personally think the whole point of prettier (and similar tools) is to have no config at all, which I do not have to share with my colleagues etc.

palicko commented 4 years ago

I fixed this issue by adding two more options to .prettierrc (arrowParens and trailingComma)

{
  "printWidth": 100,
  "semi": false,
  "singleQuote": true,
  "arrowParens": "avoid",
  "trailingComma": "none"
}

trivikr commented 4 years ago

@uloco

Why not just use the prettier version that resides in the project (if there is one) or globally?

That's the ask in this issue, and maintainer has kept it open to community to provide support if they want as per https://github.com/prettier/prettier-vscode/issues/1290#issuecomment-609065352

In my personal/work projects, I'm either switching to prettier@2 or adding config which uses defaults from prettier@1

Example PR which switches to prettier@2 https://github.com/trivikr/cdk-typescript-workshop/pull/12
Example PR which defaults to prettier@1 config https://github.com/aws/aws-sdk-js-v3/pull/1083

Why do you need to ship a prettier version at all?

I believe this is for backup for edge case - where developer might not have prettier installed in the workspace/globally and would still like to use vscode-prettier plugin.

I personally think the whole point of prettier (and similar tools) is to have no config at all

I feel the same, and that's the philosophy prettier has been pushing. The minimal config options were just added to keep community with very diverse opinions happy. I personally dislike that vscode-prettier forces it's community to have prettier config if there's a version mismatch between in-built prettier and the one in the workspace. But this is open source, and community is free to provide support by cutting a Pull Request!

trivikr commented 4 years ago

@palicko

I fixed this issue by adding two more options to .prettierrc (arrowParens and trailingComma)

Yup! I too created this minimal config which uses prettier@1 defaults

{
  "$schema": "http://json.schemastore.org/prettierrc",
  "arrowParens": "avoid",
  "endOfLine": "auto",
  "trailingComma": "none"
}

Refs: https://github.com/aws/aws-sdk-js-v3/pull/1083/commits/5b72c892de26f05744d58cfa7c1a120e44bbcb56

UPDATE: If you don't want to add prettier configuration file and still would like to update to prettier@2, use prettier-v1-config instead

12finger commented 4 years ago

thank you @trivikr! your solution is the best if you want (like i do) to keep .editorconfig in place and derive all settings of prettier from there. now the vs code plugin is playing nicely.

trivikr commented 4 years ago

I just published npm package prettier-v1-config if anyone wants to bump to prettier@2 but continue using prettier@1 default configuration without creating any configuration file.

To use:

just add prettier-v1-config as a devDependency
reference it in package.json as follows: "prettier": "prettier-v1-config"

uloco commented 4 years ago

@trivikr Thanks for the response, i didn’t see that you were also talking about the version in the workspace. I thought it was just the local config. I was just trying to understand why it was built this way in the first place. And maybe some guidance from the maintainers where to add something like that via PR.

gotofritz commented 4 years ago

@ntotten

We recommend you use your own configuration file in your project. When a configuration file is present, it will be used.

I would like to be able to override that. Rationale: I am using the svelte prettier plugin, which is not yet 2.0 compatible, and in my project I have downgraded prettier. But somehow that doesn't work with VSCode - in that case I would like to use the version of prettier bundled with the plugin, not the project's one. At the moment I don't seem to have the choice

zhitomir-oreshenski-mm commented 4 years ago

Hi,

I am also facing same issue with version: 4.1.1

It runs very slow..

Br, Zhi

ntotten commented 4 years ago

@gotofritz I am a bit confused at what you are asking, but it is unlikely I'm going to add a setting to change the config resolution behavior since really there already is one - just add a local config file to your project and you have it set exactly as you want.

ntotten commented 4 years ago

Why not just use the prettier version that resides in the project (if there is one) or globally? Why do you need to ship a prettier version at all? I hoped it could be done like the eslint plugin is doing it.

@uloco We proposed that at one point. MANY people want it to be built in for simple scenarios of just quickly formatting a document outside of a project. The solution we have now is the best match we have been able to get to that satisfies the bulk of the 1m+ users of this extension.

I personally think the whole point of prettier (and similar tools) is to have no config at all, which I do not have to share with my colleagues etc.

If prettier REALLY meant no config, then there wouldn't be any config options at all. The best practice is to have a config file in your project. You can share a very simple config file to solve this problem like what the prettier repo does: https://github.com/prettier/prettier/blob/master/.prettierrc

uloco commented 4 years ago

Will an empty object use the local version? That's kind of neat, didn't knew that. Thanks for pointing it out!

gotofritz commented 4 years ago

but it is unlikely I'm going to add a setting to change the config resolution behavior since really there already is one - just add a local config file to your project and you have it set exactly as you want.

That is the problem I am facing - the local config works for prettier on the CLI (which is triggered by git hooks etc) but not for the plugin. I would like to be able to tell VSCode not to use it, if possible. Thanks for your work either way

ntotten commented 4 years ago

@gotofritz That is a bug then. The extension always looks for the local version of prettier and uses that. Please open a new issue with repro steps.

ntotten commented 4 years ago

Will an empty object use the local version? That's kind of neat, didn't knew that. Thanks for pointing it out!

@uloco Yes, any local config will be used even if it doesn't have any settings in it.

ntotten commented 4 years ago

Version 4.2.0 will fall back to default values for pre-2.0 versions if you have it installed locally. I still recommend you use prettier configurations in each project otherwise this is probably going to happen again sometime. :)

ntotten commented 4 years ago

Unfortunately, I had to revert this change as it caused bugs. It is fairly difficult to detect where a config value is coming from in VS Code. I am still open to accepting a PR to this if somebody really wants to take it on, but given the complexity, I think it's better for people to just set their own config values how they want or use prettier 2.0 defaults.

trivikr commented 4 years ago

I had to revert this change as it caused bugs.

Can you share links to the bugs in this issue?

I am still open to accepting a PR to this if somebody really wants to take it on.

Can you reopen this issue?

ntotten commented 4 years ago

@trivikr The bug was #1323. However, that was really just a silly code mistake on my part. After I investigated though I realized the situation was actually more complex than I realized. Essentially, you need to check to make sure that the user has not set any value at any level of VS Code config (user, project, workspace) then you need to figure out the version of prettier and make sure to apply the right defaults.

It's not impossible, but I don't like the idea of having to maintain this forever for all versions of prettier (i.e. if defaults change in prettier 3).

I'll reopen to give consideration, but unless somebody sends the PR soon, I really don't see the point - by now, most projects will have already been impacted by this and either 1) fixed the config themselves or 2) upgraded.

trivikr commented 4 years ago

I too went through the codebase over the weekend, but the fix was not straightforward for someone new to the code.

most projects will have already been impacted by this and either 1) fixed the config themselves or 2) upgraded.

Makes sense. Since the fix was not straight-forward and there was lack of interest from maintainers/community to take it up - I also either added config in my projects or upgraded them to prettier@2

ntotten commented 4 years ago

Is anyone interested in doing this work? If not I am going to close it.

github-actions[bot] commented 3 years ago

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.

prettier / prettier-vscode