Setting up vscode

[steven]

Based on GitHub - elm/editor-plugins: List of editor plugins for Elm.

I have installed vscode

$ flatpak list
Description                        Application          Version Branch Arch   Origin  Installation
Visual Studio Code - OSS - Visual… …sualstudio.code.oss 1.41.1  stable x86_64 flathub system

Installed npm and node:

$apt install -t buster-backports npm nodejs

Installed elm and dependencies:

$ npm install -g elm elm-format elm-test elm-analyse
..
+ elm@0.19.1-3
+ elm-format@0.8.3
+ elm-test@0.19.1-revision2
+ elm-analyse@0.16.5

Following the setup of

• GitHub - elm/editor-plugins: List of editor plugins for Elm.,
• looking at https://www.youtube.com/watch?list=PLZEZPz6HkCZmhuLE6W7HDNomfTMgsDw03
• installing GitHub - elm-tooling/elm-language-client-vscode: Improving your Elm experience since 2019 as in the readme

Settings.json of vscode:

{"[elm]": {
    "editor.formatOnSave": true
    },
    "terminal.integrated.shell.linux": "flatpak-spawn",
    "terminal.integrated.shellArgs.linux": ["--host", "bash"],  
    "window.zoomLevel": 0
}

I do get syntax highlighting, the file is recognized as elm code (bottom right elm indication in vscode), elm and node work in the terminal of vscode;
but my elm code (in vscode) isn’t debugged/run in the background (as in 6th movie of the above playlist https://www.youtube.com/watch?list=PLZEZPz6HkCZmhuLE6W7HDNomfTMgsDw03) ?

Possible hints?:

• In vscode > Debug > start/run i only see node.js as an enviroment, is this ok, or should elm by there as well, and how can achieve that then?
• Selecting node.js gives : cannot find a runtime in path
  ** But typing ‘node’ works in the terminal of vscode eg:

$ which node
/usr/bin/node

Any suggestions?

[steven]

Alternative approach

• Using vscodium (from snap its called codium) does not need the flatpak-spawn set up the terminal properly.
• Using the same setup as before

But also does not debug/run with only node being available
What does you launch.json look like?:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${file}"
        }
    ]
}

The error given when running is: cannot run program, setting the outFiles attribute might help.
I guess this is done in the launch.json file, i have been searching online, but no luck so far.

[stoft]

Try installing Elm and elm-format locally as a part of your project and see if that makes a difference.

[razze]

The link to the youtube playlist does not work.

The vscode elm plugin will only lint your code whenever you save. You have to setup your tasks/launch json on your own if you want that. And as there’s no debugger it rarely matters, so you can probably just run it in your cmdline.

[steven]

@razze

The link to the youtube playlist does not work.

The vscode elm plugin will only lint your code whenever you save. You have to setup your tasks/launch json on your own if you want that. And as there’s no debugger it rarely matters, so you can probably just run it in your cmdline.

My fault, the correct link is:

(especially movie nr 8)
(apparently i can’t edit the original post anymore)

That is usefull info,
do you have an example of such a tasks/launch json file

[razze]

Not really, the only one I have handy is running elixir and that will start elm.

Btw, the videos still recommend the deprecated vscode plugin.

[steven]

@razze

Btw, the videos still recommend the deprecated vscode plugin.

i noticed this also, but the plugin (from the video) recommends the new version if you check the extensions from vscode

[steven]

A few screenshots might explain more:

This is the expected behaviour after saving a elm file (at least in the video 11 of https://www.youtube.com/embed/videoseries?list=PLZEZPz6HkCZmhuLE6W7HDNomfTMgsDw03 ):

So init, view and update are underlined upon saving the file because these functions don’t exist yet

The observed behaviour:
elm-analyze kicks in after saving, but no elm lints are given:

Am i missing something? or has the behaviour of the vscode plugin changed?
Version: elmtooling.elm-ls-vscode 0.10.1

[steven]

After looking at the content of:

• elm-test
• elm-format
• elm-analyse

I noticed the following:

• elm-test and elm-format link to a node file that refers in their code to a x.js file
• elm-analyse links straight to the x.js node file
  I don’t know if this is important

What seemed to do the trick (ie a persistent solution hopefully): changing the user settings.

The workspace settings were set blank (as default):

These should override the user settings as in the documentation of vscode, but changing also the user settings to the above seemed to solve the problem.
In the original setup the user settings refererred to the location of the npm installed globally commands for elm, elm-format, elm-test. So i blanked these as well.

[razze]

Interesting, these should have been empty from the start, no idea why they were not.

[steven]

Well i changed them in usersettings in the beginning when things where not working at all,
and tested with a workspace with the same settings (filled in)
and a workspace with these settings empty (which should override them, but it didn’t)