Set up VS Code for PHP Development

This is an old website post.

New post address:
https://www.pisciottablog.com/2018/07/06/set-up-vs-code-for-php-development/
+++ This wordpress.com domain will not be kept up-to-date anymore+
+++ Please, use the new one (pisciottablog.com) ++++++++++++++++++

++++++++++++++++++++++++++++++++++++++++++++++++++++++++

++++++++++++++++++++++++++++++++++++++++++++++++++++++++

++++++++++++++++++++++++++++++++++++++++++++++++++++++++

++++++++++++++++++++++++++++++++++++++++++++++++++++++++

++++++++++++++++++++++++++++++++++++++++++++++++++++++++

++++++++++++++++++++++++++++++++++++++++++++++++++++++++

++++++++++++++++++++++++++++++++++++++++++++++++++++++++

++++++++++++++++++++++++++++++++++++++++++++++++++++++++

 

Download and install Visual Studio Code.

Install the following extensions from the Extentions button

– PHP IntelliSense
– PHP IntelliSense – Crane
– Code Runner
– PHP Debug
– Auto Close Tag
– Beautify: Briefly, it reformats HTML or JavaScript source to improve readability by an human. To use it press F1 > Beautify selection
– Laravel Blade Snippets: allows Emmets Abbreviations (see next section)
– CSS Peek
– jQuery Code Snippets: can be called by typing jq inside a .js file
– Document This: use with Ctrl+Alt+D two times; works just with js
– AutoFileName: it allows you to obtain the list of files given in a folder while typing a relative path from the current file’s folder.

Shortcuts

• Ctrl+^ or click on the corresponding button   : Split the view in tho parts vertically
• Alt+Shift+0 : Switch the split function orientation

Emmets Abbreviations

Here’s an example: this abbreviation

#page>div.logo+ul#navigation>li*5>a{Item $}

…can be transformed into

</pre>
<div id="page" class="logo">
<ul id="navigation">
	<li><a>Item 1</a></li>
	<li><a>Item 2</a></li>
	<li><a>Item 3</a></li>
	<li><a>Item 4</a></li>
	<li><a>Item 5</a></li>
</ul>
</div>
<pre>

Also try by yourself:

html:5

See the cheatsheet for more abbreviations: https://docs.emmet.io/cheat-sheet/