diff --git a/.gitignore b/.gitignore index 4d379ba3764..f009b94ce03 100644 --- a/.gitignore +++ b/.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 diff --git a/.vscode/tasks.json b/.vscode/tasks.json new file mode 100644 index 00000000000..309c50d8e8d --- /dev/null +++ b/.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" + } + } + ] +} diff --git a/DEVELOPMENT.md b/DEVELOPMENT.md index c932077615a..8affc6b777e 100644 --- a/DEVELOPMENT.md +++ b/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. diff --git a/plugins/woocommerce-admin/package.json b/plugins/woocommerce-admin/package.json index 0310e750ada..e1be84b7b25 100644 --- a/plugins/woocommerce-admin/package.json +++ b/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", diff --git a/tsconfig.base.json b/tsconfig.base.json index 15651cb48ce..b92f8e572ec 100644 --- a/tsconfig.base.json +++ b/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" } + ] }