eclipse-wildwebdeveloper / eclipse-wildwebdeveloper/wildwebdeveloper

Offer completion and syntax highlighting for inlined CSS & HTML in JS/TS/JSX/TSX

未关闭
#239 5 条评论 1 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

enhancement
主要语言
Java
星标
201
派生
76
平均合并
4 天 7 小时
30 天内合并 PR
21

描述

The wwd uses a generic editor to open html, css, js, jsx, ts, tsx, etc.

Would be nice to support all these languages (code completion and syntax highlighting) within this generic editor. It should not matter, which language is within which filetype. For example, if wwd detects css or html within js/jsx/ts/tsx files, then it should provide code completion and syntax highlighting. As css and html can be added within js/jsx/ts/tsx files (for example, by template literals), the generic editor should be a hybrid editor.

Please improve at least these cases:

  • There is actually no content assist and code highlighting of html and css placed within a template literal in a .js-file. Please provide support.

  • There is actually content assist and syntax highlighting of html in jsx, but typing, for example, a <div>- tag does not automatically produce its closing tag. So I have to add it manually.

  • Using html and css within template literal should provide content assist and code completion within this generic editor for ALL file types.

For example:

// defined within js file (html and css within template literal -> no code completion/no syntax highlighting)
const component = {
            label: `<span style="color: red">hello</span>`,
            input:`<input name="hi" type="checkbox" ${conf.enabled ? 'checked' : ''} ${!conf.disabled ? 'disabled' : ''}>`,
            isCheckbox: true
    }

There were efforts in the past in this direction https://github.com/eclipse/wildwebdeveloper/issues/151. But the css, html support (=code completion and syntax highlighting) in template literal and within js, jsx, ts, tsx is not sufficient.

贡献指南

打开贡献指南

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

调研方向

首先查看此处描述的通用编辑器行为,以及 issue 151 中之前的工作。复现列出的 JavaScript、JSX、TypeScript、TSX、模板字面量、HTML 和 CSS 场景;当内容辅助、语法高亮和 HTML 标签自动闭合在所请求的文件类型中正常工作时,即表示完成。

由索引模型根据 Issue 内容生成。

评估

技术栈
css, html, javascript, typescript
领域
tooling, web-dev
Issue 类型
功能
难度
5/5
预计耗时
一周以上
活跃度
停滞
描述清晰度
基本清楚
新手友好度
25/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。