MRM task reachdigital-preset

• File formatting via prettier
• ts/js file checking via eslint
• Style file checking via stylelint

Automatically set up eslint, prettier and stylelint with mrm.

Installation

# cd to root of your project.
npm install -g mrm-task-reachdigital-preset
npx mrm reachdigital-preset -i

PHPStorm

1. Make sure you have a scope configured: (file:*//ReachDigital//*||file:*//Ho//*||file:*//honl//*||file:*//reach-digital//*||file:webcomponents//*)

   1. Add project specific paths to this scope as well (like a different theme vendor in the app/design/frontend folder).

2. Create 3 file watchers for stylelint for the filetypes Cascading Style Sheets, Less Style Sheet, Javascript and Typescript. Tip: you can use the copy button in the File Watchers overview to duplicate the watcher for each file type.

3. Configure Prettier in PHPStorm. a. Make sure you have at least PHPStorm 2020.2 and make sure you have the Prettier plugin installed in PHPStorm.

4. Configure ESLint in PHPStorm

5. Configure StyleLint in PHPStorm

VSCode

Add the following to .vscode/settings.json

{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "editor.formatOnSave": true,
  "eslint.enable": true,
  "eslint.alwaysShowStatus": true,
  "editor.tabSize": 2,
  "javascript.implicitProjectConfig.experimentalDecorators": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

Github and semantic-release

The semantic-release uses multiple secrets that are setup in GitHub to make the release notes work. These are set for the whole company mostly, so you don't have to do anything about this, with Slack being the only exception.

Slack intergration

1. Register the a new webhook for a specified slack channel using this link
2. Go to the github repo and go to Settings > Secrets
3. Create a new secret using the "New repository secret" button.
4. Name the secret SLACK_WEBHOOK_[Project Code here]
5. Paste the URL from step 1 as the value of the secret
6. Use the SLACK_WEBHOOK_[Project Code here] during the npx mrm reachdigital-preset -i or edit it in the .github/workflows/release.yml

Development

You can debug the mrm-task using the following commands in a project folder:

• To show all the tasks: npx mrm --dir ./webcomponents/m2-classic-webpack/packages
• To run a task: npx mrm --dir ./webcomponents/m2-classic-webpack/packages mrm-task-reachdigital-preset