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 |
---|---|
![]() |
![]() |
jsconfig.json
generated
Example {
"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.
Edited by Kos Palchyk