MODX IntelliSense

Intelligent MODX, pdoTools and fenom tooling for VS Code.

Installation

Plugin installation is performed in several stages:

• Press F1 and select Extensions: Install Extensions.
• Search and choose vscode-modx.

Or install via the Visual Studio Code Marketplace.

Features

MODX Syntax Highlighting

MODX Autocomplete: Default Resource Content Field Tags

MODX Autocomplete: System settings

MODX Autocomplete: Output filters/modifiers

MODX Autocomplete: Snippets and props

Note, autocomplete works with a list of predefined snippets:

• pdoTools snippets
• miniShop2 snippets
• FetchIt
• FormIt snippets

MODX Autocomplete: @FILE binding paths

Fenom Syntax Highlighting

Fenom Autocomplete: Tags

Fenom Autocomplete: Modifiers

• Built In modifiers
• pdoTools modifiers

Fenom Autocomplete: Variables

• Fenom system variables
• pdoTools microMODX class
• Local variables

Fenom Autocomplete: Snippets and props

Note, autocomplete works with a list of predefined snippets:

• pdoTools snippets
• miniShop2 snippets
• FetchIt
• FormIt snippets

Fenom Autocomplete: @FILE binding paths

Recommended VS Code Settings

files.associations

Use the files.associations setting to tell VS Code to always open .tpl files in MODX or Fenom mode:

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

Troubleshooting

Problem: Emmet expand abbreviation doesn't work

Check the VSCode settings, note the emmet.includeLanguages, you need to add the following value:

{
  "emmet.includeLanguages": {
    // ...
    "modx": "html",
    "fenom": "html"
  }
}

Problem: TailwindCSS intellisense doesn't work

Add to your user/project/folder settings following value and make sure the editor.quickSuggestions.strings setting is enabled:

{
  "tailwindCSS.includeLanguages": {
    // ...
    "modx": "html",
    "fenom": "html"
  },
  "editor.quickSuggestions": {
    // ...
    "strings": true
  }
}