Add webpack aliases for Crayons components (#6958)

* Added webpack alias for @crayons.

* Added @crayons to eslint import/no-unresolved rule ignore list.

* Added path mappings for VS Code for webpack aliases.

app/javascript/.eslintrc.js

@@ -32,6 +32,12 @@ module.exports = {
       },
     ],
     'react/jsx-no-target-blank': [2, { enforceDynamicLinks: 'always' }],
+    'import/no-unresolved': [
+      'error',
+      {
+        ignore: ['@crayons'],
+      },
+    ],
   },
   globals: {
     getCsrfToken: false,

app/javascript/.storybook/main.js

@@ -33,6 +33,7 @@ module.exports = {
         ...config.resolve.alias,
         react: 'preact-compat',
         'react-dom': 'preact-compat',
+        '@crayons': path.resolve(__dirname, '../crayons'),
       },
     };
 

config/webpack/environment.js

@@ -1,4 +1,5 @@
 /* global require module */
+const path = require('path');
 const { environment } = require('@rails/webpacker');
 const erb = require('./loaders/erb');
 
@@ -10,9 +11,19 @@ the existing configuration and only override/add what is necessary.
 The cache groups section is the default cache groups in webpack 4. See https://webpack.js.org/plugins/split-chunks-plugin/#optimizationsplitchunks.
 It does not appear to be the default with webpacker 4.
 */
-environment.splitChunks(config => {
+environment.splitChunks((config) => {
   return {
     ...config,
+    resolve: {
+      ...config.resolve,
+      alias: {
+        ...(config.resolve ? config.resolve.alias : {}),
+        '@crayons': path.resolve(
+          __dirname,
+          '../../app/javascript/crayons',
+        ) /* global __dirname */,
+      },
+    },
     optimization: {
       ...config.optimization,
       splitChunks: {

jsconfig.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./",
+    "paths": {
+      "@crayons/*": ["app/javascript/crayons/*"]
+    }
+  },
+  "exclude": ["node_modules", "**/node_modules/*"]
+}