Open Swiftwork opened 2 years ago
Thanks for the feedback!
May I ask how to install yarn v1? My version is:
$ yarn -v
3.2.0
After yarn install
I don't find node_modules but .yarn/.... PnP has changed the behaviour of dependency lookup. I think that's the reason why the plugin can't find Prettier and ESlint. (Another factor is that from v7.4.13 the plugin is webpacked, see https://github.com/daidodo/format-imports-vscode/issues/53).
Currently, I don't see an easy fix for the issue. But I'd be happy to accept PRs if you or anyone wants to help.
To answer some of your questions:
C:\Projects\Git\@swiftwork\reproduction-tsimport>yarn --version
3.2.0
C:\Projects\Git\@swiftwork\reproduction-tsimport>cd ..
C:\Projects\Git\@swiftwork>yarn --version 1.22.15
2. Yarn stores dependencies in `.yarn/` (archives in `.yarn/cache`) folder as you might have noticed and will not install to `node_modules` unless you add [nodeLinker: node-modules](https://yarnpkg.com/configuration/yarnrc#nodeLinker) in the `.yarnrc.yml` file. I am fairly new to the yarn ecosystem as well, but one of the pnp files should be the module resolver. In typescript the import works the same with `pnp` and `node_modules` as long as you run the script using `yarn` as this bootstraps the `pnp` loader.
3. Maybe the webpack section can give you some hints. https://yarnpkg.com/getting-started/migration#enable-the-pnp-plugin-when-using-webpack-4
Thanks for the sharing!
The plugin needs to look up ESLint (node_modules/eslint) and Prettier (node_modules/prettier) in the user workspace to understand their configs. Apparently the new PnP module structure is not compatible.
I wonder if there are any public APIs from PnP/yarn that do the work.
I'll do some more digging into supporting both node_modules and PNP, but these seem to me to be the relevant changes where the extension went from working with PNP to not. v7.4.12 -> v7.4.13
I think I figured out how it is solved for the vscode-eslint and vscode-prettier extensions. Not sure what the best solution for this extension will be but the findings might be worth checking out. Essentially due to the resolving issue, there is a yarn command yarn dlx @yarnpkg/sdks vscode
that "bootstraps" the tools in vscode. This results in the paths explicitly set in the setting.json
.
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"search.exclude": {
"**/.pnp.*": true,
"**/.yarn": true
},
"tsImportSorter.configuration.wrappingStyle": "prettier",
"eslint.nodePath": ".yarn/sdks",
"prettier.prettierPath": ".yarn/sdks/prettier/index.js"
}
One possibility would be to use these paths in this packages resolve step. My guess it was working before due to eslint and prettier being included and shipped somewhere in this extension, but that changed with the new webpack build.
@daidodo Any progress on this? Do you think you could implement two new properties?
{
"tsImportSorter.configuration.prettierPath": ".yarn/sdks/prettier/index.js",
"tsImportSorter.configuration.eslintPath": ".yarn/sdks/eslint/bin/eslint.js"
}
Sorry, I'm super busy recently.
Could you give more details on how that would fix the issue?
I don't think I'll have time to implement a fix soon so if you or anyone wants to help, I'd be very grateful!
@daidodo Thank you for the quick response. I fully understand hard to find the time to maintain open-source libraries. So my thinking with the above settings would be to follow the pattern detailed on the Yarn PnP page about editor sdks. When running the command mentioned for VSCode, Yarn will create a wrapper around the tool (eslint, prettier...) in .yarn/sdks/prettier/index.js
that looks like this:
#!/usr/bin/env node
const {existsSync} = require(`fs`);
const {createRequire, createRequireFromPath} = require(`module`);
const {resolve} = require(`path`);
const relPnpApiPath = "../../../.pnp.cjs";
const absPnpApiPath = resolve(__dirname, relPnpApiPath);
const absRequire = (createRequire || createRequireFromPath)(absPnpApiPath);
if (existsSync(absPnpApiPath)) {
if (!process.versions.pnp) {
// Setup the environment to be able to require prettier/index.js
require(absPnpApiPath).setup();
}
}
// Defer to the real prettier/index.js your application uses
module.exports = absRequire(`prettier/index.js`);
My idea would be that you add to new configuration options to allow developers to specify the prettier/eslint paths and use these first to resolve the module locations then fall back to the requireModule code that is currently used. Alternatively, you could use the existing plugins' two configurations to resolve the paths:
{
"eslint.nodePath": ".yarn/sdks",
"prettier.prettierPath": ".yarn/sdks/prettier/index.js"
}
Regarding assistance, I might be able to help but it would take me a little time to understand the projects. It's also a little more complicated as resolving the modules is done in the core library while the configurations are set in this one.
Describe the bug Versions
v7.4.13
tov7.4.16
can no longer find Prettier and Eslint modules. While the plugin does work with older versionv7.4.12
. Assumed to be related to PnP according to https://github.com/daidodo/format-imports-vscode/issues/70#issuecomment-1094722955To Reproduce Steps to reproduce the behavior: Reproduction
Expected behavior Continue working as it has :).
Actual behavior
OS and VS Code:
package.json
.prettierrc/.prettierrc.js/prettier.config.js/.prettierrc.toml filename: .prettierrc.js
.editorconfig
Additional information
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.