Note:

If you want to create a new page for developers, you should create it on the Moodle Developer Resource site.

Setting up VSCode: Difference between revisions

From MoodleDocs
(remove phpfmt (incompatible with standards), remove phpcs (php sniffer does its job + formatting), add debugging+intellisense, reorganize sections, update titles.)
Line 1: Line 1:
https://en.wikipedia.org/wiki/Visual_Studio_Code
[https://en.wikipedia.org/wiki/Visual_Studio_Code VSCode] is a an Integrated Development Environment from Microsoft available under the MIT License.
 
VSCode is a an Integrated Development Environment from Microsoft available under the MIT License.
It works on Linux/Windows/OSX. It has a large number of plugins available, most entirely free/libre. It has good support
It works on Linux/Windows/OSX. It has a large number of plugins available, most entirely free/libre. It has good support
for Xdebug.
for Xdebug.


== PHP Linting ==
== Debugging ==
https://docs.moodle.org/dev/Linting#Visual_Studio_Code
[https://marketplace.visualstudio.com/items?itemName=felixfbecker.php-debug PHP Debug] adds debugging capability for PHP files, which is essential. Follow the extension's installation instructions.
 
== Moodle specific Snippets and autocomplete (plugin) ==
https://marketplace.visualstudio.com/items?itemName=MateuszLesiak.vscode-moodle-snippets
 
Offers some useful Moodle specific code completion popups.
 
== Code Formatting (indentation) ==
https://marketplace.visualstudio.com/items?itemName=kokororin.vscode-phpfmt
 
== Show coding standards issues (plugin) ==
If you have Code Sniffer set up
https://github.com/squizlabs/PHP_CodeSniffer/blob/master/src/Sniffs/Sniff.php
(or https://github.com/moodlehq/moodle-local_codechecker)
 
For this to work your instance of phpcs needs to have the moodle coding standards installed.  


This link may help
== Intellisense ==
[https://marketplace.visualstudio.com/items?itemName=bmewburn.vscode-intelephense-client PHP Intelephense] is the standard php plugin for [https://code.visualstudio.com/docs/editor/intellisense intellisense] features.


https://askubuntu.com/questions/572956/adding-a-standard-to-php-codesniffer
== Linting ==
[https://en.wikipedia.org/wiki/Lint_(software) Linting] plugins will show wavy red lines under code that does not conform: [[File:phpcs_sniff.png]]
The linters used for development are:
* [https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint stylelint] for CSS
* [https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint ESLint] for JS
* [https://marketplace.visualstudio.com/items?itemName=wongjn.php-sniffer PHP Sniffer] for PHP. It requires [https://github.com/squizlabs/PHP_CodeSniffer phpcs v2.* (package)] installed and configured to use moodle's standards.
To do so, run the following in your terminal from your moodle folder:
<code>
<code>
composer global require "squizlabs/php_codesniffer=2.*"
composer global require "squizlabs/php_codesniffer=2.*"
composer global install
composer require --dev "blackboard-open-source/moodle-coding-standard" # installs moodle's coding standard
composer require --dev "blackboard-open-source/moodle-coding-standard"
phpcs  --config-set  installed_paths vendor/blackboard-open-source/moodle-coding-standard # adds moodle's standard to phpcs
phpcs  --config-set  installed_paths vendor/blackboard-open-source/moodle-coding-standard
phpcs -i # checks which standards are available to phpcs
phpcs --config-set default_standard moodle # sets moodle as the default standard for phpcs
</code>
</code>
 
If it is installed moodle will show up in the output of `phpcs -i`, here is a typcial example, note moodle is listed as the last but one item.
You can check if it is installed from the command line with
<code php>
phpcs -i
</code>
 
If it is installed moodle will show up in the output, here is a typcial example, note moodle is listed as the last but one item.
<code php>
<code php>
The installed coding standards are PEAR, PHPCS, Zend, PSR2, MySource, Squiz, PSR1, moodle and PHPCompatibility
The installed coding standards are PEAR, PHPCS, Zend, PSR2, MySource, Squiz, PSR1, moodle and PHPCompatibility
</code>
</code>


This plugin will show a wavy red line under code that does not conform.
== Code Formatting ==
 
If you have [https://marketplace.visualstudio.com/items?itemName=wongjn.php-sniffer PHP Sniffer] installed, configure it to be the default formatter:
https://marketplace.visualstudio.com/items?itemName=wongjn.php-sniffer


Configure it to be the default formatter in settings like this
<code>
<code>
// add this [php] key/value pair in vscode's user settings (settings.json):
{
{
  // ...
   "[php]": {
   "[php]": {
     "editor.defaultFormatter": "wongjn.php-sniffer"
     "editor.defaultFormatter": "wongjn.php-sniffer"
Line 56: Line 41:
</code>
</code>


This may be a good alternative
== Automated testing ==
 
[https://marketplace.visualstudio.com/items?itemName=danilopolani.yet-another-phpunit Yet Another PHPUnit] lets you run automated tests from within vscode.
https://marketplace.visualstudio.com/items?itemName=ikappas.phpcs
 
 
[[File:phpcs_sniff.png]]
 
== Run phpunit tests from within IDE (plugin) ==
https://marketplace.visualstudio.com/items?itemName=danilopolani.yet-another-phpunit


A file of unit tests or individual test can be run from within the IDE
== Docblocks ==
[https://marketplace.visualstudio.com/items?itemName=neilbrayfield.php-docblocker PHP DocBlocker] to create a docblock by typing /** at the top of a function and it grabs the parameters, including types if given and creates a PHPDoc block.


== Generate PHP Doc blocks ==
== Moodle specific Snippets and autocomplete ==
Type /** at the top of the function and it grabs the parameters, including types if given and creates a PHPDoc block
[https://marketplace.visualstudio.com/items?itemName=MateuszLesiak.vscode-moodle-snippets Moodle - Snippets & Autocomplete] offers some useful Moodle specific code completion popups.


https://marketplace.visualstudio.com/items?itemName=neilbrayfield.php-docblocker
== Auto trim trailing white space ==  
== Auto trim trailing white space ==  
To ensure trailing white space is trimmed do the following  
To ensure trailing white space is trimmed do the following  
Line 78: Line 56:
Click the {} icon in the top-right part of the window. This will open a document.
Click the {} icon in the top-right part of the window. This will open a document.


Add a new "files.trimTrailingWhitespace": true setting to the User Settings document if it's not already there.  
Add a new <code>"files.trimTrailingWhitespace": true</code> setting to the User Settings document if it's not already there.  
This is so you aren't editing the Default Setting directly, but instead adding to it.
This is so you aren't editing the Default Setting directly, but instead adding to it.


Save the User Settings file.
Save the User Settings file.

Revision as of 21:35, 6 November 2020

VSCode is a an Integrated Development Environment from Microsoft available under the MIT License. It works on Linux/Windows/OSX. It has a large number of plugins available, most entirely free/libre. It has good support for Xdebug.

Debugging

PHP Debug adds debugging capability for PHP files, which is essential. Follow the extension's installation instructions.

Intellisense

PHP Intelephense is the standard php plugin for intellisense features.

Linting

Linting plugins will show wavy red lines under code that does not conform: phpcs sniff.png The linters used for development are:

To do so, run the following in your terminal from your moodle folder: composer global require "squizlabs/php_codesniffer=2.*" composer require --dev "blackboard-open-source/moodle-coding-standard" # installs moodle's coding standard phpcs --config-set installed_paths vendor/blackboard-open-source/moodle-coding-standard # adds moodle's standard to phpcs phpcs -i # checks which standards are available to phpcs phpcs --config-set default_standard moodle # sets moodle as the default standard for phpcs If it is installed moodle will show up in the output of `phpcs -i`, here is a typcial example, note moodle is listed as the last but one item. The installed coding standards are PEAR, PHPCS, Zend, PSR2, MySource, Squiz, PSR1, moodle and PHPCompatibility

Code Formatting

If you have PHP Sniffer installed, configure it to be the default formatter:

// add this [php] key/value pair in vscode's user settings (settings.json): { 

 // ...
 "[php]": {
   "editor.defaultFormatter": "wongjn.php-sniffer"
 }

}

Automated testing

Yet Another PHPUnit lets you run automated tests from within vscode.

Docblocks

PHP DocBlocker to create a docblock by typing /** at the top of a function and it grabs the parameters, including types if given and creates a PHPDoc block.

Moodle specific Snippets and autocomplete

Moodle - Snippets & Autocomplete offers some useful Moodle specific code completion popups.

Auto trim trailing white space

To ensure trailing white space is trimmed do the following

Open VS User Settings (Preferences > Settings > User Settings tab). Click the {} icon in the top-right part of the window. This will open a document.

Add a new "files.trimTrailingWhitespace": true setting to the User Settings document if it's not already there. This is so you aren't editing the Default Setting directly, but instead adding to it.

Save the User Settings file.

Retrieved from "https://docs.moodle.org/dev/index.php?title=Setting_up_VSCode&oldid=58007"
Powered by MediaWiki