Emmet Integration by devvaannsh · Pull Request #2122 · phcode-dev/phoenix

devvaannsh · 2025-02-07T18:53:48Z

This PR adds built-in Emmet support to Phoenix.

Displays code hints when an abbreviation can be expanded. (Code hints felt crucial—without them, most users might not realize that Phoenix supports Emmet by default.) A small "emmet" icon is shown at the bottom-right of the hint to indicate that the hint is coming from Emmet.
Places the cursor at the correct position after expansion, in a manner that users can directly start typing.
Preserves indentation to match the surrounding code.
Users can enable/disable from preferences file.

Untitled.video.-.Made.with.Clipchamp.5.mp4

… hint is coming from emmet

…specified

src/extensionsIntegrated/Emmet/emmet-snippets.js

src/extensionsIntegrated/Emmet/main.js

…ge for that property

Emmet css

src/extensions/default/CSSCodeHints/main.js

src/extensions/default/HTMLCodeHints/main.js

src/nls/root/strings.js

abose · 2025-02-18T03:41:36Z

Awesome! 🎆
The changes are good to go, just check out the comments and make the changes in a separate PR.
Merging.

sonarqubecloud · 2025-02-18T07:07:41Z

Quality Gate failed

Failed conditions
1 Security Hotspot

See analysis details on SonarQube Cloud

devvaannsh · 2025-02-18T08:36:30Z

Closing this as some unexpected merge issues were encountered!

devvaannsh added 12 commits February 6, 2025 23:00

feat: emmet integration

9253416

feat: display hints for emmet abbr that can be expanded

d4d7bda

fix: effective handling of closing braces in emmet abbr

58004f1

chore: also support tag names when in uppercase

046c08c

fix: emmet preferences enable/disable not working

0a68995

feat: display icon at the side of code hints. Helps in identifying if…

17cb388

… hint is coming from emmet

chore: improve readability and add support for php and jsp

63d2662

feat: emmet integration for stylesheets

9f14cb3

chore: add emmet icon at the side of emmet hint

c168331

fix: add highlight to already typed characters for emmet hints

9e7efdc

fix: css hints getting displayed even when the css property is fully …

10eaeb8

…specified

fix: integ tests failing because emmet hints are now given max priority

5375e7c

abose requested changes Feb 14, 2025

View reviewed changes

src/extensionsIntegrated/Emmet/emmet-snippets.js Show resolved Hide resolved

src/extensionsIntegrated/Emmet/main.js Outdated Show resolved Hide resolved

src/extensionsIntegrated/Emmet/main.js Outdated Show resolved Hide resolved

devvaannsh added 14 commits February 14, 2025 14:10

fix: check cursor position instead of line ending for keepHints

3d159b5

refactor: emmet icon is now a clickable link that redirects to MDN pa…

061d0cb

…ge for that property

refactor: moved codehints icon colors to core_ui_variables file

0894786

feat: add allPreferences module and enable Emmet preference

84bcace

chore: add unit-tests for emmet-stylesheets

582dee6

Merge branch 'main' into emmet-css

d3152b3

Merge pull request #2 from devvaannsh/emmet-css

05ddcd7

Emmet css

chore: emmet-markup now use same emmet preference used by emmet-css

5ac6a14

fix: made emmet-html icon look similar to emmet-css

28fd8a9

chore: add sourcing info for markupSnippets

f9c739f

chore: moved emmet to core html codehints file

288f04d

feat: add unit tests for html emmet hints

edbadb2

feat: unit tests for html-emmet

2affd39

feat: unit tests for emmet code hints for css

15b0858