Visual Studio Code as a Joomla Code Editor
User Snippets
Microsoft Visual Studio Code has a build in Snippet Code System with great functionality per file type.
From File > Preferences > User Snippets you can choose for which file format you will write a code snippet. In our case we will select php because we are working with Joomla.
A php.json file will open. You can place your snippets for PHP here. Each snippet is defined under a snippet name and has a prefix, body and description. The prefix is the command to trigger the snippet and the body will be expanded and inserted in the place you typed the command. In case you want to use some variables for the expanded snippet you can create as many you want. By using variable with the names $1, $2, $3 etc, on the expanded snippet those will be used as a simple tab stop to write your string.
For example lets see a very simple code snippet that it expands a JText in our project.
"Expand a JText": {
"prefix": "JText",
"body": ["<?php echo JText::_('$1'); ?>"],
"description": "Text String"
}
In your php.json file, copy paste the above code, then, open a php file and try to type JText.
By typing the first 2 letters, you will be prompted to use the JText code snippet you just created! By selecting the code snippet it will get expanded and the cursor will stop in your $1 variable so you can enter your desired value.
Of course snippet variables are not just for tab stopping. Instead of $1 etc you may use a more advanced variable system: ${id} ${id:label} ${1:label}.
Example of a code snippet with advanced variable method
"Make a Bootstrap Row with 2 columns": {
"prefix": "row-fluid",
"body": [
"<div class='row-fluid'>",
"<div class='span${1:type the size}'></div>'",
"<div class='span${1:type the size}'></div>'",
"</div>"
],
"description": "Boostrap row-fluid with 2 columns"
}
The above snippet creates a row-fluid with 2 divs. On expand, the cursors stops on after the "span" class where you can type your desired number to give a size to this div. Whatever you type, it will be reproduced in the second div too!
The possibilities are endless. To give you a push, below you will find a lot of Code snippets that you can use to make your Joomla coding faster.
Template required variables that are needed in a template.
"Template required variable header": {
"prefix": "TemplateHeaders",
"body": [
"defined('_JEXEC') or die;",
"$app = JFactory::getApplication();",
"$doc = JFactory::getDocument();",
"$user = JFactory::getUser();",
"$this->language = $doc->language;",
"$this->direction = $doc->direction;"
],
"description": "Creates all the necessary variables for a template"
}
Add Script in a template - module - plugin etc
"Add a Script": {
"prefix": "addScript",
"body": [
"$doc->addScriptVersion($this->baseurl . '/templates/${1:Your Template Name}/${2:Your script address}');"
],
"description": "Adds a script in the head of your page"
}Add CSS in a template - module - plugin etc
"Add a CSS": {
"prefix": "addCSS",
"body": [
"$doc->addStyleSheetVersion($this->baseurl . '/templates/${1:Your Template Name}/${2:Your css address}');"
],
"description": "Adds a CSS in the head of your page"
}
Add Necessary Heading in a template
{
"add jHead": {
"prefix": "jdocHead",
"body": [
"<jdoc:include type='head' />"
],
"description": "Adds Head jdoc for Joomla"
}
}Add a module position
"Add a Module Position": {
"prefix": "addModule",
"body": [
"<jdoc:include type='modules' name='${modname:Type the module position}' style='${modstyle:Type the module style}' />"
]
}[alert-info]all your snippets must be wrapped together in { } in your php.json file. Also at the end of each snippet, you must add a comma (,) to separate each of them (except for the last). [/alert-info]
Emmet Developer Toolkit Build in support
Another great addition in Visual Studio Code is that it fully supports emmet developer toolkit. Emmet takes the snippets idea to a whole new level: you can type CSS-like expressions that can be dynamically parsed, and produce output depending on what you type in the abbreviation. Emmet is developed and optimised for web-developers whose workflow depends on HTML/XML and CSS, but can be used with programming languages too.
Example
Open a HTML file with Visual Studio Code and type
table#mytable.table>tr*4>td*3What we just typed is a new table with id myTable and class table that has 4 table rows with 3 td on each row.
Just press tab and see the above code expanded! Pure magic right?
<table id="myTable" class="table">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>Another example is a page structure with list and values
#page>div.logo+ul#navigation>li*5>a{Item $}pressing tab will give you this:
<div id="page">
<div class="logo"></div>
<ul id="navigation">
<li><a href="/">Item 1</a></li>
<li><a href="/">Item 2</a></li>
<li><a href="/">Item 3</a></li>
<li><a href="/">Item 4</a></li>
<li><a href="/">Item 5</a></li>
</ul>
</div>a full list of emmet abbreviations syntax can be found on the official emmet website.
PHP Debug
Visual Studio Code has PHP Debug Extension that you can just install and start "playing" with your Joomla Project.
The installation tutorial can be found here
LESS Support
Visual Studio Code has an extension to compile LESS files to CSS. Easy LESS is a great tool that you can use to start building a template with LESS.
Joomla has all the necessary bootstrap files in LESS format in media\jui\less. So you can start linking those files to your template and start building your project with all the benefits that LESS offers.
Hope you liked this tutorial and tell us your opinion about what you liked and what not in this editor.
