VSCode - current and future usage

[adriatic]

Introduction

While it might seem reasonable to create this discussion in the form of a poll, the built-in poll in Discourse is rather too limited, so I hope to get RedwoodJS user’s feedback in the form of a reply to this post, which should be not perceived as advertisement, but rather people’s preferences on Application Development Tooling (not RedwoodJS framework development tooling)

---

Details

Based on my own experience acquired in testing Redwood Tutorial I, my guess would be that relatively few people favor VSCode over the “classic” (Redwood CLI / Console Terminal - Yarn - npm) set. Since one of my projects includes writing the Developing Redwood Projects on Windows document, I created the RedwoodJS and VSCode section to discuss and define VSCodesettings issues

Since VSCode is a platform-independent tool, just like the “classic” (Redwood CLI / Console Terminal - Yarn - npm) set, even if you are not using VSCode please define the application development tools you are using. This will ensure that the setting.json maintained in this document which are used in:

yarn create redwood-app ./my-app

ensure identical application skeleton created across all platforms and development tools.

An example of different behavior between running the Jest tests in VSCode and the “classic” tooling is described in Test suite failed to run issue. The different behavior is a consequence of VSCode trying to run as many tasks in parallel as possible, including running the tests even before node_modules is built.

---

Information expected to be gathered

If you use VSCode already, please supply a copy of your VSCode settings (kept in .vscode\settings.json file from each OS you run VSCode).

Otherwise, please use the information in the Details section of this post, to figure out what data can help me to unify all these different .vscode/settings data

[Tobbe]

Here’s mine (Windows 10)

{
  "editor.tabSize": 2,
  "files.trimTrailingWhitespace": true,
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "[prisma]": {
    "editor.formatOnSave": true
  }
}

[Tobbe]

@adriatic

my guess would be that relatively few people favor VSCode

Why do you say that? From your last poll everyone except one person said they used VSCode

Development tools usage poll

I searched for an existing poll and did not find it. So, I would really appreciate everyone’s development tools selection in the form of a reply to this topic, regardless of whether you work on the RWJS framework or use the RWJS framework to develop applications. The following list of tools is of interest for many of our future plans (note that the nodejs, npm/yarn are tools that we all use, so these should not be of interest in this poll) OS (Linux, macOS, Windows) Code editor (Atom. AWS…

[jeliasson]

@adriatic

[…] over the “classic” (Redwood CLI / Console Terminal - Yarn - npm) set.

In this classic setup you describe, where do you write your code? If you remove VSCode from the equation, then you have a blank to fill in. For the sake of argument, let’s ignore which shell is being used.

I’m on VSCode with a very similar setup as @Tobbe, but with WSL as default shell.

"terminal.integrated.shell.windows": "C:\\Windows\\System32\\wsl.exe",

[Tobbe]

If you want my general VSCode settings.json (i.e. not the project specific one in .vscode/), this is what it looks like

{
  "workbench.colorCustomizations": {
    "statusBar.background": "#005f5f",
    "statusBar.noFolderBackground": "#005f5f",
    "statusBar.debuggingBackground": "#005f5f",
    "statusBarItem.hoverBackground": "#ce7350",
    "statusBar.border": "#b85833",
    "activityBar.background": "#23320E",
    "titleBar.activeBackground": "#314614",
    "titleBar.activeForeground": "#F7FBF1"
  },
  "editor.minimap.enabled": false,
  "breadcrumbs.enabled": false,
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "files.eol": "\n",
  "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
  "svgPreview.autoOpen": false,
  "extensions.ignoreRecommendations": true,
  "editor.tabSize": 2,
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.renderWhitespace": "all",
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "markdown.preview.scrollEditorWithPreview": false,
  "markdown.preview.scrollPreviewWithEditor": false,
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "liveshare.connectionMode": "relay",
  "editor.fontFamily": "Consolas, 'Courier New', monospace, 'Segoe UI Emoji'"
}

As you can see I’m using bash as my shell in the VSCode terminal

[adriatic]

Hi, @Tobbe

@Tobbe

Why do you say that? From your last poll everyone except one person said they used VSCode

Perhaps the total number of responses was minuscule (note that I hoped to hear from RW application developers, not just RW team members )

[adriatic]

@jeliasson

In this classic setup you describe, where do you write your code?

Oh, any text editor, starting from cmder all the way back to emacs, vim, or even vi.

Thanks for responding, Johan

A question: when using wsl shell, do you have to run vscode in the “linux” mode?

[jeliasson]

@adriatic

A question: when using wsl shell, do you have to run vscode in the “linux” mode?

I’m not sure I fully understand what you mean by “linux” mode, but VSCode with the Remote - WSL extension will recognize if my project is on the host (Windows) file system or the WSL guest (in my case Ubuntu) file system and integrate accordingly. As I use WSL as shell (terminal.integrated.shell.windows), it will give my WSL Ubuntu terminal.

Here is VSCode with Redwood on the WSL file system. Pay attention to the terminal path, and the bottom left corner (WSL: Ubuntu-20.04).

Here is VSCode with Redwood on the Windows file system. Pay attention to the terminal path with native access to the host file system (mapped to /mnt/c by default) and that we are not running in WSL integrated.

As a bonus, here is me opening VSCode on my Windows host by invoking code . in the WSL shell. WSL is beautiful.

[adriatic]

Thank you @jeliasson for such a detailed response. To answer your question

@jeliasson

I’m not sure I fully understand what you mean by “linux” mode

I meant this: Windows Subsystem for Linux Installation Guide for Windows 10. Without trying your setup, I would guess that it not much different from mine, where I am running powershel in the “dual” (split) terminal as shown above

Note that I can change terminal tu run powershell (with VSCode settings only) in order to avoid running the VSCode in “Linux on Windows” - just as you wrote above

@jeliasson

Here is VSCode with Redwood on the Windows file system. Pay attention to the terminal path with native access to the host file system (mapped to /mnt/c by default) and that we are not running in WSL integrated.

It is possible that your and my settings are identical (invoking the same OS API). Not being sure whether that is a true statement and remembering Aldo’s difficulties to run his VSCode extension in a “hybrid Windows / Linux” system, where VSCode might be missing some of the Windows API. I really like the Aldo’s extension described here. ( an API to explore a Redwood Project as a graph (like an AST) , which powers diagnostics and defines conventions).

[jeliasson]

@adriatic

Note that I can change terminal tu run powershell (with VSCode settings only) in order to avoid running the VSCode in “Linux on Windows” - just as you wrote above

@adriatic

A question: when using wsl shell, do you have to run vscode in the “linux” mode?

I want to emphasize that I do not run VSCode in Linux. VSCode is installed and running* on my Windows machine. WSL is simply enabling you to have a Linux environment along your Windows environment, just like e.g. git-bash emulates a bash-like Linux environment.

Here is VSCode running (on Windows) with PowerShell and WSL shell side by side. It’s just a configuration after all.

*Technically, when running a project on the WSL filesystem, the VSCode Server is running in WSL userspace and the VSCode client remains on the Windows host.

Anyway. I think we’ve discussed this topic enought in this thread. After all, it was about gathering VSCode data. Good night!

[adriatic]

@jeliasson

I want to emphasize that I do not run VSCode in Linux.

I did not imply that you run VSCode on Linux - I wrote "running the VSCode in “Linux on Windows”. To be really precise, we need to use a dictionary we both agree with:

1. We both use “pure” Windows, meaning that any installed application uses Win32 API and nothing else (like accessing a VM that implements Linux file system). "Any installed application includes VSCode of course).
2. Statement 1 above could be rephrased to “neither one of us makes use of Sick of Microsoft? How to Make the Switch From Windows to Linux | PCMag”

If either 1. or 2. above yields true then I agree that discussion should end with a happy end.

Good night back to you, Johan - and thank you for an interesting discussion.

[OlagStegan]

No idea if you are still interested.

I use VSCode on Windows 10 for several languages in development but use Linux in production, didn’t know there was any “redwood” specific alternative but irrelevant as I am not just JS focused.

{
  "editor.tabSize": 3,
  "files.trimTrailingWhitespace": true,
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "[prisma]": {
    "editor.formatOnSave": tru
  }
}

[adriatic]

The fact that this issue is still open, may indicate that it is still off interest. Focus of the team since this issue was created is to get the 1.0 release before resolving all various platform issues.

A lot has changed on the Windows platform / VSCode since. This section will have to be scrubbed first.