Markdown Page Template

Stencil Setup

{{log product.main_image.alt}}

DJ Lint Commands

`djlint . --extension=.html --check --profile=handlebars`

`djlint . --extension=.html --reformat --profile=handlebars`

`djlint . --extension=.html --lint`

`{{! djlint:off }}`

`{{! djlint:off }}`

• Search for and exclude any data-slick= & currency_switch_url

Properly space the following:

• " {{#
• " {{/
• {{>

Clean Install

rm -rf node_modules package-lock.json assets/dist .vscode

Uninstall conflicting dependencies

npm uninstall stylelint stylelint-scss stylelint-config-sass-guidelines grunt-stylelint @material-tailwind/html tailwindcss postcss autoprefixer

Or with ESLint

npm uninstall stylelint stylelint-scss stylelint-config-sass-guidelines grunt-stylelint @material-tailwind/html tailwindcss postcss autoprefixer grunt grunt-eslint eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks babel-eslint @babel/eslint-parser lighthouse @babel/core babel-jest eslint-config-airbnb-base stylelint-config-standard-scss prettier-plugin-tailwindcss --save-dev

Install Prettier

npm install --save-dev --save-exact prettier prettier-plugin-tailwindcss

Reinstall dependencies

npm install --save-dev stylelint-prettier prettier stylelint stylelint-scss stylelint-config-sass-guidelines grunt-stylelint prettier-plugin-tailwindcss

If installing w/ Tailwind

1. Install Prettier-Plugin-TailwindCSS

   npm install -D prettier prettier-plugin-tailwindcss

2. Install Tailwind, PostCSS & Autoprefixer

   npm install tailwindcss@latest --save
   npm install -D postcss autoprefixer
   npx tailwindcss init --full -p

3. Install Material Tailwind

   npm i @material-tailwind/html

   • add const withMT = require('@material-tailwind/html/utils/withMT'); to your tailwind.config.js.

ESLint Setup

Uninstall conflicting ESLint dependencies

npm uninstall grunt grunt-eslint eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks babel-eslint @babel/eslint-parser lighthouse @babel/core babel-jest eslint-config-airbnb-base eslint-plugin-react-hooks --save-dev

npm i --save-dev babel-jest @babel/core @babel/preset-env

1. Get Dependency list

npm info "eslint-config-airbnb-base@latest" peerDependencies
npx install-peerdeps --dev eslint-config-airbnb-base -y

• Install

npm info "eslint-config-airbnb@latest" peerDependencies
npx install-peerdeps --dev eslint-config-airbnb -y

• Add "extends": "airbnb-base" & "parser": "@babel/eslint-parser" to your .eslintrc.

npm install --save-dev @babel/core @babel/eslint-parser babel-jest grunt grunt-eslint lighthouse

rm -rf node_modules package-lock.json

npm uninstall @babel/core @babel/eslint-parser @material-tailwind/html autoprefixer babel-eslint babel-jest eslint eslint-config-airbnb eslint-config-airbnb-base eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks grunt grunt-eslint grunt-stylelint lighthouse lint-staged postcss prettier-eslint prettier-plugin-tailwindcss pretty-quick stylelint stylelint-config-sass-guidelines stylelint-config-standard-scss stylelint-scss tailwindcss --save-dev

npm install --save-dev --save-exact prettier

npm install --save-dev stylelint-prettier prettier stylelint stylelint-scss stylelint-config-sass-guidelines grunt-stylelint prettier-plugin-tailwindcss stylelint-config-clean-order stylelint-plugin-defensive-css stylelint-high-performance-animation stylelint-declaration-strict-value stylelint-scss stylelint-declaration-block-no-ignored-properties stylelint-group-selectors

npm info "eslint-config-airbnb-base@latest" peerDependencies
npx install-peerdeps --dev eslint-config-airbnb-base -y

npm install --save-dev @babel/core @babel/eslint-parser babel-jest grunt grunt-eslint lighthouse eslint-config-prettier prettier-eslint eslint-plugin-prettier

***If using Tailwind***
npm install --save-dev postcss

npm install --save @material-tailwind/html autoprefixer tailwindcss

npm audit fix
npm update
npm install
npm run build

Check conflicts with ESLint & Prettier

npx eslint-config-prettier assets/js/app.js