Split the GH actions CI into multiple stages (#39210)

* Split the GH actions CI into multiple stages

* Add the -- for npm

* Improve the CI reports

* Use stylish formatting on CI

* Break TSC instead

* Try add the problem register for TSC only on node 12

* Fix GH Actions syntax maybe

.github/tsc.json

@@ -0,0 +1,18 @@
+{
+  "problemMatcher": [
+      {
+          "owner": "tsc",
+          "pattern": [
+              {
+                  "regexp": "^(?:\\s+\\d+\\>)?([^\\s].*)\\((\\d+),(\\d+)\\)\\s*:\\s+(error|warning|info)\\s+(\\w{1,2}\\d+)\\s*:\\s*(.*)$",
+                  "file": 1,
+                  "line": 2,
+                  "column": 3,
+                  "severity": 4,
+                  "code": 5,
+                  "message": 6
+              }
+          ]
+      }
+  ]
+}

.github/workflows/ci.yml

@@ -30,12 +30,19 @@ jobs:
       run: |
         npm uninstall typescript --no-save
         npm uninstall tslint --no-save
-    - name: npm install and test
-      run: |
-        npm install
-        npm update
-        npm test
-        
+    - run:  npm install
+    - run:  npm update
+
+    # Re: https://github.com/actions/setup-node/pull/125
+    - name: Register Problem Matcher for TSC
+      run: echo "##[add-matcher].github/tsc.json"
+
+    - name: Tests
+      run:  npm test -- --no-lint
+
+    - name: Linter
+      run:  npm run lint:ci
+
     - name: Validate the browser can import TypeScript
       run: gulp test-browser-integration
     

Gulpfile.js

@@ -354,7 +354,6 @@ const eslint = (folder) => async () => {
         "node_modules/eslint/bin/eslint",
         "--cache",
         "--cache-location", `${folder}/.eslintcache`,
-        "--format", "autolinkable-stylish",
         "--rulesdir", "scripts/eslint/built/rules",
         "--ext", ".ts",
     ];
@@ -363,11 +362,19 @@ const eslint = (folder) => async () => {
         args.push("--fix");
     }
 
+    // Use stylish format on CI, so that it can be picked up by GH Action's rule matchers
+    if (cmdLineOptions.ci) {
+        args.push("--format", "stylish");
+    }
+    else {
+        args.push("--format", "autolinkable-stylish");
+    }
+
     args.push(folder);
 
     log(`Linting: ${args.join(" ")}`);
     return exec(process.execPath, args);
-}
+};
 
 const lintScripts = eslint("scripts");
 lintScripts.displayName = "lint-scripts";