refactor: improve display of linting errors

src/rules/tailwind-multiline.ts

@@ -18,7 +18,12 @@ import { getAttributesByJSXElement, getLiteralsByJSXClassAttribute } from "reada
 import { getAttributesBySvelteTag, getLiteralsBySvelteClassAttribute } from "readable-tailwind:parsers:svelte.js";
 import { getAttributesByVueStartTag, getLiteralsByVueClassAttribute } from "readable-tailwind:parsers:vue.js";
 import { escapeNestedQuotes } from "readable-tailwind:utils:quotes.js";
-import { findLineStartPosition, findLiteralStartPosition, splitClasses } from "readable-tailwind:utils:utils.js";
+import {
+  display,
+  findLineStartPosition,
+  findLiteralStartPosition,
+  splitClasses
+} from "readable-tailwind:utils:utils.js";
 
 import type { TagNode } from "es-html-parser";
 import type { Rule } from "eslint";
@@ -502,13 +507,14 @@ function lintLiterals(ctx: Rule.RuleContext, literals: Literal[]) {
 
       ctx.report({
         data: {
-          notReadable: literal.content
+          notReadable: display(literal.raw),
+          readable: display(fixedClasses)
         },
         fix(fixer) {
           return fixer.replaceTextRange(literal.range, fixedClasses);
         },
         loc: literal.loc,
-        message: "Unnecessary line wrapping: \"{{ notReadable }}\"."
+        message: "Unnecessary line wrapping. Expected\n\n{{ notReadable }}\n\nto be\n\n{{ readable }}"
       });
 
       return;
@@ -580,15 +586,16 @@ function lintLiterals(ctx: Rule.RuleContext, literals: Literal[]) {
 
     ctx.report({
       data: {
-        notReadable: literal.content
+        notReadable: display(literal.raw),
+        readable: display(fixedClasses)
       },
       fix(fixer) {
         return literal.parent.type === "JSXAttribute"
           ? fixer.replaceTextRange(literal.range, `{${fixedClasses}}`)
           : fixer.replaceTextRange(literal.range, fixedClasses);
       },
       loc: literal.loc,
-      message: "Incorrect line wrapping: \"{{ notReadable }}\"."
+      message: "Incorrect line wrapping. Expected\n\n{{ notReadable }}\n\nto be\n\n{{ readable }}"
     });
 
   }

src/rules/tailwind-no-unnecessary-whitespace.ts

@@ -14,7 +14,7 @@ import { getAttributesByJSXElement, getLiteralsByJSXClassAttribute } from "reada
 import { getAttributesBySvelteTag, getLiteralsBySvelteClassAttribute } from "readable-tailwind:parsers:svelte.js";
 import { getAttributesByVueStartTag, getLiteralsByVueClassAttribute } from "readable-tailwind:parsers:vue.js";
 import { escapeNestedQuotes } from "readable-tailwind:utils:quotes.js";
-import { splitClasses, splitWhitespaces } from "readable-tailwind:utils:utils.js";
+import { display, splitClasses, splitWhitespaces } from "readable-tailwind:utils:utils.js";
 
 import type { TagNode } from "es-html-parser";
 import type { Rule } from "eslint";
@@ -191,13 +191,14 @@ function lintLiterals(ctx: Rule.RuleContext, literals: Literal[]) {
 
     ctx.report({
       data: {
-        unnecessaryWhitespace: literal.content
+        fixedClasses: display(fixedClasses),
+        unnecessaryWhitespace: display(literal.raw)
       },
       fix(fixer) {
         return fixer.replaceTextRange(literal.range, fixedClasses);
       },
       loc: literal.loc,
-      message: "Unnecessary whitespace: \"{{ unnecessaryWhitespace }}\"."
+      message: "Unnecessary whitespace. Expected\n\n{{ unnecessaryWhitespace }}\n\nto be\n\n{{ fixedClasses }}"
     });
 
   }

src/rules/tailwind-sort-classes.ts

@@ -21,7 +21,7 @@ import { getAttributesByJSXElement, getLiteralsByJSXClassAttribute } from "reada
 import { getAttributesBySvelteTag, getLiteralsBySvelteClassAttribute } from "readable-tailwind:parsers:svelte.js";
 import { getAttributesByVueStartTag, getLiteralsByVueClassAttribute } from "readable-tailwind:parsers:vue.js";
 import { escapeNestedQuotes } from "readable-tailwind:utils:quotes.js";
-import { splitClasses, splitWhitespaces } from "readable-tailwind:utils:utils.js";
+import { display, splitClasses, splitWhitespaces } from "readable-tailwind:utils:utils.js";
 
 import type { TagNode } from "es-html-parser";
 import type { Rule } from "eslint";
@@ -112,13 +112,14 @@ export const tailwindSortClasses: ESLintRule<Options> = {
 
           ctx.report({
             data: {
-              notSorted: literal.content
+              notSorted: display(literal.raw),
+              sorted: display(fixedClasses)
             },
             fix(fixer) {
               return fixer.replaceTextRange(literal.range, fixedClasses);
             },
             loc: literal.loc,
-            message: "Incorrect class order: \"{{ notSorted }}\"."
+            message: "Incorrect class order. Expected\n\n{{ notSorted }}\n\nto be\n\n{{ sorted }}"
           });
 
         }

src/utils/utils.ts

@@ -32,6 +32,14 @@ export function splitClasses(classes: string): string[] {
 
 }
 
+export function display(classes: string): string {
+  return classes
+    .replaceAll(" ", "·")
+    .replaceAll("\n", "↵\n")
+    .replaceAll("\r", "↩\r")
+    .replaceAll("\t", "→");
+}
+
 export function splitWhitespaces(classes: string): string[] {
   return classes.split(/\S+/);
 }