language server support in the browser.

[abose]

Language server support is essential for the future of phcode.dev. Language servers brings in code auto completion and advanced code assistance features inside phoenix. Almost all implementations currently in existence require node and the few that work in the browser(ts language server) run only in vscode.dev.

We should find a way to browserify popular language servers in pure browser-based environments. This will help web-based code editors like us and others to provide advanced IDE-like features in the browser.

Language server in Browser and mobile devices

While this is fairly possible if we have a node engine(Eg. in native windows/mac/Linux) builds, We will hit a roadblock if we have to deploy a code editor in the browser or mobile devices like android or ios.

The best case is to be able to run language servers in the browser. As browser environments are readily available in mobile platforms as well as desktops/servers, this will help develop a universal language server component that can work in any device with a browser environment.

Feature requirements Phase 1

Phoenix should support the following language servers out of the box as a pure browser client:

• Generic infrastructure to run language servers in browser and language server client for phcode.dev
• Should work in mobile/desktop browsers and web views.
• Language intelligence should be in the web worker when possible.
• Account for Remote language server support for remote/cloud projects.
• Typescript/Javascript language server integration based on our in-browser LSP infra. Javascript code intelligence in phoenix is best to be deprecated in favor of an LSP-based implementation.

Feature requirements Phase 2

• Angular Language Service
• React language server. This appears to come free with Typescript language server. Phoenix currently has limited support for react language intelligence with our own implementation using ternjs.
• Extensibility API for third party language servers integration
• vue/vite/other frameworks that are in demand by our users.

Related issues:

1. Language Servers #587
2. [Feature Request] Vue Language Support #682
3. Feature request: Default type script suppot #166
4. Php tooling extension removed #8
5. Embedded languages in tagged templates #762

[charlypa]

Pheonix does not uses the VScode language server protocol for code completion of js. Pheonix has its own internal implementation for code completion, which is written in Javascript. This has nothing to do with visual studio code.

Phoenix has a language client adapter implemented earlier with node, but this is only implemented for PHP currently.

Please refer to the below codes for reference
https://github.com/aicore/phoenix/blob/main/src/languageTools/LanguageClient/ServerUtils.js#L268-L322

https://github.com/aicore/phoenix/blob/main/src/languageTools/LanguageClient/ServerUtils.js#L324-L368

[abose]

This issue was earlier closed as Phoenix implemented its own language intelligence implementation for js/html based on tern-js.
Re-opened as the root LSP feature support is still missing and requires active development.

[charlypa]

LSP Configurations

vscode-html-language-server

{
  "jsonrpc": "2.0",
  "id": 1,
  "result": {
    "capabilities": {
      "textDocumentSync": 2,
      "hoverProvider": true,
      "documentHighlightProvider": true,
      "documentRangeFormattingProvider": false,
      "documentFormattingProvider": false,
      "documentLinkProvider": {
        "resolveProvider": false
      },
      "documentSymbolProvider": true,
      "definitionProvider": true,
      "signatureHelpProvider": {
        "triggerCharacters": [
          "("
        ]
      },
      "referencesProvider": true,
      "colorProvider": {},
      "foldingRangeProvider": true,
      "selectionRangeProvider": true,
      "renameProvider": true,
      "linkedEditingRangeProvider": true,
      "diagnosticProvider": {
        "documentSelector": null,
        "interFileDependencies": false,
        "workspaceDiagnostics": false
      }
    }
  }
}

vscode-markdown-language-server

{
  "jsonrpc": "2.0",
  "id": 1,
  "result": {
    "capabilities": {
      "diagnosticProvider": {
        "documentSelector": null,
        "identifier": "markdown",
        "interFileDependencies": true,
        "workspaceDiagnostics": false
      },
      "codeActionProvider": {
        "resolveProvider": true,
        "codeActionKinds": [
          "source.organizeLinkDefinitions",
          "quickfix",
          "refactor"
        ]
      },
      "definitionProvider": true,
      "documentLinkProvider": {
        "resolveProvider": true
      },
      "documentSymbolProvider": true,
      "foldingRangeProvider": true,
      "referencesProvider": true,
      "renameProvider": {
        "prepareProvider": true
      },
      "selectionRangeProvider": true,
      "workspaceSymbolProvider": true,
      "workspace": {
        "workspaceFolders": {
          "supported": true,
          "changeNotifications": true
        }
      },
      "textDocumentSync": 2
    }
  }
}

vscode-eslint-language-server

{
  "jsonrpc": "2.0",
  "id": 1,
  "result": {
    "capabilities": {
      "textDocumentSync": {
        "openClose": true,
        "change": 2,
        "willSaveWaitUntil": false,
        "save": {
          "includeText": false
        }
      },
      "workspace": {
        "workspaceFolders": {
          "supported": true
        }
      },
      "executeCommandProvider": {
        "commands": [
          "eslint.applySingleFix",
          "eslint.applySuggestion",
          "eslint.applySameFixes",
          "eslint.applyAllFixes",
          "eslint.applyDisableLine",
          "eslint.applyDisableFile",
          "eslint.openRuleDoc"
        ]
      }
    }
  }
}

vscode-css-language-server

{
  "jsonrpc": "2.0",
  "id": 1,
  "result": {
    "capabilities": {
      "textDocumentSync": 2,
      "hoverProvider": true,
      "documentSymbolProvider": true,
      "referencesProvider": true,
      "definitionProvider": true,
      "documentHighlightProvider": true,
      "documentLinkProvider": {
        "resolveProvider": false
      },
      "codeActionProvider": true,
      "renameProvider": true,
      "colorProvider": {},
      "foldingRangeProvider": true,
      "selectionRangeProvider": true,
      "diagnosticProvider": {
        "documentSelector": null,
        "interFileDependencies": false,
        "workspaceDiagnostics": false
      },
      "documentRangeFormattingProvider": false,
      "documentFormattingProvider": false
    }
  }
}

vscode-json-language-server

{
  "jsonrpc": "2.0",
  "id": 1,
  "result": {
    "capabilities": {
      "textDocumentSync": 2,
      "hoverProvider": true,
      "documentSymbolProvider": true,
      "documentRangeFormattingProvider": false,
      "documentFormattingProvider": false,
      "colorProvider": {},
      "foldingRangeProvider": true,
      "selectionRangeProvider": true,
      "documentLinkProvider": {},
      "diagnosticProvider": {
        "documentSelector": null,
        "interFileDependencies": false,
        "workspaceDiagnostics": false
      },
      "codeActionProvider": true
    }
  }
}

[charlypa]

To install lsp use following command

npm install -g vscode-langservers-extracted