Extension not respecting Prettier config

[mikededo]

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]

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]

Thanks for the feedback!

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

[elramus]

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

[mikededo]

Yep, seems fixed! Thanks 🎉

[Swiftwork]

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]

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]

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]

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]

I've reopened the issue. Thanks!

[daidodo]

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]

@daidodo opened issue https://github.com/daidodo/format-imports-vscode/issues/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.