Adding a script to generate jsconfig.json with custom webpack aliases

What does this MR do and why?

This MR adds a scripts/frontend/create_jsconfig.js script that will generate a jsconfig.json file, based on current config/webpack.config.js and environment variables.

jsconfig.json is needed to let IDEs (like VSCode, WebStorm, Vim+YouCompleteMe, etc) and some IDE plugins and tools to resolve our import aliases and optimise types loading.

See the full list of aliases below.

Screenshots or screen recordings

before	after

Example jsconfig.json generated

{
  "exclude": ["node_modules", "vendor"],
  "include": [
    "app/assets/javascripts",
    "ee/app/assets/javascripts",
    "spec/frontend",
    "ee/spec/frontend",
    "tmp/tests/frontend/fixtures/",
    "tmp/tests/frontend/fixtures-ee/"
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "checkJs": false,
    "disableSizeLimit": true,
    "paths": {
      "@apollo/client$/*": ["@apollo/client/core/*"],
      "@sentry/browser$/*": [
        "app/assets/javascripts/sentry/sentry_browser_wrapper.js/*"
      ],
      "~/*": ["app/assets/javascripts/*"],
      "emojis/*": ["fixtures/emojis/*"],
      "empty_states/*": ["app/views/shared/empty_states/*"],
      "icons/*": ["app/views/shared/icons/*"],
      "images/*": ["app/assets/images/*"],
      "vendor/*": ["vendor/assets/javascripts/*"],
      "shared_queries/*": ["app/graphql/queries/*"],
      "ee_else_ce/*": ["ee/app/assets/javascripts/*"],
      "jh_else_ce/*": ["app/assets/javascripts/*"],
      "any_else_ce/*": ["ee/app/assets/javascripts/*"],
      "spec/test_constants$/*": ["spec/frontend/__helpers__/test_constants/*"],
      "ee_else_ce_jest/*": ["ee/spec/frontend/*"],
      "helpers/*": ["spec/frontend/__helpers__/*"],
      "jest/*": ["spec/frontend/*"],
      "test_fixtures/*": ["tmp/tests/frontend/fixtures-ee/*"],
      "test_fixtures_static/*": ["spec/frontend/fixtures/static/*"],
      "test_helpers/*": ["spec/frontend_integration/test_helpers/*"],
      "public/*": ["public/*"],
      "storybook_addons/*": ["storybook/config/addons/*"],
      "ee/*": ["ee/app/assets/javascripts/*"],
      "ee_component/*": ["ee/app/assets/javascripts/*"],
      "ee_empty_states/*": ["ee/app/views/shared/empty_states/*"],
      "ee_icons/*": ["ee/app/views/shared/icons/*"],
      "ee_images/*": ["ee/app/assets/images/*"],
      "jh_else_ee/*": ["ee/app/assets/javascripts/*"],
      "ee_jest/*": ["ee/spec/frontend/*"]
    }
  }
}

How to set up and validate locally

From the root of your GitLab project, run:

node scripts/frontend/create_jsconfig.js

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.