Prettier Config Nerden
npm install --save-dev prettier-config-nerdennpm install --save-dev --save-exact prettiernpm install --save-dev eslint-config-prettier eslint-plugin-prettier prettier-eslint prettier-plugin-organize-attributes prettier-plugin-organize-imports prettier-plugin-tailwindcss prettier-plugin-tailwindcss-extra-plus stylelint-config-prettier-scss stylelint-prettier prettier-plugin-sort-jsonAdd this to your package.json
"prettier": "prettier-config-nerden",Add these scripts to help speed things up a bit:
"prettier:check-all": "npx prettier --check .","prettier:check-html": "npx prettier --check \"**/*.html\"","prettier:check-js": "npx prettier --check \"**/*.{js,jsx,ts,tsx}\"","prettier:check-scss": "npx prettier --check \"**/*{.scss,.css}\"","prettier:write-all": "npx prettier --write .","prettier:write-html": "npx prettier --write \"**/*.html\"","prettier:write-js": "npx prettier --write \"**/*.{js,jsx,ts,tsx}\"","prettier:write-scss": "npx prettier --write \"**/*{.scss,.css}\"",Here’s the JSON config if needed which includes tailwind additional options:
{ "arrowParens": "always", "attributeGroups": [ "$CLASS", "^(id|name)$", "$FOR", "$SRC", "$TYPE", "$VALUE", "data-min", "data-max", "data-min-formatted", "data-max-formatted", "$HREF", "$TITLE", "$ALT", "data-src", "$ROLE", "$TARGET", "$REL", "width", "height", "data-mdb-img", "data-sizes", "loading", "decoding", "class", "id", "for", "name", "type", "value", "data-min", "data-max", "data-min-formatted", "data-max-formatted", "href", "src", "title", "role", "target", "rel", "alt", "data-mdb-img", "data-sizes", "width", "height", "loading", "data-product-attribute-value" ], "attributeSort": "ASC", "bracketSameLine": true, "bracketSpacing": true, "embeddedLanguageFormatting": "auto", "endOfLine": "lf", "experimentalOperatorPosition": "end", "experimentalTernaries": false, "htmlWhitespaceSensitivity": "css", "insertPragma": false, "jsxSingleQuote": false, "objectWrap": "preserve", "organizeImportsSkipDestructiveCodeActions": true, "overrides": [ { "files": "**/*.{js,mjs,cjs}", "options": { "bracketSpacing": true, "embeddedLanguageFormatting": "off", "experimentalTernaries": true, "jsxSingleQuote": true, "parser": "meriyah", "quoteProps": "consistent", "singleAttributePerLine": true } }, { "files": "**/*.{jsx,tsx,ts}", "options": { "bracketSpacing": true, "embeddedLanguageFormatting": "off", "experimentalTernaries": true, "jsxSingleQuote": true, "parser": "babel-ts", "quoteProps": "consistent", "singleAttributePerLine": true } }, { "files": "**/*.{handlebars,hbs}", "options": { "parser": "glimmer", "singleQuote": false } }, { "files": "*.html", "options": { "embeddedLanguageFormatting": "off", "htmlWhitespaceSensitivity": "strict", "parser": "html", "printWidth": 2000, "singleAttributePerLine": true, "singleQuote": false } }, { "files": "*.md", "options": { "embeddedLanguageFormatting": "auto", "htmlWhitespaceSensitivity": "ignore", "jsxSingleQuote": true, "parser": "markdown", "vueIndentScriptAndStyle": false } }, { "files": "*.mdx", "options": { "embeddedLanguageFormatting": "auto", "htmlWhitespaceSensitivity": "css", "jsxSingleQuote": true, "parser": "mdx", "vueIndentScriptAndStyle": true } }, { "files": "**/*.{css,less,sass,scss}", "options": { "parser": "scss", "printWidth": 200 } }, { "files": "**/*.{json,jsonc}", "options": { "parser": "json", "trailingComma": "none" } }, { "files": "**/*.{yaml,yml}", "options": { "parser": "yaml", "tabWidth": 2 } }, { "files": ["*.astro"], "options": { "parser": "astro" } }, { "files": ["*.vue"], "options": { "bracketSameLine": false, "parser": "vue", "printWidth": 80, "singleQuote": false, "tabWidth": 2, "vueIndentScriptAndStyle": false } } ], "plugins": [ "prettier-plugin-organize-attributes", "prettier-plugin-organize-imports", "prettier-plugin-tailwindcss-extra-plus", "prettier-plugin-tailwindcss" ], "printWidth": 120, "proseWrap": "preserve", "quoteProps": "as-needed", "requirePragma": false, "semi": true, "singleAttributePerLine": false, "singleQuote": true, "tabWidth": 4, "tailwindConfig": "tailwind.config.js", "tailwindStylesheet": "./assets/scss/tailwind-src.scss", "trailingComma": "all", "useTabs": false, "vueIndentScriptAndStyle": true}Prettier - Ignore List
Section titled “Prettier - Ignore List”# Ignore artifacts:buildcoveragedistnode_modulesnode_modules/mdb-modulegruntv6-4-2package-lock.json.browserslistrc.editorconfig.eslintignore.gitignore.htmlhintrc.jsbeautifyrc.nvmrc.prettierignore.stylelintignore.gitattributes.hintrc.png*.png.webp*.webp.ico*.ico.jpg*.jpg.jpeg*.jpeg.hbs*.hbs**/.hbs.handlebars*.handlebars.min.css*.min.css.min.js*.min.js.min.css.map*.min.css.map**/.handlebars**/.min.css**/.min.css.map
# Default Ignores**/.git**/.svn**/.hg**/node_modules**/.git**/.svn**/.hg**/.min.css**/.min.js
# Ignore all of the following files:**/*.eslintrc**/*.prettierrc.stylelintrc**/*.handlebars**/*.min.css**/*.min.css.map**/*.min.js