Update linting in sub theme

Before upgrading to the 4.x branches of Bolt, first update linting in your sub theme by taking the following steps:

Update base theme to latest 3.x version

fin composer update pega/pega_bolt_theme

Front-end build

fin fe-build

Update config files

• Copy .eslintrc.json, .stylelintrc, and .prettierrc from the base theme to your sub theme (if they don't already exist).
• If you have a .eslintrc.yml file in your subtheme, remove it.
• If your project has a scripts/cs/phpcs script, replace the line IGNORE='*/node_modules/*,*/dist/*' with IGNORE='*/node_modules/*,*/dist/*,*.sass,*.js' to prevent phpcs from improperly linting js and CSS files.

Fix linting issues in the sub theme

You can use the following commands to fix most issues automatically:

• fin exec yarn eslint packages/**/*.js --fix
• fin exec yarn stylelint packages/**/*.scss --fix
• IMPORTANT: Linting may raise errors like the following:

  Unable to resolve path to module '@drupal(core/drupal)' import/no-unresolved
  

  These are a the result of some tricks in the theming system (see the docs for more details) and are not actually wrong. You should NOT remove the lines like const Drupal = require('@drupal(core/drupal)'); at the top of your js files. Instead, ignore them from this linting rule like this (see components in pega_bolt_theme for examples):

  const Drupal = require('@drupal(core/drupal)'); // eslint-disable-line import/no-unresolved
  

Test and MR these changes separately

• Smoke test the linting updates by rebuilding the front-end.
• If the build is sucessful, you should MR these linting updates now before beginning the 4.x upgrade so that linting issues can be reviewed in isolation.