eclipse-wildwebdeveloper / eclipse-wildwebdeveloper/wildwebdeveloper

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

オープン
#239 コメント 5 件 リアクション 1 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

enhancement
主要言語
Java
スター
201
フォーク
76
平均マージ
4日 7時間
マージ済み PR(30日)
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. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

調査の方向性

まず、ここで説明されている汎用エディターの動作と、issue 151で行われた以前の取り組みを確認します。JavaScript、JSX、TypeScript、TSX、テンプレートリテラル、HTML、CSSについて、一覧にあるケースを再現してください。要求されたファイルタイプ全体で、コンテンツアシスト、構文ハイライト、自動HTML終了タグが機能すれば完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
css, html, javascript, typescript
領域
tooling, web-dev
issue の種類
機能追加
難易度
5/5
見積もり時間
1週間以上
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
25/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。