fix: VS Code Server docs chaos

zerescas commented 1 month ago

🐛 The bug

There is a section in documentation about VS Code Server, but I can't get working it.

Part 1 - Follow the docs

Installing code-server from coder as proposes the docs leads to an error:

ℹ Nuxt DevTools: Starting VS Code Server at http://localhost:3080/?folder=%2Fapp ... ${{\color{red}{\textsf{ [2024-09-24T06:00:05.623Z] error Unknown option --accept-server-license-terms }}}}\$

and tab with VS Code freezes with Starting...

Part 2 - Follow the VS Code tab

The tab VS Code has link that leads to the Microsoft website

Learn more about it with this guide.

Installing vscode-server and reloading Nuxt leads to new error:

ℹ Nuxt DevTools: Starting VS Code Server at http://localhost:3080/?folder=%2Fapp ... ${{\color{red}{\textsf{ /usr/local/bin/code-server: 2: Syntax error: newline unexpected }}}}\$

Also launching code-server from CLI leads to errors:

root@3a11cfec517f:/app# code-server ${{\color{red}{\textsf{ /usr/local/bin/code-server: line 1: syntax error near unexpected token `newline' }}}}\$

${{\color{red}{\textsf{ /usr/local/bin/code-server: line 1: `<!DOCTYPE html>' }}}}\$

As I could found, this error tied with replacing code-server with VS Code CLI

🛠️ To reproduce

See "Additional context"

🌈 Expected behavior

Consistent and clear docs about VS Code Server because now next contradict each other:

VS Code Server - says to install code-server from coder
Tab VS Code in Nuxt devtools - says to install dropped code-server from Microsoft

And in the end nor of these ways working

ℹ️ Additional context

I tried this on:

Ubuntu 24.04
Windows 11 + WSL2 + Docker Container with Nuxt app

To reproduce this, just use Nuxt example project

npx nuxi@latest init

and do steps from 🐛 The bug

hachimetsu commented 1 month ago

remove code-server and install it using `npm i -g code-server' then try it

hachimetsu commented 1 month ago

instead of creating new issue i am putting this here if someone using cloud IDE like Github Codespace or Gitpod and unable to use devtool or want to use code-server

IDK if it's correct method or may be not best

but work for me

// https://nuxt.com/docs/api/configuration/nuxt-config
import * as fs from 'node:fs'

export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true},
  vite: {
    server: {
      https: {
        key: fs.readFileSync('localhost-key.pem'),
        cert: fs.readFileSync('localhost-cert.pem')
      },
      hmr: {
        protocol: 'wss',
      }
    },
  },
})

openssl req -new -x509 -key localhost-key.pem -out localhost-cert.pem -days 365 -subj "/CN=localhost"

openssl genrsa -out localhost-key.pem 2048

$ grep -r 'accept-server-license-terms' node_modules/
node_modules/@nuxt/devtools/dist/chunks/vscode.mjs:      "--accept-server-license-terms",
node_modules/@nuxt/devtools/dist/chunks/vscode.mjs:          "--accept-server-license-terms",
node_modules/@nuxt/devtools/dist/chunks/vscode.mjs:      "--accept-server-license-terms",

Comment out flags which are not working

and replace http://localhost:${port}/ with url generate by online ide like

nuxt / devtools