🚀 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!
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"
}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.
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.
This extension contributes the following variables to the settings:
-
ee.userPath: the path to your sites user directory. Defaults tosystem/user/. -
ee.suggestCompletions: enable/disable IntelliSense/auto-completion. Is enabled by default.
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
},- 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
View the full wiki to learn about all the available options.
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!
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!
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.