MODX extension for VSC Intellisense

General
1

Does anyone know of any plugins or extensions for Visual Studio Code that prevent MODX tags being marked as errors?

Whenever I am working on templates, chunks, snippets to be used in MODX, I get frequent errors when I use modx tags - [[*xyz]] inside html, php or css. As an example <div id="[[*id]]"> or #prod[[+id]] { background-image: url("img/[[+prodImg]]"); } will generate error messages.

Unfortunately these non-errors clutter up the error panel, making the real errors more difficult to spot quickly.

2

That probably isn’t actually part of Intellisense, which tends to be for code completion, code declarations/navigation etc.

What file extension are you using for your MODX components? If I use .html for templates and chunks, .php for snippets, I don’t get any errors reported. The [[...]] tags shouldn’t throw errors when used as per your examples.

3

I am not that well versed on how VCS works, so had guessed that since Intellisense suggested code that it was also the one that marked errors.

The biggest source of errors is CSS within HTML templates, such as my example where div ids are assigned as a TV. CSS doesn’t like brackets I guess.

I ran across one extension for “modx”, but it didn’t do anything at all.

Maybe some day VCS will enable a way to mark errors as ignore, so it can learn. :wink:

4

Yep, a single square bracket means something in CSS, and a second bracket is what’s causing the syntax error to be triggered.

In your particular example, my preference is to inline the element-specific CSS for the element, rather than create what is a dynamic rule in your block, e.g.:

    <article class="news-article" style="background-image:url([[+prodImg]])">
        [[*content]]
    </article>

And include the generic styling for .news-article in your site CSS, e.g.

.news-article {
  background-repeat: no-repeat;
  background-position: top left;
}

This shouldn’t throw any syntax errors.

5

Thanks. That would work for one of our websites, it would add more code, but that wouldn’t be a deal breaker. However it wouldn’t work for another of our websites, for various reasons.

That is why I was hoping there might be a way to teach VCS to accept MODX markup. Or a way to tell it to ignore errors such as those. Would rather fix the tool instead of redesigning the house. :sunglasses:

6

Quick Google pointed me to this:

7

Yes I saw that one, tried it, but it didn’t do much.

8

For anyone finding this post, take a look at IntelliSense for MODX from the Visual Studio Marketplace.

It includes syntax highlighting and auto complete eg. for Output Modifiers.

You need to update the files.associations json sothat VSCode knows to use the extension.

"files.associations": {
    "*.tpl": "modx", //  or "fenom"
    "*.html": "html"
}
1 Like