eclipse-wildwebdeveloper / eclipse-wildwebdeveloper/wildwebdeveloper

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

Abierto
#239 5 comentarios 1 reacción 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

enhancement
Lenguaje dominante
Java
Estrellas
201
Forks
76
Merge medio
4 d 7 h
PR fusionados (30 d)
21

Descripción

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.

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Línea de trabajo

Empieza revisando el comportamiento genérico del editor descrito aquí y el trabajo anterior en issue 151. Reproduce los casos indicados de JavaScript, JSX, TypeScript, TSX, template-literal, HTML y CSS; se considera terminado cuando la asistencia de contenido, el resaltado de sintaxis y el cierre automático de etiquetas HTML funcionan en los tipos de archivo solicitados.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
css, html, javascript, typescript
Área
tooling, web-dev
Tipo de issue
Nueva funcionalidad
Dificultad
5/5
Tiempo estimado
Más de una semana
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
25/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.