docs: improve development docs (#4404)

Author: benfdking

docs/development.md

@@ -79,7 +79,7 @@ In addition to the Python development, you can also develop the UI.
 The UI is built using React and Typescript. To run the UI, you will need to install the dependencies by running the following command.
 
 ```bash
-npm install 
+pnpm install
 ```
 
 Run ide:
@@ -93,7 +93,7 @@ make ui-up
 Similar to UI development, you can also develop the VSCode extension. To do so, make sure you have the dependencies installed by running the following command inside the `vscode/extension` directory.
 
 ```bash
-npm install
+pnpm install
 ```
 
 Once that is done, developing the VSCode extension is most easily done by launching the `Run Extensions` debug task from a Visual Studio Code workspace opened at the root of the SQLMesh repository. By default, the VSCode extension will run the SQLMesh server locally and open a new Visual Studio Code window that allows you to try out the SQLMesh IDE. It opens the `examples/sushi` project by default. To set up Visual Studio Code to run the `Run Extensions` debug task, you can run the following command which will copy the `launch.json` and `tasks.json` files to the `.vscode` directory.

tooling/vscode/tasks.json

@@ -7,7 +7,14 @@
       "label": "extension-watch",
       "type": "shell",
       "command": "pnpm run watch",
-      "problemMatcher": "$ts-webpack-watch",
+      "problemMatcher": {
+        "base": "$ts-webpack-watch",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": "build started",
+          "endsPattern": "build finished"
+        }
+      },
       "isBackground": true,
       "presentation": {
         "reveal": "never",
@@ -19,7 +26,6 @@
       "options": {
         "cwd": "${workspaceFolder}/vscode/extension"
       },
-      "dependsOn": ["react-dev"],
       "dependsOrder": "parallel"
     },
     {
@@ -34,20 +40,21 @@
       },
       "isBackground": true,
       "problemMatcher": {
-        "owner": "npm",
+        "owner": "webpack",
         "pattern": {
           "regexp": "."
         },
         "background": {
           "activeOnStart": true,
-          "beginsPattern": ".",
-          "endsPattern": "."
+          "beginsPattern": "Generating routes",
+          "endsPattern": "built in"
         }
       },
       "presentation": {
         "reveal": "never",
         "group": "watchers"
-      }
+      },
+      "dependsOrder": "parallel"
     },
     {
       "label": "extension-watch-develop",
@@ -57,25 +64,6 @@
       },
       "dependsOn": ["react-dev", "extension-watch"],
       "dependsOrder": "parallel"
-    },
-    {
-      "type": "shell",
-      "command": "pnpm run watch-tests",
-      "problemMatcher": "$tsc-watch",
-      "isBackground": true,
-      "presentation": {
-        "reveal": "never",
-        "group": "watchers"
-      },
-      "group": "build",
-      "options": {
-        "cwd": "${workspaceFolder}/vscode"
-      }
-    },
-    {
-      "label": "tasks: watch-tests",
-      "dependsOn": ["watch-tests"],
-      "problemMatcher": []
     }
   ]
 }