change eslint workflow to use different method and action (https://github.com/woocommerce/woocommerce-blocks/pull/3693)

Our existing worfklow was giving a cryptic error that I couldn’t troubleshoot so decided to just switch to a different method

plugins/woocommerce-blocks/.github/workflows/js-css-linting.yml

@@ -6,37 +6,74 @@ on:
     branches: [trunk]
 
 jobs:
-  check:
-    name: All
-
+  Setup:
+    name: Setup for Jobs
     runs-on: ubuntu-latest
 
     steps:
       - uses: actions/checkout@v2
-
       - name: Cache node modules
         uses: actions/cache@v2
-      env:
-        cache-name: cache-node-modules
         with:
-        # npm cache files are stored in `~/.npm` on Linux/macOS
-        path: ~/.npm
-        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+          path: node_modules
+          key: ${{ runner.OS }}-build-${{ hashFiles('**/package-lock.json') }}
           restore-keys: |
-          ${{ runner.os }}-build-${{ env.cache-name }}-
-          ${{ runner.os }}-build-
-          ${{ runner.os }}-
-    - name: Use Node.js 12.x
-      uses: actions/setup-node@v1
+            ${{ runner.OS }}-build-${{ env.cache-name }}-
+            ${{ runner.OS }}-build-
+            ${{ runner.OS }}-
+      - name: Install Node Dependencies
+        run: npm install
+
+  JSLintingCheck:
+    name: Lint JavaScript
+    needs: Setup
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Cache node modules
+        uses: actions/cache@v2
         with:
-        node-version: 12.x
-    - name: Npm install
-      run: |
-        npm install
-    - name: Lint JavaScript
-      uses: bradennapier/eslint-plus-action@v3.4.2
+          path: node_modules
+          key: ${{ runner.OS }}-build-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.OS }}-build-${{ env.cache-name }}-
+            ${{ runner.OS }}-build-
+            ${{ runner.OS }}-
+      - name: Install Node Dependencies
+        run: npm install
+      - name: Save Code Linting Report JSON
+        run: npm run lint:js:report
+        # Continue to the next step even if this fails
+        continue-on-error: true
+      - name: Upload ESLint report
+        uses: actions/upload-artifact@v2
         with:
-        issueSummaryOnlyOnEvent: true
+          name: eslint_report.json
+          path: eslint_report.json
+      - name: Annotate Code Linting Results
+        uses: ataylorme/eslint-annotate-action@1.1.2
+        with:
+          repo-token: "${{ secrets.GITHUB_TOKEN }}"
+          report-json: "eslint_report.json"
+
+  CSSLintingCheck:
+    name: Lint CSS
+    needs: Setup
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Cache node modules
+        uses: actions/cache@v2
+        with:
+          path: node_modules
+          key: ${{ runner.OS }}-build-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.OS }}-build-${{ env.cache-name }}-
+            ${{ runner.OS }}-build-
+            ${{ runner.OS }}-
+      - name: Install Node Dependencies
+        run: npm install
       - name: Lint CSS
         run: npm run lint:css
-

plugins/woocommerce-blocks/.gitignore

@@ -53,3 +53,4 @@ storybook-static/
 blocks.ini
 /wp-content/
 /.wp-env.override.json
+/eslint_report.json

plugins/woocommerce-blocks/package.json

@@ -41,6 +41,7 @@
 		"lint:css": "stylelint 'assets/**/*.scss'",
 		"lint:css-fix": "stylelint 'assets/**/*.scss' --fix",
 		"lint:js": "wp-scripts lint-js",
+		"lint:js:report": "npm run lint:js -- --output-file eslint_report.json --format json",
 		"lint:js-fix": "eslint assets/js --ext=js,jsx --fix",
 		"lint:php": "composer run-script phpcs ./src",
 		"package-plugin": "rimraf woocommerce-gutenberg-products-block.zip && ./bin/build-plugin-zip.sh",