MRM task reachdigital-preset
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
-
Make sure you have a scope configured:
(file:*//ReachDigital//*||file:*//Ho//*||file:*//honl//*||file:*//reach-digital//*||file:webcomponents//*)
- Add project specific paths to this scope as well (like a different theme
vendor in the
app/design/frontend
folder).
- Add project specific paths to this scope as well (like a different theme
vendor in the
-
Create 3 file watchers for stylelint for the filetypes
Cascading Style Sheets
,Less Style Sheet
,Javascript
andTypescript
. Tip: you can use the copy button in the File Watchers overview to duplicate the watcher for each file type. -
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.
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
- Register the a new webhook for a specified slack channel using this link
- Go to the github repo and go to Settings > Secrets
- Create a new secret using the "New repository secret" button.
- Name the secret
SLACK_WEBHOOK_[Project Code here]
- Paste the URL from step 1 as the value of the secret
- Use the
SLACK_WEBHOOK_[Project Code here]
during thenpx 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