Improve validation error messages

Author: ohakutsu

src/client/pages/items/show.tsx

@@ -124,7 +124,7 @@ export const ItemsShow = () => {
                 <MaterialSymbol fill={true} css={exclamationIconStyle}>
                   error
                 </MaterialSymbol>
-                <div css={errorMessageBodyStyle}>{errorMessage}</div>
+                <div>{errorMessage}</div>
               </p>
             ))}
           </div>
@@ -184,7 +184,3 @@ const errorStyle = css({
   display: "flex",
   marginTop: getSpace(3 / 2),
 });
-
-const errorMessageBodyStyle = css({
-  whiteSpace: "pre",
-});

src/commands/publish.ts

@@ -65,10 +65,15 @@ export const publish = async (argv: string[]) => {
     return acc;
   }, [] as { name: string; errors: string[] }[]);
   if (invalidItemMessages.length > 0) {
-    console.error("Validation error:");
+    const chalk = (await import("chalk")).default;
     invalidItemMessages.forEach((msg) => {
-      console.error(msg.name, msg.errors);
+      msg.errors.forEach((err) => {
+        const errorName = chalk.red.bold(msg.name + ":");
+        const errorDescription = chalk.red(err);
+        console.error(`${errorName} ${errorDescription}`);
+      });
     });
+
     process.exit(1);
   }
 

src/lib/check-frontmatter-type.ts

@@ -65,7 +65,7 @@ const checkOrganizationUrlName: CheckType = {
 
 const checkSlide: CheckType = {
   getMessage: () =>
-    "slideの設定はtrue/falseで入力してください\n\n【破壊的な変更がありました】\n詳しくは以下のリリースをご確認ください\nhttps://github.com/increments/qiita-cli/releases/tag/v0.5.0",
+    "slideの設定はtrue/falseで入力してください（破壊的な変更がありました。詳しくはリリースをご確認ください https://github.com/increments/qiita-cli/releases/tag/v0.5.0）",
   isValid: ({ slide }) => {
     return typeof slide === "boolean";
   },