techtony92 · September 26, 2024 05:31
diff --git a/Creating a Webpack config written in typescript , with VScode supporting Yarn PnP b/Creating a Webpack config written in typescript , with VScode supporting Yarn PnP
 Steps to use Typescript for a Webpack configuarion file:
 1) For VSCode, make sure your window is opened to the containing workspace folder directly.
 2) Install yarn via corepack and set your version. 
 3) Set up a yarnrc.yml to contain fields: nodeLinker: pnp, pnpMode: loose & yarnPath 
 (for some reason my yarn path wasn't populating nor was the releases folder being created with the respective yarn cjs version file,
 so you may need to create the releases folder : .yarn/releases/ --> yarn-version number.cjs. If you don't have this file,
 you need to download it. Thats what i did and my version was yarn 4.5.0).
 4) Install required dependencies: typescript ts-node @types/node @types/webpack
 4.2) Run yarn tsc --init to create a tsconfig.json file and modify the following rulesets inside the top level compiler options:
    "rootDir": "./",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
 And create a ruleset for ts-node outside of compiler options:
    "ts-node": {
    "esm": true,
    "compilerOptions": {
      "module": "CommonJS",
      "moduleResolution": "NodeNext"
    }
  },
 And make sure to include you src folder if using one, or where you primary project files live, mine are in a src directory so:
  "include": ["./src",]
 5) Enable pnp support for vscode by running "yarn dlx @yarnpkg/sdks vscode". This is why step 1 needs to be done
 (Also make sure VSCode has a zip file support extension installed).
 6). Reload your window by using ctrl/command + shift + p , then choose "Developer: Reload Window"
 7). Open a random .ts file and at the bottom right, you will see a tab with 'TypeScript' language options and to the left of it
 some {}. Click the brackets and choose select version for typescript for the workspace.(The command in step 5 enables pnp support and
 also provides the typescript version for pnp support needed so this is the one to switch to). Also make sure VScode is up to date
 (i needed to update vscode as well).
 You should now be able to use yarn with pnp and vscode with a webpack config file written in typescript (webpack.config.ts)
	Steps to use Typescript for a Webpack configuarion file:
	1) For VSCode, make sure your window is opened to the containing workspace folder directly.
	2) Install yarn via corepack and set your version.
	3) Set up a yarnrc.yml to contain fields: nodeLinker: pnp, pnpMode: loose & yarnPath
	(for some reason my yarn path wasn't populating nor was the releases folder being created with the respective yarn cjs version file,
	so you may need to create the releases folder : .yarn/releases/ --> yarn-version number.cjs. If you don't have this file,
	you need to download it. Thats what i did and my version was yarn 4.5.0).
	4) Install required dependencies: typescript ts-node @types/node @types/webpack
	4.2) Run yarn tsc --init to create a tsconfig.json file and modify the following rulesets inside the top level compiler options:
	"rootDir": "./",
	"allowSyntheticDefaultImports": true,
	"esModuleInterop": true,
	And create a ruleset for ts-node outside of compiler options:
	"ts-node": {
	"esm": true,
	"compilerOptions": {
	"module": "CommonJS",
	"moduleResolution": "NodeNext"
	}
	},
	And make sure to include you src folder if using one, or where you primary project files live, mine are in a src directory so:
	"include": ["./src",]
	5) Enable pnp support for vscode by running "yarn dlx @yarnpkg/sdks vscode". This is why step 1 needs to be done
	(Also make sure VSCode has a zip file support extension installed).
	6). Reload your window by using ctrl/command + shift + p , then choose "Developer: Reload Window"
	7). Open a random .ts file and at the bottom right, you will see a tab with 'TypeScript' language options and to the left of it
	some {}. Click the brackets and choose select version for typescript for the workspace.(The command in step 5 enables pnp support and
	also provides the typescript version for pnp support needed so this is the one to switch to). Also make sure VScode is up to date
	(i needed to update vscode as well).
	You should now be able to use yarn with pnp and vscode with a webpack config file written in typescript (webpack.config.ts)
No results found