Setting up VSCode - Revision history

Marcusgreen: Pointing to the new documentation link for this topic

2025-01-25T06:09:28Z

Pointing to the new documentation link for this topic

← Older revision		Revision as of 06:09, 25 January 2025
Line 1:		Line 1:
			The new place for documenting this is

			https://moodledev.io/general/development/tools/phpcs#editor-integrations

	[https://en.wikipedia.org/wiki/Visual_Studio_Code VSCode] is a an Integrated Development Environment from Microsoft available under the MIT License.		[https://en.wikipedia.org/wiki/Visual_Studio_Code 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

Marcusgreen: /* Changed heading from Wizards to MDLCode Wizards */

2023-08-31T09:45:43Z

Changed heading from Wizards to MDLCode Wizards

← Older revision		Revision as of 09:45, 31 August 2023
Line 37:		Line 37:
	"phpunit.phpunit": "./vendor/bin/phpunit",		"phpunit.phpunit": "./vendor/bin/phpunit",
	</syntaxhighlight>		</syntaxhighlight>
	==Wizards==		==MDLCode Wizards==
	The MDLCode plugin is specifically for Moodle development and includes a suite of wizards to ease the creation of common chunks of Moodle code. It will also		The MDLCode plugin is specifically for Moodle development and includes a suite of wizards to ease the creation of common chunks of Moodle code. It will also
	show if strings in a language file are unused.		show if strings in a language file are unused.
	https://marketplace.visualstudio.com/items?itemName=LMSCloud.mdlcode		https://marketplace.visualstudio.com/items?itemName=LMSCloud.mdlcode

	==Linting==		==Linting==
	[https://en.wikipedia.org/wiki/Lint_(software) Linting] plugins will show wavy red lines under code that does not conform:		[https://en.wikipedia.org/wiki/Lint_(software) Linting] plugins will show wavy red lines under code that does not conform:
Line 69:		Line 68:
	phpcs -i		phpcs -i
	You should see the text "The installed coding standards are ...." and one of them should be moodle		You should see the text "The installed coding standards are ...." and one of them should be moodle

	==Code Formatting==		==Code Formatting==
	If you have [https://marketplace.visualstudio.com/items?itemName=wongjn.php-sniffer PHP Sniffer] installed, with PHP CS configured too, set it to be the default formatter:		If you have [https://marketplace.visualstudio.com/items?itemName=wongjn.php-sniffer PHP Sniffer] installed, with PHP CS configured too, set it to be the default formatter:
Line 82:		Line 80:
	</syntaxhighlight>		</syntaxhighlight>
	==Behat/Gherkin/Cucumber Formatting==		==Behat/Gherkin/Cucumber Formatting==
	Following extensions will help with Behat .feature files (which use the cucumber language)		Following extensions will help with Behat .feature files (which use the cucumber language)

	Colour syntax highlighting		Colour syntax highlighting

	https://marketplace.visualstudio.com/items?itemName=Blodwynn.featurehighlight		https://marketplace.visualstudio.com/items?itemName=Blodwynn.featurehighlight

	Beautification (indentation)		Beautification (indentation)

	https://marketplace.visualstudio.com/items?itemName=siarheikuchuk.gherkin-beautifier-vs-code-plugin		https://marketplace.visualstudio.com/items?itemName=siarheikuchuk.gherkin-beautifier-vs-code-plugin
	==Automated testing==		==Automated testing==
	PHP (Devsense) mentioned [[#Intellisense\|above]] can be set up to run unittests from within VSCode.		PHP (Devsense) mentioned [[#Intellisense\|above]] can be set up to run unittests from within VSCode.

Marcusgreen: /* MDL Code plugin link */

2023-08-31T09:45:02Z

MDL Code plugin link

← Older revision		Revision as of 09:45, 31 August 2023
Line 37:		Line 37:
	"phpunit.phpunit": "./vendor/bin/phpunit",		"phpunit.phpunit": "./vendor/bin/phpunit",
	</syntaxhighlight>		</syntaxhighlight>
			==Wizards==
			The MDLCode plugin is specifically for Moodle development and includes a suite of wizards to ease the creation of common chunks of Moodle code. It will also
			show if strings in a language file are unused.
			https://marketplace.visualstudio.com/items?itemName=LMSCloud.mdlcode

	==Linting==		==Linting==
	[https://en.wikipedia.org/wiki/Lint_(software) Linting] plugins will show wavy red lines under code that does not conform:		[https://en.wikipedia.org/wiki/Lint_(software) Linting] plugins will show wavy red lines under code that does not conform:
Line 64:		Line 69:
	phpcs -i		phpcs -i
	You should see the text "The installed coding standards are ...." and one of them should be moodle		You should see the text "The installed coding standards are ...." and one of them should be moodle

	==Code Formatting==		==Code Formatting==
	If you have [https://marketplace.visualstudio.com/items?itemName=wongjn.php-sniffer PHP Sniffer] installed, with PHP CS configured too, set it to be the default formatter:		If you have [https://marketplace.visualstudio.com/items?itemName=wongjn.php-sniffer PHP Sniffer] installed, with PHP CS configured too, set it to be the default formatter:

Marcusgreen: /* Behat/Gherkin/Cucumber Colour syntax and Formatting */

2023-08-31T09:42:36Z

Behat/Gherkin/Cucumber Colour syntax and Formatting

← Older revision		Revision as of 09:42, 31 August 2023
Line 76:		Line 76:
	</syntaxhighlight>		</syntaxhighlight>
	==Behat/Gherkin/Cucumber Formatting==		==Behat/Gherkin/Cucumber Formatting==
	Following extensions ~~colour syntax formatting for behat~~ .feature files.		Following extensions will help with Behat .feature files (which use the cucumber language)
	* https://marketplace.visualstudio.com/items?itemName=Blodwynn.featurehighlight
	* https://marketplace.visualstudio.com/items?itemName=stevejpurves.cucumber		Colour syntax highlighting
	~~Formatting tables:~~
	* https://marketplace.visualstudio.com/items?itemName=~~shuworks~~.~~vscode~~-~~table~~-~~formatter~~		https://marketplace.visualstudio.com/items?itemName=Blodwynn.featurehighlight

			Beautification (indentation)

			https://marketplace.visualstudio.com/items?itemName=siarheikuchuk.gherkin-beautifier-vs-code-plugin
	==Automated testing==		==Automated testing==
	PHP (Devsense) mentioned [[#Intellisense\|above]] can be set up to run unittests from within VSCode.		PHP (Devsense) mentioned [[#Intellisense\|above]] can be set up to run unittests from within VSCode.

Marcusgreen: /* JSDoc Link to vscode plugin that will help create JSdoc blocks */

2023-06-29T09:45:57Z

JSDoc Link to vscode plugin that will help create JSdoc blocks

← Older revision		Revision as of 09:45, 29 June 2023
Line 80:		Line 80:
	* https://marketplace.visualstudio.com/items?itemName=stevejpurves.cucumber		* https://marketplace.visualstudio.com/items?itemName=stevejpurves.cucumber
	Formatting tables:		Formatting tables:

	* https://marketplace.visualstudio.com/items?itemName=shuworks.vscode-table-formatter		* https://marketplace.visualstudio.com/items?itemName=shuworks.vscode-table-formatter

	==Automated testing==		==Automated testing==
	PHP (Devsense) mentioned [[#Intellisense\|above]] can be set up to run unittests from within VSCode.		PHP (Devsense) mentioned [[#Intellisense\|above]] can be set up to run unittests from within VSCode.
Line 91:		Line 89:

	[[File:yet_another_phpunit.png\|666x666px]]		[[File:yet_another_phpunit.png\|666x666px]]
	== Docblocks==		== JSDoc==
			https://marketplace.visualstudio.com/items?itemName=crystal-spider.jsdoc-generator will create JSDoc blocks by typing /** at the top of the function. Select the Autogenerated JSdoc option and it will create a template for the description, parameter and return types.
			==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.		[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.
	== Javascript ==		==Javascript==
	VSCode provides Intellisense for Javascript and allows to navigate between ES6 modules. To make it resolve paths inside Moodle you need to create jsconfig.json file and place it in Moodle root. You can run		VSCode provides Intellisense for Javascript and allows to navigate between ES6 modules. To make it resolve paths inside Moodle you need to create jsconfig.json file and place it in Moodle root. You can run
	<syntaxhighlight lang="sh">		<syntaxhighlight lang="sh">
Line 99:		Line 99:
	</syntaxhighlight>		</syntaxhighlight>
	to generate jsconfig.json. See also [[Grunt]] documentation.		to generate jsconfig.json. See also [[Grunt]] documentation.
	==Moodle specific Snippets and autocomplete==		== Moodle specific Snippets and autocomplete ==
	[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=MateuszLesiak.vscode-moodle-snippets Moodle - Snippets & Autocomplete] offers some useful Moodle specific code completion popups.
	==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

Marina.glancy: /* Behat/Gherkin/Cucumber Formatting */

2023-03-27T21:50:30Z

Behat/Gherkin/Cucumber Formatting

← Older revision		Revision as of 21:50, 27 March 2023
Line 77:		Line 77:
	==Behat/Gherkin/Cucumber Formatting==		==Behat/Gherkin/Cucumber Formatting==
	Following extensions colour syntax formatting for behat .feature files.		Following extensions colour syntax formatting for behat .feature files.

	* https://marketplace.visualstudio.com/items?itemName=Blodwynn.featurehighlight		* https://marketplace.visualstudio.com/items?itemName=Blodwynn.featurehighlight
	* https://marketplace.visualstudio.com/items?itemName=stevejpurves.cucumber		* https://marketplace.visualstudio.com/items?itemName=stevejpurves.cucumber
			Formatting tables:

			* https://marketplace.visualstudio.com/items?itemName=shuworks.vscode-table-formatter

	==Automated testing==		==Automated testing==

Marina.glancy: /* Behat/Gherkin/Cucumber Formatting */

2023-03-24T17:03:58Z

Behat/Gherkin/Cucumber Formatting

← Older revision		Revision as of 17:03, 24 March 2023
Line 78:		Line 78:
	Following extensions colour syntax formatting for behat .feature files.		Following extensions colour syntax formatting for behat .feature files.

	- https://marketplace.visualstudio.com/items?itemName=Blodwynn.featurehighlight		* https://marketplace.visualstudio.com/items?itemName=Blodwynn.featurehighlight
	- https://marketplace.visualstudio.com/items?itemName=stevejpurves.cucumber		* https://marketplace.visualstudio.com/items?itemName=stevejpurves.cucumber

	==Automated testing==		==Automated testing==

Marina.glancy: /* Behat/Gherkin/Cucumber Formatting */

2023-03-24T17:03:09Z

Behat/Gherkin/Cucumber Formatting

← Older revision		Revision as of 17:03, 24 March 2023
Line 76:		Line 76:
	</syntaxhighlight>		</syntaxhighlight>
	==Behat/Gherkin/Cucumber Formatting==		==Behat/Gherkin/Cucumber Formatting==
	~~This plugin offers~~ colour syntax formatting for behat .feature files.		Following extensions colour syntax formatting for behat .feature files.

	https://marketplace.visualstudio.com/items?itemName=Blodwynn.featurehighlight		- https://marketplace.visualstudio.com/items?itemName=Blodwynn.featurehighlight
			- https://marketplace.visualstudio.com/items?itemName=stevejpurves.cucumber

	~~This plugin seems to indent the feature files nicely~~

	~~https://marketplace.visualstudio.com/items?itemName=siarheikuchuk.gherkin-beautifier-vs-code-plugin~~

	~~Search on the string siarheikuchuk in the vscode extensions dialog.~~
	~~The following settings will confirm to Moodles expectations.~~
	~~"conf.view.identsBefore.And": 4,~~
	~~"conf.view.identsBefore.Scenario": 2,~~
	~~"conf.view.identsBefore.Given": 4,~~
	~~"conf.view.identsBefore.Table": 8,~~
	~~"conf.view.identsBefore.Then": 4,~~
	~~"conf.view.identsBefore.When": 4~~
	==Automated testing==		==Automated testing==
	PHP (Devsense) mentioned [[#Intellisense\|above]] can be set up to run unittests from within VSCode.		PHP (Devsense) mentioned [[#Intellisense\|above]] can be set up to run unittests from within VSCode.

Marina.glancy: /* Javascript */

2023-03-24T16:35:07Z

Javascript

← Older revision		Revision as of 16:35, 24 March 2023
Line 30:		Line 30:

	Example configuration for the PHP (Devsense):		Example configuration for the PHP (Devsense):

	<syntaxhighlight lang="json">		<syntaxhighlight lang="json">
	"php.executablePath": "/usr/bin/php",		"php.executablePath": "/usr/bin/php",
Line 38:		Line 37:
	"phpunit.phpunit": "./vendor/bin/phpunit",		"phpunit.phpunit": "./vendor/bin/phpunit",
	</syntaxhighlight>		</syntaxhighlight>

	==Linting==		==Linting==
	[https://en.wikipedia.org/wiki/Lint_(software) Linting] plugins will show wavy red lines under code that does not conform:		[https://en.wikipedia.org/wiki/Lint_(software) Linting] plugins will show wavy red lines under code that does not conform:
Line 104:		Line 102:
	== Docblocks==		== 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.		[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.

	== Javascript ==		== Javascript ==
	VSCode provides Intellisense for Javascript and allows to navigate between ES6 modules. To ~~allow~~ it to resolve paths inside Moodle you need to create jsconfig.json file and place it in Moodle root. You can run		VSCode provides Intellisense for Javascript and allows to navigate between ES6 modules. To make it resolve paths inside Moodle you need to create jsconfig.json file and place it in Moodle root. You can run

	<syntaxhighlight lang="sh">		<syntaxhighlight lang="sh">
	grunt jsconfig		grunt jsconfig
	</syntaxhighlight>		</syntaxhighlight>

	to generate jsconfig.json. See also [[Grunt]] documentation.		to generate jsconfig.json. See also [[Grunt]] documentation.

	==Moodle specific Snippets and autocomplete==		==Moodle specific Snippets and autocomplete==
	[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=MateuszLesiak.vscode-moodle-snippets Moodle - Snippets & Autocomplete] offers some useful Moodle specific code completion popups.

Marina.glancy: /* Docblocks */

2023-03-24T16:34:24Z

Docblocks

← Older revision		Revision as of 16:34, 24 March 2023
Line 27:		Line 27:
	Out-of-the box VSCode does not provide [https://code.visualstudio.com/docs/editor/intellisense intellisense] for PHP.		Out-of-the box VSCode does not provide [https://code.visualstudio.com/docs/editor/intellisense intellisense] for PHP.

	Recommended extensions are: either [https://marketplace.visualstudio.com/items?itemName=bmewburn.vscode-intelephense-client PHP Intelephense] or [https://marketplace.visualstudio.com/items?itemName=DEVSENSE.phptools-vscode PHP (Devsense)] (do not enable both of them at once as they will duplicate results).		Recommended extensions are: either [https://marketplace.visualstudio.com/items?itemName=bmewburn.vscode-intelephense-client PHP Intelephense] or [https://marketplace.visualstudio.com/items?itemName=DEVSENSE.phptools-vscode PHP (Devsense)] (do not enable both of them at once as they will duplicate results).

			Example configuration for the PHP (Devsense):

			<syntaxhighlight lang="json">
			"php.executablePath": "/usr/bin/php",
			"php.problems.exclude": {
			"/" : [6601, 419]
			},
			"phpunit.phpunit": "./vendor/bin/phpunit",
			</syntaxhighlight>

	==Linting==		==Linting==
	[https://en.wikipedia.org/wiki/Lint_(software) Linting] plugins will show wavy red lines under code that does not conform:		[https://en.wikipedia.org/wiki/Lint_(software) Linting] plugins will show wavy red lines under code that does not conform:
Line 84:		Line 95:
	"conf.view.identsBefore.When": 4		"conf.view.identsBefore.When": 4
	==Automated testing==		==Automated testing==
	[https://marketplace.visualstudio.com/items?itemName=danilopolani.yet-another-phpunit Yet Another PHPUnit] ~~lets you run automated tests from within vscode~~.		PHP (Devsense) mentioned [[#Intellisense\|above]] can be set up to run unittests from within VSCode.

			Alternatively you can use [https://marketplace.visualstudio.com/items?itemName=danilopolani.yet-another-phpunit Yet Another PHPUnit] .

	It inserts a link just above the class name that says 'Run class tests' which will run all the tests in a class and links above each function that says Run test that will run just that test.		It inserts a link just above the class name that says 'Run class tests' which will run all the tests in a class and links above each function that says Run test that will run just that test.

	[[File:yet_another_phpunit.png]]		[[File:yet_another_phpunit.png\|666x666px]]
	== Docblocks==		== 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.		[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.

			== Javascript ==
			VSCode provides Intellisense for Javascript and allows to navigate between ES6 modules. To allow it to resolve paths inside Moodle you need to create jsconfig.json file and place it in Moodle root. You can run

			<syntaxhighlight lang="sh">
			grunt jsconfig
			</syntaxhighlight>

			to generate jsconfig.json. See also [[Grunt]] documentation.

	==Moodle specific Snippets and autocomplete==		==Moodle specific Snippets and autocomplete==
	[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=MateuszLesiak.vscode-moodle-snippets Moodle - Snippets & Autocomplete] offers some useful Moodle specific code completion popups.