feat: 🎸 sort html attributes option

shufo · Aug 8, 2022 · e43c6e2 · e43c6e2
1 parent c00a43e
commit e43c6e2
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -135,22 +135,24 @@ https://user-images.githubusercontent.com/1641039/151354641-6305805e-8e0c-4226-8
 
 You can use these options for prettier blade plugin in prettier CLI.
 
-|                          key |                                                                                                                                                   description |
-| ---------------------------: | ------------------------------------------------------------------------------------------------------------------------------------------------------------: |
-|                `--tab-width` |                                                                                                          Number of spaces per indentation level. default: `4` |
-|              `--print-width` |                                                                                                  The line length where Prettier will try wrap. default: `120` |
-|          `--wrap-attributes` | The way to wrap attributes. [`auto`\|`force`\|`force-aligned`\|`force-expand-multiline`\|`aligned-multiple`\|`preserve`\|`preserve-aligned`]. default: `auto` |
-|        `--end-with-new-line` |                                                                                                                      End output with newline. default: `true` |
-| `--sort-tailwindcss-classes` |                                                       Sort Tailwind CSS classes. It will lookup and respects `tailwind.config.js` if exists. default: `false` |
+|                          key |                                                                                                                                                                                                                                               description |
+| ---------------------------: | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
+|                `--tab-width` |                                                                                                                                                                                                      Number of spaces per indentation level. default: `4` |
+|              `--print-width` |                                                                                                                                                                                              The line length where Prettier will try wrap. default: `120` |
+|          `--wrap-attributes` |                                                                                             The way to wrap attributes. [`auto`\|`force`\|`force-aligned`\|`force-expand-multiline`\|`aligned-multiple`\|`preserve`\|`preserve-aligned`]. default: `auto` |
+|        `--end-with-new-line` |                                                                                                                                                                                                                  End output with newline. default: `true` |
+| `--sort-tailwindcss-classes` |                                                                                                                                                   Sort Tailwind CSS classes. It will lookup and respects `tailwind.config.js` if exists. default: `false` |
+|     `--sort-html-attributes` | Sort HTML attributes. [`none` \| `alphabetical` \| [`code-guide`](https://codeguide.co/) \| [`idiomatic`](https://github.com/necolas/idiomatic-html#attribute-order) \| [`vuejs`](https://eslint.vuejs.org/rules/attributes-order.html)] default: `false` |
 
 ### `.prettierrc` example
 
 ```json
 {
-  "printWidth": 120,
-  "tabWidth": 4,
-  "wrapAttributes": "auto",
-  "sortTailwindcssClasses": true
+    "printWidth": 120,
+    "tabWidth": 4,
+    "wrapAttributes": "auto",
+    "sortTailwindcssClasses": true,
+    "sortHtmlAttributes": "none"
 }
 ```
 

diff --git a/src/options.ts b/src/options.ts
@@ -26,5 +26,12 @@ export const options = {
     description: "Sort Tailwindcss classes automatically. This option respects `tailwind.config.js`.",
     since: "1.0.0",
   },
+  sortHtmlAttributes: {
+    type: "string",
+    category: "Blade",
+    default: "none",
+    description: "Sort HTML Attributes. [none|alphabetical|code-guide|idiomatic|vuejs]",
+    since: "1.5.0",
+  },
 };
 
diff --git a/src/parser.ts b/src/parser.ts
@@ -14,6 +14,7 @@ export const parse = (
     endWithNewline: opts.endWithNewline,
     useTabs: opts.useTabs,
     sortTailwindcssClasses: opts.sortTailwindcssClasses,
+    sortHtmlAttributes: opts.sortHtmlAttributes,
   };
 
   const syncFn = createSyncFn(require.resolve("./worker"));