如何在 Web 应用程序中实现可视化代码智能感知

Question

我做了两个月的反应开发人员。我的目标是建立我自己的网站，比如 GitHub，为此当然我需要某种 IDE，比如VS code我可以上传代码的地方。我最近了解了VS Code Intellisense但没有发现一些有用的内容。我不知道它是如何工作的，但我了解到的是，VS Code跟踪文件中的更改智能代码完成使用自动生成的类、变量名和其他提供计算机代码定义或引用的结构的内存数据库。正如我之前提到的，我想构建自己的 IDE，就像VS Code我最终采用了一种简单的方法，但它效率不高。请看看我的方法，然后建议我更好的方法。

 // 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 }
     </>
  )

我知道有很多事情要做，但这是简单的代码。当然，这会花费太多的性能成本。我如何制作这样的东西并管理性能。

请回答以下问题 ：

• 有没有可以直接使用的插件？

• IDE 的颜色如何工作，他们使用 HTML 和 CSS 改变颜色？

• 我如何为此管理数据库？

Answer 1

尝试从头开始构建您自己的、具有针对多种语言（甚至只是一种语言）的准确智能感知的基于 Web 的 IDE 将是一项真正艰巨的任务 - 这可能需要经验丰富的开发人员团队花费数月或数年的时间。幸运的是，VSCode 背后的编辑器 - Monaco - 是开源的，可以集成到任何基于 Web 的项目中。您可以在这里了解有关摩纳哥的更多信息。有一个 Playground 向您展示了一些配置方法。github 上的自述文件包含有关如何开始将其集成到项目中的说明。