eclipse-wildwebdeveloper / eclipse-wildwebdeveloper/wildwebdeveloper

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

Aperta
#239 5 commenti 1 reazione 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

enhancement
Lingua principale
Java
Stelle
201
Fork
76
Merge medio
4g 7h
PR unite (30g)
21

Descrizione

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.

Guida per i contributori

Apri la guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Direzione di ricerca

Inizia esaminando il comportamento generico dell’editor descritto qui e il lavoro precedente nell’issue 151. Riproduci i casi elencati per JavaScript, JSX, TypeScript, TSX, template literal, HTML e CSS; il lavoro è completo quando l’assistenza ai contenuti, l’evidenziazione della sintassi e la chiusura automatica dei tag HTML funzionano per i tipi di file richiesti.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
css, html, javascript, typescript
Ambito
tooling, web-dev
Tipo di issue
Funzionalità
Difficoltà
5/5
Tempo stimato
Più di una settimana
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
25/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.