Visual Studio Code: Difference between revisions
ItamarWMDE (talk | contribs) Make pathMapping Setting more specific |
MathXplore (talk | contribs) m Reverted edits by ~2025-40622-26 (talk) to last version by Addshore: unexplained content removal Tags: Rollback SWViewer [1.6] |
||
| (26 intermediate revisions by 11 users not shown) | |||
| Line 1: | Line 1: | ||
'''Visual Studio Code''' is a free cross-platform IDE built on open source with a diverse plugin ecosystem that can be used for MediaWiki Development. |
'''Visual Studio Code''' is a free cross-platform IDE built on open source with a diverse plugin ecosystem that can be used for MediaWiki Development. It was designed by Microsoft. |
||
You can download it for free https://code.visualstudio.com/ |
|||
The Wikibase team at Wikimedia Deutschland is currently trialling its use as an IDE and this page serves as the documentation of that effort (hoping it will be useful or others). |
|||
== |
== Notable features == |
||
This one might annoy you https://code.visualstudio.com/docs/getstarted/userinterface#_preview-mode |
|||
=== [https://marketplace.visualstudio.com/items?itemName=k--kato.intellij-idea-keybindings IntelliJ IDEA Keybindings] === |
|||
Highly recommended if you are coming from [[JetBrains IDEs|PhpStorm]] or [[JetBrains IDEs|IntelijJ]]. |
|||
== Recommended Plugins == |
|||
=== [https://marketplace.visualstudio.com/items?itemName=felixfbecker.php-debug Php Debug] === |
=== [https://marketplace.visualstudio.com/items?itemName=felixfbecker.php-debug Php Debug] === |
||
Debug support for PHP with XDebug |
Debug support for PHP with XDebug. |
||
If you're using Windows, WSL2, or docker containers you might find [https://addshore.com/2021/02/vscode-php-xdebug-from-localhost-wsl2-and-docker-containers/ this blog post useful]. |
|||
The plugin comes with default configuration that will work in many cases. |
|||
| ⚫ | |||
If you have problems with VSCode detecting the mappings between your files and the debug sessions you may need to set some path Mappings in the <code>launch.json</code> |
|||
<syntaxhighlight lang="json"> |
|||
| ⚫ | |||
For use with mediawiki-docker-dev you'll need to update the Xdebug config section in your launch.json to look something like the below (with added pathMappings)<syntaxhighlight lang="json"> |
|||
{ |
|||
"name": "Listen for Xdebug", |
|||
"type": "php", |
|||
"request": "launch", |
|||
"port": 9000, |
|||
"pathMappings": { |
"pathMappings": { |
||
<remote-mediawiki-path>: "${workspaceRoot}" |
<remote-mediawiki-path>: "${workspaceRoot}" |
||
} |
} |
||
</syntaxhighlight> |
|||
} |
|||
</syntaxhighlight>Make sure to replace `<remote-mediawiki-path>` with the relevant mediawiki path in the remote system or docker container (in mediwiki-docker-dev, this would be `/var/www/mediawiki`) |
|||
==== Avoid breaking on uncaught exceptions, warnings etc. ==== |
==== Avoid breaking on uncaught exceptions, warnings etc. ==== |
||
| Line 39: | Line 41: | ||
== Settings == |
== Settings == |
||
=== files.autoSave === |
|||
Annoyed by forgetting to save files and wondering why you can't see your changes? [https://code.visualstudio.com/docs/editor/codebasics#_save-auto-save Check out this setting]. |
|||
<syntaxhighlight lang="json"> |
|||
"files.autoSave": "onFocusChange" |
|||
</syntaxhighlight> |
|||
=== search.useIgnoreFiles === |
|||
MediaWiki includes a .gitignore file that the IDE will use to ignore files and directories during search. |
|||
In MediaWiki this includes the skins and extensions directories. |
|||
In order to search files in these directories you will need to set the search.useIgnoreFiles to false in your project specific configuration or higher. |
|||
A default of true may be useful in other projects, so the recommended location is in project configuration. |
|||
<syntaxhighlight lang="json"> |
|||
"search.useIgnoreFiles": false |
|||
</syntaxhighlight> |
|||
=== editor.wordSeparators === |
=== editor.wordSeparators === |
||
In order to allow selection of PHP variables (including the $) by double clicking on them you need to alter your editor.wordSeparators <ref>https://github.com/DEVSENSE/phptools-docs/issues/92</ref> |
In order to allow selection of PHP variables (including the $) by double clicking on them you need to alter your editor.wordSeparators <ref>https://github.com/DEVSENSE/phptools-docs/issues/92</ref> |
||
You can do this for individual languages in your settings.json file <ref>https://github.com/microsoft/vscode/issues/33701#issuecomment-616911062</ref><syntaxhighlight lang="json"> |
You can do this for individual languages in your settings.json file <ref>https://github.com/microsoft/vscode/issues/33701#issuecomment-616911062</ref> |
||
<syntaxhighlight lang="json"> |
|||
"[php]": { |
"[php]": { |
||
"editor.wordSeparators": "`~!@#%^&*()-=+[{]}\|;:'",.<>/?" |
"editor.wordSeparators": "`~!@#%^&*()-=+[{]}\\|;:'\",.<>/?" |
||
} |
} |
||
</syntaxhighlight> |
</syntaxhighlight> |
||
== |
=== explorer.autoReveal === |
||
By default, opening a new file will jump to that location in the sidebar. This can be annoying in large projects. The bellow will stop that jumping around! |
|||
<syntaxhighlight lang="json"> |
|||
"explorer.autoReveal": "focusNoScroll" |
|||
</syntaxhighlight> |
|||
== Plugins to avoid == |
|||
* Render line endings: Has performance problems |
|||
TBA |
|||
* Render whitespace at end of lines: Has performance problems |
|||
== References == |
== References == |
||
Latest revision as of 11:19, 14 December 2025
Visual Studio Code is a free cross-platform IDE built on open source with a diverse plugin ecosystem that can be used for MediaWiki Development. It was designed by Microsoft.
You can download it for free https://code.visualstudio.com/
Notable features
[edit | edit source]This one might annoy you https://code.visualstudio.com/docs/getstarted/userinterface#_preview-mode
Recommended Plugins
[edit | edit source]Debug support for PHP with XDebug.
If you're using Windows, WSL2, or docker containers you might find this blog post useful.
The plugin comes with default configuration that will work in many cases.
Issues with path mappings
[edit | edit source]If you have problems with VSCode detecting the mappings between your files and the debug sessions you may need to set some path Mappings in the launch.json
"pathMappings": {
<remote-mediawiki-path>: "${workspaceRoot}"
}
Avoid breaking on uncaught exceptions, warnings etc.
[edit | edit source]By default the plugin will break on "uncaught exceptions and errors / warnings / notices".
This may not be desirable and can be turned off.
- Using the sidebar, select the "Run" panel.
- At the bottom of the panel expand the "Breakpoints" section (collapsed by default).
- Untick the "Everything" option.
Provides links to Phabricator objects.
"phabricator-links.url": "https://phabricator.wikimedia.org"
Settings
[edit | edit source]files.autoSave
[edit | edit source]Annoyed by forgetting to save files and wondering why you can't see your changes? Check out this setting.
"files.autoSave": "onFocusChange"
search.useIgnoreFiles
[edit | edit source]MediaWiki includes a .gitignore file that the IDE will use to ignore files and directories during search. In MediaWiki this includes the skins and extensions directories. In order to search files in these directories you will need to set the search.useIgnoreFiles to false in your project specific configuration or higher. A default of true may be useful in other projects, so the recommended location is in project configuration.
"search.useIgnoreFiles": false
editor.wordSeparators
[edit | edit source]In order to allow selection of PHP variables (including the $) by double clicking on them you need to alter your editor.wordSeparators [1]
You can do this for individual languages in your settings.json file [2]
"[php]": {
"editor.wordSeparators": "`~!@#%^&*()-=+[{]}\\|;:'\",.<>/?"
}
explorer.autoReveal
[edit | edit source]By default, opening a new file will jump to that location in the sidebar. This can be annoying in large projects. The bellow will stop that jumping around!
"explorer.autoReveal": "focusNoScroll"
Plugins to avoid
[edit | edit source]- Render line endings: Has performance problems
- Render whitespace at end of lines: Has performance problems