Revisions for the new --help (#44800)

* WIP on refining the new --help

* Fix types in the boolean trivial lint rule

* Update baselines

* More work

* Updates the color logic

* Simplifies the CLI color code

* Use cyan instead of blue for win powershell/command prompt

* Use bright white when blue is probably going to look off

* Fix NO_COLOR

* Adds a test to cover NO_COLOR

* Update src/compiler/diagnosticMessages.json

Co-authored-by: Daniel Rosenwasser <[email protected]>

* Update compiler diagnostic text

Co-authored-by: Daniel Rosenwasser <[email protected]>

Author: Orta Therox

src/compiler/commandLineParser.ts

@@ -223,7 +223,7 @@ namespace ts {
             type: "boolean",
             showInSimplifiedHelpView: true,
             category: Diagnostics.Output_Formatting,
-            description: Diagnostics.Enable_color_and_formatting_in_output_to_make_compiler_errors_easier_to_read,
+            description: Diagnostics.Enable_color_and_formatting_in_TypeScript_s_output_to_make_compiler_errors_easier_to_read,
             defaultValueDescription: "true"
         },
         {
@@ -553,7 +553,7 @@ namespace ts {
             type: "boolean",
             showInSimplifiedHelpView: true,
             category: Diagnostics.Emit,
-            description: Diagnostics.Disable_emitting_file_from_a_compilation,
+            description: Diagnostics.Disable_emitting_files_from_a_compilation,
             transpileOptionValue: undefined,
             defaultValueDescription: "false"
         },

src/compiler/diagnosticMessages.json

@@ -5459,7 +5459,7 @@
         "category": "Message",
         "code": 6659
     },
-    "Disable emitting file from a compilation.": {
+    "Disable emitting files from a compilation.": {
         "category": "Message",
         "code": 6660
     },
@@ -5559,7 +5559,7 @@
         "category": "Message",
         "code": 6684
     },
-    "Enable color and formatting in output to make compiler errors easier to read": {
+    "Enable color and formatting in TypeScript's output to make compiler errors easier to read": {
         "category": "Message",
         "code": 6685
     },
@@ -5788,7 +5788,7 @@
         "category": "Message",
         "code": 6923
     },
-    "Ignoring tsconfig.json, compiles the specified files with default compiler options": {
+    "Ignoring tsconfig.json, compiles the specified files with default compiler options.": {
         "category": "Message",
         "code": 6924
     },
@@ -5800,15 +5800,15 @@
         "category": "Message",
         "code": 6926
     },
-    "Compiles the TypeScript project located at the specified path": {
+    "Compiles the TypeScript project located at the specified path.": {
         "category": "Message",
         "code": 6927
     },
     "An expanded version of this information, showing all possible compiler options": {
         "category": "Message",
         "code": 6928
     },
-    "Compiles the current project, with additional settings": {
+    "Compiles the current project, with additional settings.": {
         "category": "Message",
         "code": 6929
     },

src/executeCommandLine/executeCommandLine.ts

@@ -68,7 +68,7 @@ namespace ts {
     }
 
     function defaultIsPretty(sys: System) {
-        return !!sys.writeOutputIsTTY && sys.writeOutputIsTTY();
+        return !!sys.writeOutputIsTTY && sys.writeOutputIsTTY() && !sys.getEnvironmentVariable("NO_COLOR");
     }
 
     function shouldBePretty(sys: System, options: CompilerOptions | BuildOptions) {
@@ -96,26 +96,47 @@ namespace ts {
                 bold: (str: string) => str,
                 blue: (str: string) => str,
                 blueBackground: (str: string) => str,
-                white: (str: string) => str
+                brightWhite: (str: string) => str
             };
         }
 
         function bold(str: string) {
             return `\x1b[1m${str}\x1b[22m`;
         }
+
+        const isWindows = sys.getEnvironmentVariable("OS") && stringContains(sys.getEnvironmentVariable("OS").toLowerCase(), "windows");
+        const isWindowsTerminal = sys.getEnvironmentVariable("WT_SESSION");
+        const isVSCode = sys.getEnvironmentVariable("TERM_PROGRAM") && sys.getEnvironmentVariable("TERM_PROGRAM") === "vscode";
+
         function blue(str: string) {
-            return `\x1b[34m${str}\x1b[39m`;
+            // Effectively Powershell and Command prompt users use cyan instead
+            // of blue because the default theme doesn't show blue with enough contrast.
+            if (isWindows && !isWindowsTerminal && !isVSCode) {
+                return brightWhite(str);
+            }
+
+            return `\x1b[94m${str}\x1b[39m`;
         }
+
+        // There are ~3 types of terminal color support: 16 colors, 256 and 16m colors
+        // If there is richer color support, e.g. 256+ we can use extended ANSI codes which are not just generic 'blue'
+        // but a 'lighter blue' which is closer to the blue in the TS logo.
+        const supportsRicherColors = sys.getEnvironmentVariable("COLORTERM") === "truecolor" || sys.getEnvironmentVariable("TERM") === "xterm-256color";
         function blueBackground(str: string) {
-            return `\x1b[44m${str}\x1b[49m`;
+            if (supportsRicherColors) {
+                return `\x1B[48;5;68m${str}\x1B[39;49m`;
+            }
+            else {
+                return `\x1b[44m${str}\x1B[39;49m`;
+            }
         }
-        function white(str: string) {
-            return `\x1b[37m${str}\x1b[39m`;
+        function brightWhite(str: string) {
+            return `\x1b[97m${str}\x1b[39m`;
         }
         return {
             bold,
             blue,
-            white,
+            brightWhite,
             blueBackground
         };
     }
@@ -143,7 +164,7 @@ namespace ts {
         const terminalWidth = sys.getWidthOfTerminal?.() ?? 0;
 
         // Note: child_process might return `terminalWidth` as undefined.
-        if (terminalWidth >= 60) {
+        if (terminalWidth >= 80) {
             let description = "";
             if (option.description) {
                 description = getDiagnosticText(option.description);
@@ -340,7 +361,7 @@ namespace ts {
         example("tsc app.ts util.ts", Diagnostics.Ignoring_tsconfig_json_compiles_the_specified_files_with_default_compiler_options);
         example("tsc -b", Diagnostics.Build_a_composite_project_in_the_working_directory);
         example("tsc --init", Diagnostics.Creates_a_tsconfig_json_with_the_recommended_settings_in_the_working_directory);
-        example("tsc -p .path/to/tsconfig.json", Diagnostics.Compiles_the_TypeScript_project_located_at_the_specified_path);
+        example("tsc -p ./path/to/tsconfig.json", Diagnostics.Compiles_the_TypeScript_project_located_at_the_specified_path);
         example("tsc --help --all", Diagnostics.An_expanded_version_of_this_information_showing_all_possible_compiler_options);
         example(["tsc --noEmit", "tsc --target esnext"], Diagnostics.Compiles_the_current_project_with_additional_settings);
 
@@ -392,7 +413,7 @@ namespace ts {
         const tsIconLength = 5;
 
         const tsIconFirstLine = colors.blueBackground(padLeft("", tsIconLength));
-        const tsIconSecondLine = colors.blueBackground(colors.white(padLeft("TS ", tsIconLength)));
+        const tsIconSecondLine = colors.blueBackground(colors.brightWhite(padLeft("TS ", tsIconLength)));
         // If we have enough space, print TS icon.
         if (terminalWidth >= tscExplanation.length + tsIconLength) {
             // right align of the icon is 120 at most.

src/testRunner/unittests/tsc/runWithoutArgs.ts

@@ -14,5 +14,14 @@ namespace ts {
             fs: () => loadProjectFromFiles({}),
             commandLineArgs: [],
         });
+
+        verifyTsc({
+            scenario: "runWithoutArgs",
+            subScenario: "does not add color when NO_COLOR is set",
+            fs: () => loadProjectFromFiles({}),
+            commandLineArgs: [],
+            environmentVariables: { NO_COLOR: "true" }
+        });
+
     });
 }

tests/baselines/reference/tsConfig/Default initialized TSConfig/tsconfig.json

@@ -49,7 +49,7 @@
     // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If `declaration` is true, also designates a file that bundles all .d.ts output. */
     // "outDir": "./",                                   /* Specify an output folder for all emitted files. */
     // "removeComments": true,                           /* Disable emitting comments. */
-    // "noEmit": true,                                   /* Disable emitting file from a compilation. */
+    // "noEmit": true,                                   /* Disable emitting files from a compilation. */
     // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
     // "importsNotUsedAsValues": "remove",               /* Specify emit/checking behavior for imports that are only used for types */
     // "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */

tests/baselines/reference/tsConfig/Initialized TSConfig with advanced options/tsconfig.json

@@ -49,7 +49,7 @@
     // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If `declaration` is true, also designates a file that bundles all .d.ts output. */
     // "outDir": "./",                                   /* Specify an output folder for all emitted files. */
     // "removeComments": true,                           /* Disable emitting comments. */
-    // "noEmit": true,                                   /* Disable emitting file from a compilation. */
+    // "noEmit": true,                                   /* Disable emitting files from a compilation. */
     // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
     // "importsNotUsedAsValues": "remove",               /* Specify emit/checking behavior for imports that are only used for types */
     // "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */

tests/baselines/reference/tsConfig/Initialized TSConfig with boolean value compiler options/tsconfig.json

@@ -49,7 +49,7 @@
     // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If `declaration` is true, also designates a file that bundles all .d.ts output. */
     // "outDir": "./",                                   /* Specify an output folder for all emitted files. */
     // "removeComments": true,                           /* Disable emitting comments. */
-    // "noEmit": true,                                   /* Disable emitting file from a compilation. */
+    // "noEmit": true,                                   /* Disable emitting files from a compilation. */
     // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
     // "importsNotUsedAsValues": "remove",               /* Specify emit/checking behavior for imports that are only used for types */
     // "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */

tests/baselines/reference/tsConfig/Initialized TSConfig with enum value compiler options/tsconfig.json

@@ -49,7 +49,7 @@
     // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If `declaration` is true, also designates a file that bundles all .d.ts output. */
     // "outDir": "./",                                   /* Specify an output folder for all emitted files. */
     // "removeComments": true,                           /* Disable emitting comments. */
-    // "noEmit": true,                                   /* Disable emitting file from a compilation. */
+    // "noEmit": true,                                   /* Disable emitting files from a compilation. */
     // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
     // "importsNotUsedAsValues": "remove",               /* Specify emit/checking behavior for imports that are only used for types */
     // "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */

tests/baselines/reference/tsConfig/Initialized TSConfig with files options/tsconfig.json

@@ -49,7 +49,7 @@
     // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If `declaration` is true, also designates a file that bundles all .d.ts output. */
     // "outDir": "./",                                   /* Specify an output folder for all emitted files. */
     // "removeComments": true,                           /* Disable emitting comments. */
-    // "noEmit": true,                                   /* Disable emitting file from a compilation. */
+    // "noEmit": true,                                   /* Disable emitting files from a compilation. */
     // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
     // "importsNotUsedAsValues": "remove",               /* Specify emit/checking behavior for imports that are only used for types */
     // "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */

tests/baselines/reference/tsConfig/Initialized TSConfig with incorrect compiler option value/tsconfig.json

@@ -49,7 +49,7 @@
     // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If `declaration` is true, also designates a file that bundles all .d.ts output. */
     // "outDir": "./",                                   /* Specify an output folder for all emitted files. */
     // "removeComments": true,                           /* Disable emitting comments. */
-    // "noEmit": true,                                   /* Disable emitting file from a compilation. */
+    // "noEmit": true,                                   /* Disable emitting files from a compilation. */
     // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
     // "importsNotUsedAsValues": "remove",               /* Specify emit/checking behavior for imports that are only used for types */
     // "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */

tests/baselines/reference/tsConfig/Initialized TSConfig with incorrect compiler option/tsconfig.json

@@ -49,7 +49,7 @@
     // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If `declaration` is true, also designates a file that bundles all .d.ts output. */
     // "outDir": "./",                                   /* Specify an output folder for all emitted files. */
     // "removeComments": true,                           /* Disable emitting comments. */
-    // "noEmit": true,                                   /* Disable emitting file from a compilation. */
+    // "noEmit": true,                                   /* Disable emitting files from a compilation. */
     // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
     // "importsNotUsedAsValues": "remove",               /* Specify emit/checking behavior for imports that are only used for types */
     // "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */

tests/baselines/reference/tsConfig/Initialized TSConfig with list compiler options with enum value/tsconfig.json

@@ -49,7 +49,7 @@
     // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If `declaration` is true, also designates a file that bundles all .d.ts output. */
     // "outDir": "./",                                   /* Specify an output folder for all emitted files. */
     // "removeComments": true,                           /* Disable emitting comments. */
-    // "noEmit": true,                                   /* Disable emitting file from a compilation. */
+    // "noEmit": true,                                   /* Disable emitting files from a compilation. */
     // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
     // "importsNotUsedAsValues": "remove",               /* Specify emit/checking behavior for imports that are only used for types */
     // "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */

tests/baselines/reference/tsConfig/Initialized TSConfig with list compiler options/tsconfig.json

@@ -49,7 +49,7 @@
     // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If `declaration` is true, also designates a file that bundles all .d.ts output. */
     // "outDir": "./",                                   /* Specify an output folder for all emitted files. */
     // "removeComments": true,                           /* Disable emitting comments. */
-    // "noEmit": true,                                   /* Disable emitting file from a compilation. */
+    // "noEmit": true,                                   /* Disable emitting files from a compilation. */
     // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
     // "importsNotUsedAsValues": "remove",               /* Specify emit/checking behavior for imports that are only used for types */
     // "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */