feat(parser): add more helps to parser errors (#15186)

Added more helps to parser errors to make it easier to understand how the error can be resolved.

Author: sapphi-red

crates/oxc_ast/src/ast/literal.rs

@@ -178,6 +178,9 @@ pub struct RegExpPattern<'a> {
     pub pattern: Option<Box<'a, Pattern<'a>>>,
 }
 
+/// The list of valid regular expression flags.
+pub const REGEXP_FLAGS_LIST: &str = "gimsuydv";
+
 bitflags! {
     /// Regular expression flags.
     ///

crates/oxc_linter/src/snapshots/eslint_no_nonoctal_decimal_escape.snap

@@ -404,7 +404,7 @@ source: crates/oxc_linter/src/tester.rs
  1 │ var foo = '8'\n  bar = '\\9'
    ·              ▲
    ╰────
-  help: Try insert a semicolon here
+  help: Try inserting a semicolon here
 
   ⚠ eslint(no-nonoctal-decimal-escape): Don't use '\8' escape sequence.
    ╭─[no_nonoctal_decimal_escape.tsx:1:5]

crates/oxc_linter/src/snapshots/jsx_a11y_label_has_associated_control.snap

@@ -103,7 +103,7 @@ source: crates/oxc_linter/src/tester.rs
  1 │ <label><span><span><span>A label<input /></span></span></span></label>'
    ·                                                                       ▲
    ╰────
-  help: Try insert a semicolon here
+  help: Try inserting a semicolon here
 
   ⚠ eslint-plugin-jsx-a11y(label-has-associated-control): A form label must be associated with a control.
    ╭─[label_has_associated_control.tsx:1:1]

crates/oxc_linter/src/snapshots/react_button_has_type.snap

@@ -97,7 +97,7 @@ source: crates/oxc_linter/src/tester.rs
  1 │ button type/>
    ·       ▲
    ╰────
-  help: Try insert a semicolon here
+  help: Try inserting a semicolon here
 
   ⚠ eslint-plugin-react(button-has-type): `button` elements must have a valid `type` attribute.
    ╭─[button_has_type.tsx:1:9]

crates/oxc_parser/src/diagnostics.rs

@@ -1,5 +1,6 @@
 use std::borrow::Cow;
 
+use oxc_ast::ast::REGEXP_FLAGS_LIST;
 use oxc_diagnostics::OxcDiagnostic;
 use oxc_span::Span;
 
@@ -77,12 +78,14 @@ pub fn unterminated_string(span: Span) -> OxcDiagnostic {
 pub fn reg_exp_flag(x0: char, span1: Span) -> OxcDiagnostic {
     OxcDiagnostic::error(format!("Unexpected flag {x0} in regular expression literal"))
         .with_label(span1)
+        .with_help(format!("The allowed flags are `{REGEXP_FLAGS_LIST}`"))
 }
 
 #[cold]
 pub fn reg_exp_flag_twice(x0: char, span1: Span) -> OxcDiagnostic {
     OxcDiagnostic::error(format!("Flag {x0} is mentioned twice in regular expression literal"))
         .with_label(span1)
+        .with_help("Remove the duplicated flag here")
 }
 
 #[cold]
@@ -116,23 +119,29 @@ pub fn auto_semicolon_insertion(span: Span) -> OxcDiagnostic {
     OxcDiagnostic::error(
         "Expected a semicolon or an implicit semicolon after a statement, but found none",
     )
-    .with_help("Try insert a semicolon here")
+    .with_help("Try inserting a semicolon here")
     .with_label(span)
 }
 
 #[cold]
 pub fn lineterminator_before_arrow(span: Span) -> OxcDiagnostic {
-    OxcDiagnostic::error("Line terminator not permitted before arrow").with_label(span)
+    OxcDiagnostic::error("Line terminator not permitted before arrow")
+        .with_label(span)
+        .with_help("Remove the line break before here")
 }
 
 #[cold]
 pub fn invalid_destrucuring_declaration(span: Span) -> OxcDiagnostic {
-    OxcDiagnostic::error("Missing initializer in destructuring declaration").with_label(span)
+    OxcDiagnostic::error("Missing initializer in destructuring declaration")
+        .with_label(span)
+        .with_help("Add an initializer (e.g. ` = undefined`) here")
 }
 
 #[cold]
-pub fn missinginitializer_in_const(span: Span) -> OxcDiagnostic {
-    OxcDiagnostic::error("Missing initializer in const declaration").with_label(span)
+pub fn missing_initializer_in_const(span: Span) -> OxcDiagnostic {
+    OxcDiagnostic::error("Missing initializer in const declaration")
+        .with_label(span)
+        .with_help("Add an initializer (e.g. ` = undefined`) here")
 }
 
 #[cold]
@@ -160,12 +169,14 @@ pub fn await_expression(span: Span) -> OxcDiagnostic {
         "`await` is only allowed within async functions and at the top levels of modules",
     )
     .with_label(span)
+    .with_help("Either remove this `await` or add the `async` keyword to the enclosing function")
 }
 
 #[cold]
 pub fn yield_expression(span: Span) -> OxcDiagnostic {
     OxcDiagnostic::error("A 'yield' expression is only allowed in a generator body.")
         .with_label(span)
+        .with_help("Either remove this `yield` or change the enclosing function to a generator function (`function*`)")
 }
 
 #[cold]
@@ -191,14 +202,21 @@ pub fn extends_clause_already_seen(span: Span) -> OxcDiagnostic {
 
 // 'extends' clause must precede 'implements' clause. ts(1173)
 #[cold]
-pub fn extends_clause_must_precede_implements(span: Span) -> OxcDiagnostic {
-    ts_error("1173", "'extends' clause must precede 'implements' clause").with_label(span)
+pub fn extends_clause_must_precede_implements(span: Span, implements_span: Span) -> OxcDiagnostic {
+    ts_error("1173", "'extends' clause must precede 'implements' clause")
+        .with_labels([
+            implements_span.label("'implements' clause found here"),
+            span.primary_label("'extends' clause found here"),
+        ])
+        .with_help("Move the 'extends' clause before the 'implements' clause")
 }
 
 // 'implements' clause already seen. ts(1175)
 #[cold]
-pub fn implements_clause_already_seen(span: Span) -> OxcDiagnostic {
-    ts_error("1175", "'implements' clause already seen").with_label(span)
+pub fn implements_clause_already_seen(span: Span, seen_span: Span) -> OxcDiagnostic {
+    ts_error("1175", "'implements' clause already seen")
+        .with_labels([seen_span, span])
+        .with_help("Merge the two 'implements' clauses into one by a ','")
 }
 
 #[cold]
@@ -220,6 +238,7 @@ pub fn spread_last_element(span: Span) -> OxcDiagnostic {
 pub fn rest_element_trailing_comma(span: Span) -> OxcDiagnostic {
     OxcDiagnostic::error("A rest parameter or binding pattern may not have a trailing comma.")
         .with_label(span)
+        .with_help("Remove the trailing comma here")
 }
 
 #[cold]
@@ -231,7 +250,9 @@ pub fn invalid_binding_rest_element(span: Span) -> OxcDiagnostic {
 
 #[cold]
 pub fn a_rest_parameter_cannot_be_optional(span: Span) -> OxcDiagnostic {
-    OxcDiagnostic::error("A rest parameter cannot be optional").with_label(span)
+    OxcDiagnostic::error("A rest parameter cannot be optional")
+        .with_label(span)
+        .with_help("Remove this `?`. The default value is an empty array")
 }
 
 #[cold]
@@ -268,12 +289,14 @@ pub fn decorator_optional(span: Span) -> OxcDiagnostic {
 pub fn for_loop_async_of(span: Span) -> OxcDiagnostic {
     OxcDiagnostic::error("The left-hand side of a `for...of` statement may not be `async`")
         .with_label(span)
+        .with_help("Did you mean to use a for await...of statement?")
 }
 
 #[cold]
 pub fn for_await(span: Span) -> OxcDiagnostic {
     OxcDiagnostic::error("await can only be used in conjunction with `for...of` statements")
         .with_label(span)
+        .with_help("Did you mean to use a for...of statement?")
 }
 
 #[cold]
@@ -288,7 +311,8 @@ pub fn private_name_constructor(span: Span) -> OxcDiagnostic {
 
 #[cold]
 pub fn static_prototype(span: Span) -> OxcDiagnostic {
-    OxcDiagnostic::error("Classes may not have a static property named prototype").with_label(span)
+    OxcDiagnostic::error("Classes may not have a static property named 'prototype'")
+        .with_label(span)
 }
 
 #[cold]
@@ -303,7 +327,9 @@ pub fn constructor_async(span: Span) -> OxcDiagnostic {
 
 #[cold]
 pub fn optional_accessor_property(span: Span) -> OxcDiagnostic {
-    ts_error("1276", "An 'accessor' property cannot be declared optional.").with_label(span)
+    ts_error("1276", "An 'accessor' property cannot be declared optional.")
+        .with_label(span)
+        .with_help("Remove this `?`")
 }
 
 #[cold]
@@ -438,7 +464,9 @@ pub fn expect_function_name(span: Span) -> OxcDiagnostic {
 
 #[cold]
 pub fn expect_catch_finally(span: Span) -> OxcDiagnostic {
-    OxcDiagnostic::error("Missing catch or finally clause").with_label(span)
+    OxcDiagnostic::error("Missing catch or finally clause")
+        .with_label(span)
+        .with_help("Either unwrap this try block or add catch / finally clause")
 }
 
 #[cold]
@@ -449,7 +477,7 @@ pub fn v8_intrinsic_spread_elem(span: Span) -> OxcDiagnostic {
 
 #[cold]
 pub fn a_set_accessor_cannot_have_a_return_type_annotation(span: Span) -> OxcDiagnostic {
-    ts_error("1095", " A 'set' accessor cannot have a return type annotation.").with_label(span)
+    ts_error("1095", "A 'set' accessor cannot have a return type annotation.").with_label(span)
 }
 
 #[cold]
@@ -469,6 +497,7 @@ pub fn await_using_declaration_not_allowed_in_for_in_statement(span: Span) -> Ox
         "The left-hand side of a for...in statement cannot be an await using declaration.",
     )
     .with_label(span)
+    .with_help("Did you mean to use a for...of statement?")
 }
 
 #[cold]
@@ -477,11 +506,14 @@ pub fn using_declaration_not_allowed_in_for_in_statement(span: Span) -> OxcDiagn
         "The left-hand side of a for...in statement cannot be an using declaration.",
     )
     .with_label(span)
+    .with_help("Did you mean to use a for...of statement?")
 }
 
 #[cold]
 pub fn using_declarations_must_be_initialized(span: Span) -> OxcDiagnostic {
-    OxcDiagnostic::error("Using declarations must have an initializer.").with_label(span)
+    OxcDiagnostic::error("Using declarations must have an initializer.")
+        .with_label(span)
+        .with_help("Add an initializer (e.g. ` = undefined`) here")
 }
 
 #[cold]
@@ -638,13 +670,15 @@ pub fn accessibility_modifier_on_private_property(modifier: &Modifier) -> OxcDia
 #[cold]
 pub fn type_modifier_on_named_type_import(span: Span) -> OxcDiagnostic {
     ts_error("2206", "The 'type' modifier cannot be used on a named import when 'import type' is used on its import statement.")
-             .with_label(span)
+        .with_label(span)
+        .with_help("Remove this 'type' modifier")
 }
 
 #[cold]
 pub fn type_modifier_on_named_type_export(span: Span) -> OxcDiagnostic {
     ts_error("2207", "The 'type' modifier cannot be used on a named export when 'export type' is used on its export statement.")
          .with_label(span)
+         .with_help("Remove this 'type' modifier")
 }
 
 #[cold]
@@ -737,6 +771,7 @@ pub fn decorators_are_not_valid_here(span: Span) -> OxcDiagnostic {
 pub fn decorator_on_overload(span: Span) -> OxcDiagnostic {
     ts_error("1249", "A decorator can only decorate a method implementation, not an overload.")
         .with_label(span)
+        .with_help("Move this after all the overloads")
 }
 
 #[cold]
@@ -797,11 +832,18 @@ pub fn reg_exp_flag_u_and_v(span: Span) -> OxcDiagnostic {
         "The 'u' and 'v' regular expression flags cannot be enabled at the same time",
     )
     .with_label(span)
+    .with_help("v flag enables additional syntax over u flag")
 }
 
 #[cold]
-pub fn setter_with_parameters(span: Span) -> OxcDiagnostic {
-    OxcDiagnostic::error("A 'set' accessor must have exactly one parameter.").with_label(span)
+pub fn setter_with_parameters(span: Span, parameters_count: usize) -> OxcDiagnostic {
+    OxcDiagnostic::error("A 'set' accessor must have exactly one parameter.")
+        .with_label(span)
+        .with_help(if parameters_count == 0 {
+            "Add a parameter here"
+        } else {
+            "Remove parameters except the first one here"
+        })
 }
 
 #[cold]
@@ -815,7 +857,9 @@ pub fn setter_with_assignment_pattern(span: Span) -> OxcDiagnostic {
 
 #[cold]
 pub fn getter_parameters(span: Span) -> OxcDiagnostic {
-    OxcDiagnostic::error("A 'get' accessor must not have any formal parameters.").with_label(span)
+    OxcDiagnostic::error("A 'get' accessor must not have any formal parameters.")
+        .with_label(span)
+        .with_help("Remove these parameters here")
 }
 
 #[cold]

crates/oxc_parser/src/js/class.rs

@@ -127,17 +127,19 @@ impl<'a> ParserImpl<'a> {
                         self.error(diagnostics::extends_clause_already_seen(
                             self.cur_token().span(),
                         ));
-                    } else if implements.is_some() {
+                    } else if let Some((implements_span, _)) = implements {
                         self.error(diagnostics::extends_clause_must_precede_implements(
                             self.cur_token().span(),
+                            implements_span,
                         ));
                     }
                     extends = Some(self.parse_extends_clause());
                 }
                 Kind::Implements => {
-                    if implements.is_some() {
+                    if let Some((implements_span, _)) = implements {
                         self.error(diagnostics::implements_clause_already_seen(
                             self.cur_token().span(),
+                            implements_span,
                         ));
                     }
                     let implements_kw_span = self.cur_token().span();
@@ -651,7 +653,10 @@ impl<'a> ParserImpl<'a> {
         if let Some(rest) = &function.params.rest {
             self.error(diagnostics::setter_with_rest_parameter(rest.span));
         } else if function.params.parameters_count() != 1 {
-            self.error(diagnostics::setter_with_parameters(function.params.span));
+            self.error(diagnostics::setter_with_parameters(
+                function.params.span,
+                function.params.parameters_count(),
+            ));
         } else if self.is_ts
             && function.params.items.first().unwrap().pattern.kind.is_assignment_pattern()
         {

crates/oxc_parser/src/js/declaration.rs

@@ -150,7 +150,7 @@ impl<'a> ParserImpl<'a> {
                 self.error(diagnostics::invalid_destrucuring_declaration(decl.id.span()));
             } else if decl.kind == VariableDeclarationKind::Const {
                 // It is a Syntax Error if Initializer is not present and IsConstantDeclaration of the LexicalDeclaration containing this LexicalBinding is true.
-                self.error(diagnostics::missinginitializer_in_const(decl.id.span()));
+                self.error(diagnostics::missing_initializer_in_const(decl.id.span()));
             }
         }
     }

crates/oxc_semantic/src/checker/javascript.rs

@@ -204,7 +204,9 @@ pub fn check_binding_identifier(ident: &BindingIdentifier, ctx: &SemanticBuilder
 }
 
 fn unexpected_arguments(x0: &str, span1: Span) -> OxcDiagnostic {
-    OxcDiagnostic::error(format!("'arguments' is not allowed in {x0}")).with_label(span1)
+    OxcDiagnostic::error(format!("'arguments' is not allowed in {x0}"))
+        .with_label(span1)
+        .with_help("Assign the 'arguments' variable to a temporary variable outside")
 }
 
 pub fn check_identifier_reference(ident: &IdentifierReference, ctx: &SemanticBuilder<'_>) {
@@ -372,6 +374,9 @@ fn illegal_use_strict(span: Span) -> OxcDiagnostic {
         "Illegal 'use strict' directive in function with non-simple parameter list",
     )
     .with_label(span)
+    .with_help(
+        "Wrap this function with an IIFE with a 'use strict' directive that returns this function",
+    )
 }
 
 // It is a Syntax Error if FunctionBodyContainsUseStrict of AsyncFunctionBody is true and IsSimpleParameterList of FormalParameters is false.
@@ -442,8 +447,8 @@ pub fn check_module_declaration(decl: &ModuleDeclarationKind, ctx: &SemanticBuil
 
 fn new_target(span: Span) -> OxcDiagnostic {
     OxcDiagnostic::error("Unexpected new.target expression")
-.with_help("new.target is only allowed in constructors and functions invoked using thew `new` operator")
-.with_label(span)
+        .with_help("new.target is only allowed in constructors and functions invoked using the `new` operator")
+        .with_label(span)
 }
 
 fn import_meta(span: Span) -> OxcDiagnostic {

napi/parser/test/parse.test.ts

@@ -836,9 +836,9 @@ describe('UTF-16 span', () => {
        1 | "🤨";asdf asdf
          :          ^
          \`----
-        help: Try insert a semicolon here
+        help: Try inserting a semicolon here
       ",
-          "helpMessage": "Try insert a semicolon here",
+          "helpMessage": "Try inserting a semicolon here",
           "labels": [
             {
               "end": 9,
@@ -861,7 +861,7 @@ describe('error', () => {
     expect(ret.errors.length).toBe(1);
     delete ret.errors[0].codeframe;
     expect(ret.errors[0]).toStrictEqual({
-      helpMessage: 'Try insert a semicolon here',
+      helpMessage: 'Try inserting a semicolon here',
       labels: [
         {
           end: 4,

tasks/coverage/snapshots/formatter_typescript.snap

@@ -12,7 +12,7 @@ Unexpected token
 Expect to Parse: tasks/coverage/typescript/tests/cases/compiler/sourceMapValidationDecorators.ts
 Unexpected token
 Expect to Parse: tasks/coverage/typescript/tests/cases/conformance/classes/propertyMemberDeclarations/staticPropertyNameConflicts.ts
-Classes may not have a static property named prototypeClasses may not have a static property named prototypeClasses may not have a static property named prototypeClasses may not have a static property named prototypeClasses may not have a static property named prototypeClasses may not have a static property named prototype
+Classes may not have a static property named 'prototype'Classes may not have a static property named 'prototype'Classes may not have a static property named 'prototype'Classes may not have a static property named 'prototype'Classes may not have a static property named 'prototype'Classes may not have a static property named 'prototype'
 Expect to Parse: tasks/coverage/typescript/tests/cases/conformance/es2019/importMeta/importMeta.ts
 The only valid meta property for import is import.meta
 Expect to Parse: tasks/coverage/typescript/tests/cases/conformance/expressions/elementAccess/letIdentifierInElementAccess01.ts