tsconfig modifications

- moved and updated .vscode/tasks.json up to root level, and add exclusion to .gitignore
- added --pretty to ts:check in wca package.json (because otherwise there's no syntax highlighting in the output, not sure why this is needed with nx and not without)
- added references to root tsconfig.base.json
- update development.md with instructions for ts checking

.gitignore

@@ -4,7 +4,7 @@ Thumbs.db
 
 # IDE files
 .idea
-.vscode/
+.vscode/*
 project.xml
 project.properties
 .project
@@ -13,6 +13,9 @@ project.properties
 *.sublime-workspace
 .sublimelinterrc
 
+# Excluded IDE Files for developer experience tooling within workspace
+!.vscode/tasks.json
+
 # Grunt
 none
 

.vscode/tasks.json

@@ -0,0 +1,29 @@
+{
+	"version": "2.0.0",
+	"tasks": [
+		{
+			"command": "pnpm tsc -b tsconfig.base.json",
+			"type": "shell",
+			"problemMatcher": [ "$tsc" ],
+			"label": "Typescript compile",
+			"detail": "Run tsc against tsconfig.base.json",
+			"runOptions": {
+				"runOn": "default"
+			}
+		},
+		{
+			"command": "pnpm tsc -b tsconfig.base.json --watch",
+			"type": "shell",
+			"problemMatcher": {
+				"base": "$tsc-watch",
+				"applyTo": "allDocuments"
+			},
+			"isBackground": true,
+			"label": "Incremental Typescript compile",
+			"detail": "Incremental background type checks",
+			"runOptions": {
+				"runOn": "folderOpen"
+			}
+		}
+	]
+}

DEVELOPMENT.md

@@ -45,6 +45,21 @@ You might also want to run `pnpm start` to watch your CSS and JS changes if you
 
 You're now ready to develop!
 
+### Typescript Checking
+
+Typescript is progressively being implemented in this repository, and you might come across some files that are `.ts` or `.tsx`. By default, a VSCode environment will run type checking on such files that are currently open. 
+
+As of now, some parts of the codebase that were imported from the Woocommerce-Admin repository, into the `plugins/woocommerce-admin/client` directory, still fail Typescript checking. This has been scheduled on the team's backlog to be fixed.
+
+In order to run type checking across the entire repository, you can run this command in your shell, from the root of this repository:
+
+```sh
+pnpm tsc -b tsconfig.base.json
+```
+
+For better developer experience, the folder `.vscode/tasks.json` has two VSCode tasks to run these commands automatically as well as to parse the output and highlight the errors in the `Problems` tab and in the file explorer pane. The first task runs it once, the second one runs it in the background upon saving of any modified files. This task is also automatically prompted by VSCode to be run upon opening the folder.
+
+
 ## Using Xdebug
 
 Please refer to [WP-ENV official README](https://github.com/WordPress/gutenberg/tree/master/packages/env#using-xdebug) section for setting up Xdebug.

plugins/woocommerce-admin/package.json

@@ -51,7 +51,7 @@
 		"lint:js-fix": "pnpm run lint:js -- --fix --ext=js,ts,tsx",
 		"lint:php": "./vendor/bin/phpcs --standard=phpcs.xml.dist $(git ls-files | grep .php$)",
 		"lint:php-fix": "./vendor/bin/phpcbf --standard=phpcs.xml.dist $(git ls-files | grep .php$)",
-		"ts:check": "tsc --build ./tsconfig.json",
+		"ts:check": "tsc --build ./tsconfig.json --pretty",
 		"ts:check:watch": "npm run ts:check -- --watch",
 		"reformat-files": "wp-scripts format-js -- --ignore-path .eslintignore",
 		"prepack": "pnpm install && pnpm run lint && pnpm run test && cross-env WC_ADMIN_PHASE=core pnpm run build",

tsconfig.base.json

@@ -28,5 +28,33 @@
     /* This needs to be false so our types are possible to consume without setting this */
     "esModuleInterop": false,
     "resolveJsonModule": true
-  }
+  },
+
+  /* 
+    We set files: [] here so that running tsc against this config does not pick up anything, 
+    but only delegates the tsc command execution to the projects specified in references[]
+    More at: https://www.typescriptlang.org/docs/handbook/project-references.html
+  */
+  "files": [],
+	
+  "references": [
+		{ "path": "./plugins/woocommerce/" },
+		{ "path": "./plugins/woocommerce-admin/" },
+		{ "path": "./packages/js/admin-e2e-tests" },
+		{ "path": "./packages/js/api" },
+		{ "path": "./packages/js/components" },
+		{ "path": "./packages/js/csv-export" },
+		{ "path": "./packages/js/currency" },
+		{ "path": "./packages/js/customer-effort-score" },
+		{ "path": "./packages/js/data" },
+		{ "path": "./packages/js/date" },
+		{ "path": "./packages/js/experimental" },
+		{ "path": "./packages/js/explat" },
+		{ "path": "./packages/js/js-tests" },
+		{ "path": "./packages/js/navigation" },
+		{ "path": "./packages/js/notices" },
+		{ "path": "./packages/js/number" },
+		{ "path": "./packages/js/onboarding" },
+		{ "path": "./packages/js/tracks" }
+    ]
 }