Move eslint related yarn scripts to the lint scope

We are currently overloading the `eslint` command with our custom eslint
logic. Unfortunately this causes us to run `eslint` on all js/vue files
and makes it hard to run custom eslint commands. One has to resort to
running e.g. `node_modules/.bin/eslint` directly.

In an effort to consolidate the situation we are renaming the commands
(borrowing from our rake syntax) as follows:

- `eslint` => `lint:eslint`
- `eslint-fix` => `lint:eslint:fix`
- `eslint-staged` => `lint:eslint:staged`
- `eslint-staged-fix` => `lint:eslint:staged:fix`
- `eslint-report` => `lint:eslint:report`

All but the `eslint` command have been replaced with a command that
errors out immediately and hints folks to the new command.

doc/development/contributing/style_guides.md

@@ -56,7 +56,7 @@ The current Lefthook configuration can be found in [`lefthook.yml`](https://gitl
 Before you push your changes, Lefthook automatically runs the following checks:
 
 - Danger: Runs a subset of checks that `danger-review` runs on your merge requests.
-- ES lint: Run `yarn eslint` checks (with the [`.eslintrc.yml`](https://gitlab.com/gitlab-org/gitlab/-/blob/master/.eslintrc.yml) configuration) on the modified `*.{js,vue}` files. Tags: `frontend`, `style`.
+- ES lint: Run `yarn run internal:eslint` checks (with the [`.eslintrc.yml`](https://gitlab.com/gitlab-org/gitlab/-/blob/master/.eslintrc.yml) configuration) on the modified `*.{js,vue}` files. Tags: `frontend`, `style`.
 - HAML lint: Run `bundle exec haml-lint` checks (with the [`.haml-lint.yml`](https://gitlab.com/gitlab-org/gitlab/-/blob/master/.haml-lint.yml) configuration) on the modified `*.html.haml` files. Tags: `view`, `haml`, `style`.
 - Markdown lint: Run `yarn markdownlint` checks on the modified `*.md` files. Tags: `documentation`, `style`.
 - SCSS lint: Run `bundle exec scss-lint` checks (with the [`.scss-lint.yml`](https://gitlab.com/gitlab-org/gitlab/-/blob/master/.scss-lint.yml) configuration) on the modified `*.scss{,.css}` files. Tags: `stylesheet`, `css`, `style`.

doc/development/fe_guide/style/javascript.md

@@ -14,7 +14,7 @@ In addition to the style guidelines set by Airbnb, we also have a few specific r
 listed below.
 
 NOTE:
-You can run ESLint locally by running `yarn eslint`
+You can run ESLint locally by running `yarn run lint:eslint`
 
 ## Avoid forEach
 

doc/development/fe_guide/tooling.md

@@ -17,7 +17,7 @@ This section describes yarn scripts that are available to validate and apply aut
 To check all staged files (based on `git diff`) with ESLint, run the following script:
 
 ```shell
-yarn eslint-staged
+yarn run lint:eslint:staged
 ```
 
 A list of problems found are logged to the console.
@@ -25,7 +25,7 @@ A list of problems found are logged to the console.
 To apply automatic ESLint fixes to all staged files (based on `git diff`), run the following script:
 
 ```shell
-yarn eslint-staged-fix
+yarn run lint:eslint:staged:fix
 ```
 
 If manual changes are required, a list of changes are sent to the console.
@@ -33,7 +33,7 @@ If manual changes are required, a list of changes are sent to the console.
 To check **all** files in the repository with ESLint, run the following script:
 
 ```shell
-yarn eslint
+yarn run lint:eslint
 ```
 
 A list of problems found are logged to the console.
@@ -41,7 +41,7 @@ A list of problems found are logged to the console.
 To apply automatic ESLint fixes to **all** files in the repository, run the following script:
 
 ```shell
-yarn eslint-fix
+yarn run lint:eslint:fix
 ```
 
 If manual changes are required, a list of changes are sent to the console.

lefthook.yml

@@ -7,7 +7,7 @@ pre-push:
       tags: frontend style
       files: git diff --name-only $(git merge-base origin/master HEAD)..HEAD
       glob: "*.{js,vue}"
-      run: yarn eslint --cache --max-warnings 0 --report-unused-disable-directives {files}
+      run: yarn run internal:eslint {files}
     haml-lint:
       tags: view haml style
       files: git diff --name-only $(git merge-base origin/master HEAD)..HEAD

lib/tasks/eslint.rake

@@ -3,7 +3,7 @@
 unless Rails.env.production?
   desc "GitLab | Run ESLint"
   task eslint: ['yarn:check'] do
-    unless system('yarn run eslint')
+    unless system('yarn run lint:eslint')
       abort('rake eslint failed')
     end
   end

package.json

@@ -5,13 +5,13 @@
     "block-dependencies": "node scripts/frontend/block_dependencies.js",
     "clean": "rm -rf public/assets tmp/cache/*-loader",
     "dev-server": "NODE_OPTIONS=\"--max-old-space-size=3584\" node scripts/frontend/webpack_dev_server.js",
-    "eslint": "eslint --cache --max-warnings 0 --report-unused-disable-directives --ext .js,.vue .",
-    "eslint-fix": "eslint --cache --max-warnings 0 --report-unused-disable-directives --ext .js,.vue --fix .",
-    "eslint-staged": "git diff --diff-filter=d --cached --name-only | grep -E \"(.*)\\.(js|vue)$\" | xargs eslint --cache --max-warnings 0 --report-unused-disable-directives",
-    "eslint-staged-fix": "git diff --diff-filter=d --cached --name-only | grep -E \"(.*)\\.(js|vue)$\" | xargs eslint --cache --max-warnings 0 --report-unused-disable-directives --fix",
-    "eslint-report": "eslint --max-warnings 0 --ext .js,.vue --format html --output-file ./eslint-report.html --no-inline-config .",
+    "eslint-fix": "echo 'Please use lint:eslint:fix instead' && exit 1",
+    "eslint-staged": "echo 'Please use lint:eslint:staged instead' && exit 1",
+    "eslint-staged-fix": "echo 'Please use lint:eslint:staged:fix instead' && exit 1",
+    "eslint-report": "echo 'Please use lint:eslint:report instead' && exit 1",
     "file-coverage": "scripts/frontend/file_test_coverage.js",
     "lint-docs": "scripts/lint-doc.sh",
+    "internal:eslint": "eslint --cache --max-warnings 0 --report-unused-disable-directives --ext .js,.vue",
     "prejest": "yarn check-dependencies",
     "jest": "jest --config jest.config.js",
     "jest-debug": "node --inspect-brk node_modules/.bin/jest --runInBand",
@@ -21,6 +21,11 @@
     "karma": "BABEL_ENV=${BABEL_ENV:=karma} karma start --single-run true config/karma.config.js",
     "karma-coverage": "BABEL_ENV=coverage karma start --single-run true config/karma.config.js",
     "karma-start": "BABEL_ENV=karma karma start config/karma.config.js",
+    "lint:eslint": "yarn run internal:eslint .",
+    "lint:eslint:fix": "yarn run lint:eslint --fix",
+    "lint:eslint:report": "yarn run internal:eslint --format html --output-file ./eslint-report.html --no-inline-config .",
+    "lint:eslint:staged": "scripts/frontend/execute-on-staged-files.sh internal:eslint '(js|vue)'",
+    "lint:eslint:staged:fix": "yarn run lint:eslint:staged --fix",
     "markdownlint": "markdownlint --config .markdownlint.json",
     "postinstall": "node ./scripts/frontend/postinstall.js",
     "prettier-staged": "node ./scripts/frontend/prettier.js check",

scripts/frontend/execute-on-staged-files.sh

+#!/bin/bash
+set -euo pipefail
+IFS=$'\n\t'
+
+# The yarn run command we'd like to run
+command="$1"
+# The file types we'd like to target, use something like '(js|vue)'
+file_types="$2"
+
+# Removing first two arguments
+shift
+shift
+
+# Read all staged non-deleted files into an array
+staged_files=()
+while IFS= read -r line; do
+    staged_files+=( "$line" )
+done < <( git diff --diff-filter=d --cached --name-only | { grep -E ".$file_types$" || true; })
+
+if [ "${#staged_files[@]}" == "0" ]; then
+    echo "No staged '$file_types' files"
+else
+    echo "Running $command on ${#staged_files[@]} staged '$file_types' files"
+    yarn run "$command" "$@" "${staged_files[@]}"
+fi

scripts/static-analysis

@@ -25,7 +25,7 @@ class StaticAnalysis
     # Most of the time, RuboCop finishes in 30 seconds, but sometimes it can take around 1200 seconds so we set a
     # duration of 300 to lower the likelihood that it will run in the same job as another long task...
     %w[bundle exec rubocop --parallel] => 300,
-    %w[yarn run eslint] => 197,
+    %w[yarn run lint:eslint] => 197,
     %w[yarn run prettier-all] => 124,
     %w[bin/rake gettext:lint] => 96,
     %w[bundle exec license_finder] => 49,