Adastra ✨ has an opinionated shared Prettier config that you can use when building Shopify Liquid themes and Tailwind.
- Supports reordering Tailwind classes ✨
- Fomatting with the Liquid Prettier Plugin to enforce a consistent style in Liquid and HTML code.
Run the following command to install Prettier and the Adastra Prettier config:
npm install -D prettier adastra-prettier-config
Using Yarn/PNPM
yarn add --dev prettier adastra-prettier-config
# pnpm add -D prettier adastra-prettier-config
Adastra's shared prettier config comes bundled in adastra-prettier-config
. To enable these rules, add a Prettier property in your package.json
and reference this shared config as follows:
"prettier": "adastra-prettier-config"
Previously, rules had been defined directly in a .prettierrc
or package.json
.
Any previous .prettierrc
or prettier.config.js
should be removed in favour of the shared config.
Sometimes when using pnpm
the config deosn't work because the package manager deosn't read the configuration, to fix the issue, rather than adding your plugin in package.json
, create a prettier.config.js
file with this configuration:
module.exports = {
...require('adastra-prettier-config')
}
You might wanna ignore some few files that are either autgenrarted or minified on build by creating a .prettierignore
on the root folder of your Adastra Shopify theme.
assets
adastra.liquid
node_modules
Feel free to check our documentation or jump into our Discord server.