eclipse-wildwebdeveloper / eclipse-wildwebdeveloper/wildwebdeveloper

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

Open
#239 5 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement
Dominant language
Java
Stars
201
Forks
76
Avg merge
4d 7h
Merged PRs (30d)
21

Description

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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reviewing the generic editor behavior described here and the earlier effort in issue 151. Reproduce the listed JavaScript, JSX, TypeScript, TSX, template-literal, HTML, and CSS cases; done means content assist, syntax highlighting, and automatic HTML closing tags work across the requested file types.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, html, javascript, typescript
Domain
tooling, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.