vsc-expressionengine

🚀 The ultimate ExpressionEngine CMS extension for Visual Studio Code
with scaffolding commands to generate add-ons and template files, syntax highlighting, snippets and IntelliSense.

✨ Now with updated EE6 support!

Generate Add-ons

IntelliSense and Syntax Highlighting

Getting Started

Step 1: Setup your ExpressionEngine paths. By default, this extension assumes the directory to your add-ons and template files will be based on a fresh install of an ExpressionEngine site.

Example: <project-directory>/system/user/**

If you have changed your projects directory structure you have the option to override this within your user settings.json file. Just include the ${workspaceFolder} variable at the beginning of your definition so the project's path you currently have open within the workspace will be dynamically resolved.

  "ee.userPath" : "${workspaceFolder}/renamed-system-folder/user"

The above example would resolve to something like: /Users/your-name/sites/my-site/renamed-system-folder/user

📘 Note: Only one workspace is supported at this time. In order to run commands properly, you will need to open additional sites within separate windows.

Step 2: Make sure to update your user settings.json to include the extensions language identifier for both ExpressionEngine and HTML files so that Emmet can autocomplete properly.

  "emmet.includeLanguages": {
    "ee": "html"
  }

Commands

All commands start within the EE namespace. Visual Studio Code will however correctly pull up the commands even if you type it in lowercase. Also, while the full name of the commands appears long, the editor will match shorter typings like ee addon-on, ee partial etc.

Command	Description
_{EE: Create Add-on Boilerplate}	_{List of options to create an Extension, Module or Plugin.}
_{EE: Create Template}	_{A template type either .html, .css, .js, .feed, or .xml}
_{EE: Create Template Variable}	_{Input requesting a template variable name. Outputs to your _variables directory.}
_{EE: Create Template Partial}	_{Input requesting a template partial name. Outputs to your _partials directory.}

📘 Note: When creating template variables or partials you can omit the .html extension as this will be automatically appended for you. You only need to provide a name that matches the allowed characters.

🔺 Known Limitations: After creating either a template, variable or partial you can still delete it from the sidebar tree in your editor as long as you don't refresh your local site either in the Control Panel or the front-end as this will cause EE to pull the latest files and sync to the database. The best option for deleting or renaming your files is likely best done within the Control Panel.

Customizing Colors

You can customize your active color theme by adding the editor.tokenColorCustomizations property to your settings.json.

"editor.tokenColorCustomizations": {
  "textMateRules": [{
    "scope": "entity.name.tag.ee",
    "settings": {
      "foreground": "#B67FFF"
    }
  }]
}

View the full list of available scope names to override.

Settings

This extension contributes the following variables to the settings:

ee.userPath: the path to your sites user directory. Defaults to system/user/.
ee.suggestCompletions: enable/disable IntelliSense/auto-completion. Is enabled by default.

Snippets

Here is a list of the most useful snippets to help you quickly set up your templates.

Description	Trigger	Completion
Tag Pair	_tp	Generates a tag pair {$1 $2} {/$1}
Conditional If	_if	Generates a condtional tag pair {$if $1} {/if}
Conditional Else If	_elseif	{if:elseif $1}
Conditional Else	_else	{if:else}
Pagination Links	_pl	{paginate}{pagination_links}{/paginate}
Pagination Pair	_pp	Generates a full template of pagination variables. See example.
Embed Variable	_embed	{embed='$1'}
Encode Variable	_encode	{encode="$1" title="$2"}
Redirect Variable	_redirect	{redirect="$1"}
Path Variable	_path	{path='$1'}
Route Variable	_route	{route='$1'}

📘 Note: The $1 symbol denotes where the cursor position will be placed when the snippet is triggered and the next steps as you tab through.

To trigger path and route variables within an anchor tag href string you should add the following to your user settings.json file to allow for IntelliSense in strings. This will provide you with a list of auto-completions.

  "editor.suggest.snippetsPreventQuickSuggestions": false,
  "editor.tabCompletion": "on",
  "editor.quickSuggestions": {
    "comments": false,
    "other": true,
    "strings": true
  },

Development Roadmap

Providing code completion packages that can be additionally installed for all the major third-party add-ons!
Add error diagnostics to help prevent templating code errors or catch bugs
Add Fieldtype to the add-on generator command
Improving embedded ExpressionEngine tag syntax highlighting within HTML markup

Documentation

View the full wiki to learn about all the available options.

Contributors Welcome!

If you find a bug or something that could be improved upon, please let us know or submit a PR. Issues and PRs will be reviewed as soon as they can. Your support is very much appreciated!

Pull Request Guidelines

If you are planning to make significant changes to the code or add a major feature, please check the following first:

Check for duplicate work or issues where people may already be working on the issue/feature in question.
Discussions are encouraged. Work together with others to come up with a solid solution prior to starting on your own implementation.
If a PR seems to be the best option, then please follow the provided pull request template.

We do not want to reject a pull request that had major effort or work involved because the guidelines above were not followed or the wrong approach was made.

Enjoy!

Disclaimer

This is an unofficial Visual Studio Code Extension and is in no way affiliated, sponsored by or approved by Packet Tide, the makers of ExpressionEngine CMS. The ExpressionEngine mark is owned and registered by Packet Tide.

ExpressionEngine

mindpixel-labs