VS Code extension not updaing the code

[JRebella]

When creating a brand new file and a brand new machine using the xsm code snippet, then opening the machine with the editor, changes made in the editor are not reflected in the code

I believe this is caused by the extension looking for the reference code comment /** @xstate-layout... in the wrong place and not finding it. I think this is the case because moving this comment to a specific place fixes the issue

Reproducing the issue

1. Make a new .ts file
2. Create a new machine using the xsm code snippet (manually typing createMachine should do the trick too)
3. Save the file once to allow typegen to run
4. Open the machine using the Open Visual Editor button above the machine const
5. Make any changes using the editor

For me when doing this, changes in the editor aren't reflected in the code

Workaround

When you first open the editor, the extension will create this /** @xstate-layout... comment below the const nameOfMachine declaration line and right inside the machine model object parameter:

Cut this line and place it right above the machine declaration like this (make sure not to leave an empty line between the comment and the machine variable declaration):

Now open the editor using the Open Visual Editor and the code should now react to changes in the editor

[davidkpiano]

Which version of the extension are you using?

[JRebella]

Which version of the extension are you using?

Should be the latest "XState VSCode" v1.13.0, before finding the workaround I tried uninstalling and reinstalling the extension. I also have "xstate-visualizer" v1.0.4 installed

[ruanhaodong]

same issue confirmed, extension version is v1.13.0. Solved by moving /** @xstate-layout above createMachine and under const declaration

[void-mAlex]

not great that for machines that don't have layout the default from the editor is to put it inside the createMachine({ call

[Andarist]

not great that for machines that don't have layout the default from the editor is to put it inside the createMachine({ call

Could you tell me more about what is not great about it? Do you have problems with code syncing like the OP? Or do you face other issues?

[Andarist]

@JRebella I can't repro this problem using the provided repro steps. Would you be open to scheduling a call with me so we could debug your issue together?

[void-mAlex]

Could you tell me more about what is not great about it? Do you have problems with code syncing like the OP? Or do you face other issues?

yes I do, editing anything about the machine shows Request applyMachineEdits failed with message: Cannot read properties of null (reading 'start') when layout string is inside the machine

[TobiObeck]

I have the same issues (using v1.14.1) and investigated this a bit. The workaround of moving the //** @xstate-layout ... */ didn't work for me reliably. @Andarist, I saw the Discord thread from yesterday and think your intuition that tabs are the problem is correct. Any tabs mess up the behavior of the extension.

I played around rendering white space via settings.json: "editor.renderWhitespace": "all",

Here a description of what happens after I use the code configuration in the screenshot below (I did reset the configuration to the screenshot for both tests):

• Clicking on initialState state and then the [+] --> still creates the code for the new transition.
• Double-clicking initialState and renaming --> changes code accordingly

Here a description of what happens after I use the code configuration in the screenshot below (I did reset the configuration to the screenshot for both tests):

• Clicking on initialState state and then the [+] --> still creates the code for the new transition.
• Double-clicking initialState and renaming --> no code change

Here a description of what happens after I use the code configuration in the screenshot below (I did reset the configuration to the screenshot for both tests):

• Clicking on initialState state and then the [+] --> no code change
• Double-clicking initialState and renaming --> no code change

Using spaces for all indentations or no indentation at all makes the extension work. From there on, the extension creates spaces for indentation and continues working.

So, if you are using prettier, you might want to adjust your prettier or VS Code formatting settings until the extension is fixed:

• Using prettier with "useTabs": true reproduces the issue.
• "useTabs": false is a workaround. Or deactivate prettier and configure VS Code to use spaces

[JRebella]

@TobiObeck

Interestingly, I have prettier configured withuseTabs: false and VSCode to use spaces and not tabs

[BellatrixLeStranger]

Same issue here, extension version 1.14.3 I use Prettier too and once I switched the useTabs setting to false, it started working again.

[L1atte]

Setting the prettier config with "useTabs: false" is work for me

[rchandra9]

Setting the prettier config useTabs: false, vs code insertSpaces: true, pgFormatter: 2 and reloading window worked for me.

[void-mAlex]

yes using spaces works, sadly it goes against the linting settings for all my projects that use tabs and being forced to use something else because otherwise it doesn't work is not great

[OllieJT]

Is there anyway to revive this issue? It seems crazy that linting preferences is causing this kind of issue.

[Dylansc22]

Thanks @L1atte @rchandra9 ! useTabs: false in .prettierrc fixes the issue 🤓

In your .prettierrc config:

{
    ...
-   useTabs: true,
+   useTabs: false
}

(then in VSCode reformat via ctrl+shift+p > "reload window" then "format document")

---

Alternative "solution" to keep tabs in codebase: (1) format tabs away once, (2) then ignore the file from prettier going forward:

// your-state-machine.js

+ // prettier-ignore
const machine = 
    setup({...})
   .createMachine({...})

or

# .prettierignore
path/to/your-state-machine.js

[bombillazo]

Can the extension handle the file regardless of its formatting? It gets hairy trying to remove lint/styling rules for this specific use case.