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

Extension not respecting Prettier config #70

Closed
mikededo opened this issue Apr 6, 2022 · 11 comments
Closed

Extension not respecting Prettier config #70

mikededo opened this issue Apr 6, 2022 · 11 comments
Assignees
Labels
bug Something isn't working

Comments

@mikededo
Copy link

mikededo commented Apr 6, 2022

Describe the bug

The extension is not respecting the Prettier config file. In my case it is defined as a .prettierrc.json.

To Reproduce

The configuration we are using is for Prettier is:

// .prettierrc.json
{
    "printWidth": 100,
    "tabWidth": 4,
    "trailingComma": "none",
    "singleQuote": true
}

Expected behavior

The following line 84 columns and it does not break the printWidth prop of the config file:

import { ComponentOne, ComponentTwo, ComponentThree } from '@company/some-library';

When formatting the code with VSCode, the line is kept as it should, since it respects Prettier. Furthermore, the sorter should not wrap the line, nor change the tabWidth.

Actual behavior

When running the extension, the code gets formatted to the following:

import {
  ComponentOne,
  ComponentTwo,
  ComponentThree
} from '@company/some-library';

As I supose, it breaks the line since it overflows the default 80 columns. Also, it uses a tabWidth of 2, which is not the expected.

OS (please complete the following information):

  • OS: Manjaro Linux
  • Version: 5.15 Linux Kernel

VS Code (please complete the following information):

  • Version: 1.66.0

package.json (please remove any sensitive info)

I'm not allowed to share the package.json file.

.prettierrc/.prettierrc.js/prettier.config.js/.prettierrc.toml (if any)

filename: .prettierrc.json

{
    "printWidth": 100,
    "tabWidth": 4,
    "trailingComma": "none",
    "singleQuote": true
}

Installed VS Code extensions

[Execute $ code --list-extensions in terminal to get the list. How to run VS Code from terminal in MacOS]

aaron-bond.better-comments
adpyke.codesnap
akamud.vscode-theme-onedark
albert.TabOut
bierner.github-markdown-preview
bierner.markdown-checkbox
bierner.markdown-emoji
bierner.markdown-footnotes
bierner.markdown-preview-github-styles
DavidAnson.vscode-markdownlint
dbaeumer.vscode-eslint
dozerg.tsimportsorter
dsznajder.es7-react-js-snippets
eamodio.gitlens
esbenp.prettier-vscode
formulahendry.auto-rename-tag
Gruntfuggly.todo-tree
helgardrichard.helium-icon-theme
mhutchie.git-graph
miquelddg.dart-barrel-file-generator
ms-azuretools.vscode-docker
ms-vscode.vscode-typescript-next
pflannery.vscode-versionlens
redhat.vscode-yaml
richie5um2.vscode-sort-json
rid9.datetime
sburg.vscode-javascript-booster
VisualStudioExptTeam.vscodeintellicode
wix.glean
wmaurer.change-case
yzhang.markdown-all-in-one
@elramus
Copy link

elramus commented Apr 6, 2022

I'm seeing the same issue, starting in version 7.4.13. Rolling back to 7.4.12 solves it. In our case "semi": false is not being respected. Here's our .prettierrc:

{
	"bracketSpacing": true,
	"printWidth": 99,
	"semi": false,
	"tabWidth": 4,
	"trailingComma": "es5",
	"useTabs": true
}

Edit: The extension's output seems to confirm it's having trouble with prettier:

[2022-04-06T12:04:20.437] [WARN] format-imports.loadPretConfig - Failed to load Prettier/EditorConfig config for filename: /Users/dramus/Sites/web-legos/src/components/selectors/SalesRoleSelector.tsx with error: Cannot read properties of undefined (reading 'sync')

@daidodo daidodo self-assigned this Apr 6, 2022
@daidodo daidodo added the bug Something isn't working label Apr 6, 2022
daidodo added a commit to daidodo/format-imports that referenced this issue Apr 6, 2022
@daidodo
Copy link
Owner

daidodo commented Apr 6, 2022

Thanks for the feedback!

Please try v7.4.16 and tell me if you still have problems.

@elramus
Copy link

elramus commented Apr 7, 2022

Huzzah, looks like that did it! Thanks for the awesome extension 🚀

@mikededo
Copy link
Author

mikededo commented Apr 7, 2022

Yep, seems fixed! Thanks 🎉

@mikededo mikededo closed this as completed Apr 7, 2022
@Swiftwork
Copy link

Unfortunately, I still seem to have this issue with version v7.4.16 while it works in v7.4.12. Worth noting is that I am using yarn with pnp modules.

[2022-04-08T14:03:30.406] [INFO] default - os: {
  arch: 'x64',
  platform: 'win32',
  type: 'Windows_NT',
  release: '10.0.22000',
  totalmem: 17024741376,
  freemem: 6524624896,
  EOL: '\r\n'
}
[2022-04-08T14:03:30.407] [INFO] default - vscode: { version: '1.66.1' }
[2022-04-08T14:03:34.342] [INFO] vscode.resolveConfig - Resolving config for fileName: C:\path\to\file.tsx languageId: typescriptreact
[2022-04-08T14:03:34.344] [WARN] format-imports.requireModule - Cannot find prettier from path: C:\path\to\file.tsx thus use pre-packed
[2022-04-08T14:03:34.344] [WARN] format-imports.loadPretConfig - Failed to load Prettier/EditorConfig config for filename: C:\path\to\file.tsx with error: Cannot read properties of undefined (reading 'sync')
[2022-04-08T14:03:34.384] [WARN] format-imports.requireModule - Cannot find eslint from path: C:\path\to\file.tsx thus use pre-packed
[2022-04-08T14:03:34.401] [WARN] format-imports.loadESLintConfig - Failed to load ESLint config for fileName: C:\path\to\file.tsx with error: Cannot read config file: C:\path\to\project\.yarn\__virtual__\eslint-config-next-virtual-8bde479ba4\0\cache\eslint-config-next-npm-12.0.10-8e22703dc2-37f84056f8.zip\node_modules\eslint-config-next\core-web-vitals.js
Error: Cannot find module 'C:\path\to\project\.yarn\__virtual__\eslint-config-next-virtual-8bde479ba4\0\cache\eslint-config-next-npm-12.0.10-8e22703dc2-37f84056f8.zip\node_modules\eslint-config-next\core-web-vitals.js'
Referenced from: C:\path\to\project\.eslintrc.json
[2022-04-08T14:03:34.401] [INFO] format-imports.formatSource - Formatting C:\path\to\file.tsx with enhanced config: {
  configurationFileName: 'import-sorter.json',
  autoFormat: 'onSave',
  formatExports: true,
  exclude: [ 'node_modules', 'gen' ],
  excludeGlob: [],
  sortImportsBy: 'paths',
  groupRules: [
    '^react(-dom)?$',
    '^@angular/',
    '^vue$',
    '^node:',
    {},
    '^[@]',
    '^[.]'
  ],
  sortRules: { paths: [ '_', 'aA' ], names: [ '_', 'aA' ] },
  keepUnused: [],
  emptyLinesBetweenGroups: 1,
  emptyLinesAfterAllImports: 1,
  removeLastSlashInPath: false,
  removeLastIndexInPath: false,
  wrappingStyle: 'prettier',
  development: { enableDebug: false },
  insertFinalNewline: 'preserve',
  eof: '\n',
  eol: 'LF',
  force: false
}
[2022-04-08T14:03:34.485] [INFO] vscode.formatDocument - Finished format

@daidodo
Copy link
Owner

daidodo commented Apr 8, 2022

Hi, could you open a new issue?
From the logs, neither prettier nor eslint could be found. Did you install all the dependencies?
It'd be better if there's a demo project to reproduce the issue.
Thanks!

@Swiftwork
Copy link

Swiftwork commented Apr 8, 2022

Sure I can open a new issue, just thought it might be better to re-open this one as it seemed related rather than duplicating. I can confirm that the dependencies are installed as they are used by other tools and downgrading the version to 7.4.12 finds the modules. I don't expect missing modules to be the issue. I'll attempt to create a simple reproduction you can use.

@Swiftwork
Copy link

Here is a basic reproduction https://github.com/Swiftwork/reproduction-tsimport can you confirm if you want to create another issue or re-open this one?

@daidodo daidodo reopened this Apr 9, 2022
@daidodo
Copy link
Owner

daidodo commented Apr 9, 2022

I've reopened the issue. Thanks!

@daidodo
Copy link
Owner

daidodo commented Apr 11, 2022

Hi @Swiftwork,

I've checked your demo project and can confirm your issue is related to yarn and pnp. Could you create a new issue to address it?

PS, I'm not familiar with pnp. Could you provide instructions to setup and test if all dependencies are installed and working?
Thanks!

@Swiftwork
Copy link

Swiftwork commented Apr 11, 2022

@daidodo opened issue #72. Yarn works very similarly to npm and instructions can be found here https://yarnpkg.com/getting-started/migration. The reproduction should probably not need any installation to work as it uses the Zero-installs mode, but you can run yarn install in the command line to make sure nothing is missing. This requires yarn v1 to be installed globally though.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

4 participants