2

Looking into using VS Code over PHP Storm and there's one major feature I haven't been able to replicate. Not sure if the community knows of any available plugins or a native way to enable this.

I'm hoping this is the best place to ask, since the VS Code doesn't really have a community section besides recommending asking questions on here.

In PHPStorm when you have your cursor on a closing tag it'll have a little floating line showing you where the opening tag is. Great for knowing exactly what closing tag you're viewing, and it's attributes.

Can see on line 23 despite it being off the screen

Also, when you're in a tag you can see this down at the bottom, basically the entire tree of where you are.

Can see exactly the nesting structure of the current element

These are the last few major PHP Storm features I don't think I could live without. If anyone knows of a way to replicate either of them I'd be very grateful.

Thanks!

Community
  • 1
  • 1
Octoxan
  • 1,949
  • 2
  • 17
  • 34

2 Answers2

2

The HTML End Tag Labels extension could help you. It shows the id or class, depending on what is given after the closing tag.

End Tag Labels on VSCode Marketplace

Andris Jefimovs
  • 689
  • 6
  • 17
1

[I tested this in an html and js file but not a php file.]

// Controls whether the editor should highlight the active indent guide

   "editor.highlightActiveIndentGuide": true,

// Controls whether the editor should render indent guides

  "editor.renderIndentGuides": true,

These are the defaults and then I suggest the following colorCustomizations:

"editorIndentGuide.activeBackground": "#fff8",
"editorIndentGuide.background": "#fff0",

The second one above makes all the inactive guides transparent and the first makes the active guide middle grayish.

To highlight the matching tags, see match tag extension

With that extension, try this setting:

"highlight-matching-tag.style": {
    "borderWidth": "2px",
    "borderStyle": "solid",
    "borderColor": "red",
    "borderRadius": "5px"
  },

active indent guides and tag highlighting

You will need to reload vscode when you make changes to this extension's settings for them to take effect.

Mark
  • 143,421
  • 24
  • 428
  • 436
  • Ah thanks but I'm looking at highlighting and showing the matching tag even if the matching tags current line is off the screen, like how intelliJ and Atom do. – Octoxan Jul 26 '18 at 21:13
  • Perhaps there is an extension for that, I don't know. The above might be as close as you can get. There is also jumping to the other tag, see https://stackoverflow.com/questions/42996522/jump-to-closing-tag-in-vs-code, but that doesn't sound like you want either. – Mark Jul 26 '18 at 21:54