Marko VSCode Extension: Unexpected comma at the end of condition block

[sangxxh]

Marko VSCode 1.0.16

Details

I'm working on a component. I have a thisPerson variable that has all props being optional props. I want to check if they're all "defined" before passing to a <person-card> tag.

When saving the file, the extension format the <if> tag like this and insert a comma at the end of the condition:

- <if(thisPerson.address && thisPerson.phone && thisPerson.age && thisPerson.nationality)>
+ <if(
+   thisPerson.address &&
+   thisPerson.phone &&
+   thisPerson.age &&
+   thisPerson.nationality, <!-- -----------------NOTICE THIS COMMA HERE! -->
+ )>
  <person-card
    address=thisPerson.address
    phone=thisPerson.phone
    age=thisPerson.age
  />
</if>

That doesn't seem to be a valid syntax because TypeScript checking now throwing errors for all the props I'm passing into <person-card>:

Type 'string | undefined' is not assignable to type 'string'.
  Type 'undefined' is not assignable to type 'string'

Removing the comma fixes the issue but then my prettier --check command fails! So this may be related to https://github.com/marko-js/prettier (prettier-plugin-marko package), too.

Expected Behavior

The if block should look like this instead:

<if(
  thisPerson.address &&
  thisPerson.phone &&
  thisPerson.age &&
  thisPerson.nationality
)>

Possible Fix

Seems to be a linting issue.

Your Environment

• Environment name and version (e.g. Chrome 39, node.js 5.4): Node v18.16.0.
• Operating System and version (desktop or mobile): Windows 11, Ubuntu 20

Steps to Reproduce

1. Create a template project with npx @marko/create
2. Create file src/routes/_index/types.ts with this content:

export type Person = {
  age?: number;
  address?: string;
  phone?: string;
  nationality?: string;
}

export const person: Person = {
  age: 10,
  address: 'address',
  phone: 'phone',
  nationality: 'nationality',
}

3. Create file src/components/person-card.marko with this content:

export interface Input {
    age: number;
    address: string;
    phone: string;
}

5. Change +page.marko to this:

import { person } from "./types";
$ const thisPerson = person;

<if(thisPerson.address && thisPerson.phone && thisPerson.age && thisPerson.nationality)>
  <person-card
    address=thisPerson.address
    phone=thisPerson.phone
    age=thisPerson.age
  />
</if>

6. Save the +page.marko file to replicate the Marko extension linting behaviour.

Stack Trace

Verbose Marko extension trace:

``` [Trace - 2:22:38 PM] Sending request 'textDocument/codeAction - (2194)'. Params: { "textDocument": { "uri": "file:///home/user/code/marko-replicate-problem/src/routes/_index/%2Bpage.marko" }, "range": { "start": { "line": 0, "character": 0 }, "end": { "line": 10, "character": 0 } }, "context": { "diagnostics": [], "only": [ "source.fixAll.eslint" ], "triggerKind": 2 } } [Trace - 2:22:38 PM] Received response 'textDocument/codeAction - (2194)' in 1ms. No result returned. [Trace - 2:22:38 PM] Sending request 'textDocument/formatting - (2195)'. Params: { "textDocument": { "uri": "file:///home/user/code/marko-replicate-problem/src/routes/_index/%2Bpage.marko" }, "options": { "tabSize": 2, "insertSpaces": true, "trimTrailingWhitespace": true } } [Trace - 2:22:38 PM] Received response 'textDocument/formatting - (2195)' in 31ms. Result: [ { "range": { "start": { "line": 0, "character": 0 }, "end": { "line": 10, "character": 0 } }, "newText": "import { person } from \"./types\";\n$ const thisPerson = person;\n\n\n \n\n" } ] [Trace - 2:22:38 PM] Sending notification 'textDocument/didChange'. Params: { "textDocument": { "uri": "file:///home/user/code/marko-replicate-problem/src/routes/_index/%2Bpage.marko", "version": 574 }, "contentChanges": [ { "range": { "start": { "line": 3, "character": 86 }, "end": { "line": 3, "character": 86 } }, "rangeLength": 0, "text": ",\n" }, { "range": { "start": { "line": 3, "character": 63 }, "end": { "line": 3, "character": 63 } }, "rangeLength": 0, "text": "\n " }, { "range": { "start": { "line": 3, "character": 45 }, "end": { "line": 3, "character": 45 } }, "rangeLength": 0, "text": "\n " }, { "range": { "start": { "line": 3, "character": 26 }, "end": { "line": 3, "character": 26 } }, "rangeLength": 0, "text": " " }, { "range": { "start": { "line": 3, "character": 25 }, "end": { "line": 3, "character": 25 } }, "rangeLength": 0, "text": "\n" }, { "range": { "start": { "line": 3, "character": 4 }, "end": { "line": 3, "character": 4 } }, "rangeLength": 0, "text": "\n " } ] } [Trace - 2:22:38 PM] Sending notification 'textDocument/didSave'. Params: { "textDocument": { "uri": "file:///home/user/code/marko-replicate-problem/src/routes/_index/%2Bpage.marko" } } [Trace - 2:22:38 PM] Sending request 'textDocument/documentSymbol - (2196)'. Params: { "textDocument": { "uri": "file:///home/user/code/marko-replicate-problem/src/routes/_index/%2Bpage.marko" } } [Trace - 2:22:38 PM] Received response 'textDocument/documentSymbol - (2196)' in 1ms. Result: [ { "name": "if", "kind": 5, "location": { "uri": "file:///home/user/code/marko-replicate-problem/src/routes/_index/%2Bpage.marko", "range": { "start": { "line": 3, "character": 0 }, "end": { "line": 14, "character": 5 } } } }, { "name": "person-card", "kind": 5, "location": { "uri": "file:///home/user/code/marko-replicate-problem/src/routes/_index/%2Bpage.marko", "range": { "start": { "line": 9, "character": 2 }, "end": { "line": 13, "character": 4 } } } } ] [Trace - 2:22:39 PM] Sending notification 'workspace/didChangeWatchedFiles'. Params: { "changes": [ { "uri": "file:///home/user/code/marko-replicate-problem/src/routes/_index/%2Bpage.marko", "type": 2 } ] } [Trace - 2:22:39 PM] Received notification 'textDocument/publishDiagnostics'. Params: { "uri": "file:///home/user/code/marko-replicate-problem/src/routes/_index/%2Bpage.marko", "diagnostics": [ { "range": { "start": { "line": 10, "character": 4 }, "end": { "line": 10, "character": 11 } }, "source": "script", "code": 2322, "severity": 1, "message": "Type 'string | undefined' is not assignable to type 'string'.\n Type 'undefined' is not assignable to type 'string'." }, { "range": { "start": { "line": 11, "character": 4 }, "end": { "line": 11, "character": 9 } }, "source": "script", "code": 2322, "severity": 1, "message": "Type 'string | undefined' is not assignable to type 'string'.\n Type 'undefined' is not assignable to type 'string'." }, { "range": { "start": { "line": 12, "character": 4 }, "end": { "line": 12, "character": 7 } }, "source": "script", "code": 2322, "severity": 1, "message": "Type 'number | undefined' is not assignable to type 'number'.\n Type 'undefined' is not assignable to type 'number'." } ] } [Trace - 2:22:39 PM] Sending request 'textDocument/documentLink - (2197)'. Params: { "textDocument": { "uri": "file:///home/user/code/marko-replicate-problem/src/routes/_index/%2Bpage.marko" } } [Trace - 2:22:39 PM] Sending request 'textDocument/documentColor - (2198)'. Params: { "textDocument": { "uri": "file:///home/user/code/marko-replicate-problem/src/routes/_index/%2Bpage.marko" } } [Trace - 2:22:39 PM] Received response 'textDocument/documentLink - (2197)' in 307ms. Result: [] [Trace - 2:22:39 PM] Received response 'textDocument/documentColor - (2198)' in 308ms. No result returned. ```