search

microsoft / monaco-editor

A browser based code editor
https://microsoft.github.io/monaco-editor/
MIT License
40.04k stars 3.57k forks source link

Support JavaScript intellisense inside HTML #732

Open lifubang opened 6 years ago

lifubang commented 6 years ago

Sorry, I can't open a question in stackoverflow.com because it has a js error.

Help:

  1. When I set the editor's lang to html, the javascript IntelliSense is not available. How to use both html and javascript IntelliSense in one editor.

  2. When I use import in es6, how to use js IntelliSense from module in another file?

    import {List} from "./List"
List.of
// there is no js IntelliSense

    List.js

    export class List {
constructor(head, tail) {
this.head = head
this.tail = tail
}

static of(...elements) {
let result = null
for (let i = elements.length - 1; i >= 0; i--)
  result = new List(elements[i], result)
return result
}

map(f) {
return new List(f(this.head), this.tail && this.tail.map(f))
}

*[Symbol.iterator]() {
for (let pos = this; pos; pos = pos.tail)
  yield pos.head
}
}
asialgearoid commented 6 years ago

JS and CSS autocompletion within HTML files is something that would be very useful for me too. It looks like this feature exists on a branch of monaco-html (https://github.com/Microsoft/monaco-html/tree/rebornix/EmbeddedLanguage). It's not clear what happened to this.

@rebornix Do you have any idea if your work is likely to end up being merged?

LucaGabi commented 6 years ago

It dose not work. Maybe an example will help..

Error: "Loading "vscode-languageserver-types" failed"

rcjsuen commented 6 years ago

Error: "Loading "vscode-languageserver-types" failed"

@LucaGabi Your error does not make sense in the context of Monaco. Monaco has no dependencies on vscode-languageserver-types. Please clarify what you are doing or trying to do.

LucaGabi commented 6 years ago

asialgearoid said there is another branch that has support for css and js in html files and when I tried to test it compiles but when opening test/index.html I get that error. I think the one who tried was unsuccessful as well maybe ?

rebornix commented 6 years ago

My branch of embed language was just a prototype as without the concept of workspace, the intellisense/autocomplete is not ideal. One good example is if we import a module in <script> tag and we need some way to load the content of that module to typescript language server.

As browsers are adopting ESM gradually, I think we can revisit this feature when EMS is somewhat mature (especially lazy loading, otherwise developers still use bundlers). Then when we have a esm module in script tag, it imports some module and we can leverage the browser api to load the content and feed it to TS LSP and provide proper language features.

LucaGabi commented 6 years ago

Did it work at any moment ? Sure it would be good to have workspaces but it is sometime also useful even without (the same idea is also true for the editor itself).

I get errors when I try to build (and there is nothing in release/dev also)

Thank anyway.

LucaGabi commented 6 years ago

It worked in the end .. It is useful even with no workspace (for css at least).

williamleiby commented 4 years ago

@alexdima @rebornix

Have there been any developments regarding the implementation of this feature? Intellisense for JavaScript files is not working inside of <script></script> tags within HTML documents (i.e. - not treating the <script></script> tags as a JS file). Is there a workaround that anyone has found?

I have tried going about it in a few different ways but haven't had success. Here are my attempts:

First Way

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- no need to directly reference index.js, but included it anyway to show it doesn't work with or without reference to it  -->
  <script src="./intellisense/index.js" type="module"></script>
  <title>Document</title>
</head>

<script >
  // this is where I am expecting intellisense to show up from the referenced file above
  someObj.someProperty
</script>

<body>

</body>

</html>

Second Way

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<script>
  // don't need to reference index.js in filepath from imports with JS (have tried it both with and without; neither work)
  import { someObj } from './intellisense/index.js';
  // this is where I am expecting intellisense to show up from the imported file above
  someObj.someProperty
</script>

<body>

</body>

</html>

Neither way seems to be working.

Thoughts?

I have also posted a parallel issue on microsoft/vs-code: https://github.com/microsoft/vscode/issues/26338

@shuaihuGao claims to have fixed it within vscode, but it is still not available within Monaco directly.

aloksharma1 commented 4 years ago

@williamleiby i am having same issue on ver 0.20 and even tag have intellisense issue.. did you find any solution to it?

bworwa commented 3 years ago

I would consider HTML JS & CSS autocompletion to be document agnostic and just give base autocompletion features of the embedded language. No need to track variables and references along 10 script blocks on the same HTML document, just autocompletion on globals and common structs.

huanent commented 2 years ago

@alexdima @rebornix

Have there been any developments regarding the implementation of this feature? Intellisense for JavaScript files is not working inside of <script></script> tags within HTML documents (i.e. - not treating the <script></script> tags as a JS file). Is there a workaround that anyone has found?

I have tried going about it in a few different ways but haven't had success. Here are my attempts:

First Way

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- no need to directly reference index.js, but included it anyway to show it doesn't work with or without reference to it  -->
  <script src="./intellisense/index.js" type="module"></script>
  <title>Document</title>
</head>

<script >
  // this is where I am expecting intellisense to show up from the referenced file above
  someObj.someProperty
</script>

<body>

</body>

</html>

Second Way

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<script>
  // don't need to reference index.js in filepath from imports with JS (have tried it both with and without; neither work)
  import { someObj } from './intellisense/index.js';
  // this is where I am expecting intellisense to show up from the imported file above
  someObj.someProperty
</script>

<body>

</body>

</html>

Neither way seems to be working.

Thoughts?

I have also posted a parallel issue on microsoft/vs-code: microsoft/vscode#26338

@shuaihuGao claims to have fixed it within vscode, but it is still not available within Monaco directly.

You can try Monaco-editor-ex ,I build up this for my work.

ibrahim-netto commented 1 year ago

Any update on this feature?