how to achive Visual Code intellisense in web application

Question

I'm react developer for 2 months. My aim is to build my own website like GitHub for this of course I need some kind of IDE like VS code where I can upload my code. I recently learned about VS Code Intellisense but I did not find some helpful content. I don't how it works but what I learned is, VS Code keeps track of changes in the file intelligent code completion uses an automatically generated in-memory database of classes, variable names, and other constructs that give computer code defines or references. As I mentioned earlier I want to build my own IDE like VS Code i end up with a simple approach but it's not efficient. Please have a look at my approach and then suggest me better approach.

 // list of some keyword
 const listOfKeyWords = {
    'var' , 'const' , 'let' , 'for' , 'if' , 'else' // ...
 }
 
 const [ code , SetCode ] = useState('') // grabs value from DOM input tag
 const [ filterCodeState , SetFilterCodeState ] = useState('')
 
 // Filter Code
 function FilterCode ( ) {
    let filterCode = ''
    var stack = new Stack

    code.forEach ( (word , idx) => {
       if(word === ' '){
          let str = ''

          while(!stack.empty())
            str.push (stack.top())

          if(listOfKeyWords.indexOf(str) != -1) // string is keyWord add color to it
             filterCode += `<p className = 'text-info'>${str}</p>`
          else filterCode += str
       }

       stack.push(word)
       SetFilterCode(SetFilterCode)
   })
 }

  return ( <>
      { SetFilterCodeState }
     </>
  )

I know there are lots to do but this is simple code. of course, it will take too much performance cost. How I can make something like this and also manage performance.

Please answer the following questions :

• Is there any plug-in I can use directly?

• How color of ide work is they change color using HTML and CSS?

• How I can manage the database for this?

Answer 1

Trying to build your own web-based IDE with accurate intellisense for a variety of languages (or even just one) from scratch would be a truly herculean task - it would probably take a team of experienced developers months or years. Luckily the editor behind VSCode - Monaco - is open-source and could be integrated into any web-based project. You can learn more about Monaco here. There's a playground that shows you some of the ways it can be configured. The README on github has instructions about how to get started integrating it into your project.