{"id":14063320,"url":"https://github.com/cavo789/vscode_tips","last_synced_at":"2025-12-29T05:06:30.134Z","repository":{"id":52307339,"uuid":"251268874","full_name":"cavo789/vscode_tips","owner":"cavo789","description":"Tutorial about Visual Studio Code and tips and tricks","archived":false,"fork":false,"pushed_at":"2023-10-23T10:03:36.000Z","size":31515,"stargazers_count":76,"open_issues_count":0,"forks_count":5,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-10-27T17:55:19.544Z","etag":null,"topics":["developer-guide","php","userguide","vscode"],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cavo789.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2020-03-30T10:13:02.000Z","updated_at":"2025-10-20T07:54:22.000Z","dependencies_parsed_at":"2023-02-01T02:30:14.215Z","dependency_job_id":"fcedb2c0-af5f-4f6e-9ff1-a5c8a76cad5e","html_url":"https://github.com/cavo789/vscode_tips","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/cavo789/vscode_tips","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cavo789%2Fvscode_tips","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cavo789%2Fvscode_tips/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cavo789%2Fvscode_tips/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cavo789%2Fvscode_tips/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cavo789","download_url":"https://codeload.github.com/cavo789/vscode_tips/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cavo789%2Fvscode_tips/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28110763,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-12-29T02:00:07.021Z","response_time":58,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["developer-guide","php","userguide","vscode"],"created_at":"2024-08-13T07:03:16.247Z","updated_at":"2025-12-29T05:06:30.106Z","avatar_url":"https://github.com/cavo789.png","language":"PHP","funding_links":[],"categories":["PHP"],"sub_categories":[],"readme":"\u003c!-- This file has been generated by the concat.sh script. --\u003e\n\u003c!-- Don't modify this file manually (you'll loose your changes) --\u003e\n\u003c!-- but run the tool once more --\u003e\n\u003c!-- Last refresh date: Monday, October 23, 2023, 11:56:04 --\u003e\n\n---\ntitle: \"Visual Studio Code - Tutorial and Tips \u0026 Tricks\"\nsubtitle: \"Guide for the developer\"\ndate: \"23 October 2023, 11:10\"\nkeywords: [vscode, tutorial]\nlanguage: \"en\"\n---\n\u003c!-- markdownlint-disable MD033 MD041 --\u003e\n\n# Visual Studio Code - Tutorial and Tips \u0026 Tricks\n\n![Banner](./banner.svg)\n\n\u003e Tutorial and collection of tips and tricks for Visual Studio Code\n\n\u003c!-- table-of-contents - start --\u003e\n* [Discovering Visual Studio Code](#discovering) \n  * [Installation](#discovering-installation) \n  * [The first keyboard shortcuts to learn](#discovering-shortcuts) \n  * [Settings](#discovering-settings) \n  * [Working with files and folders](#working-with-files) \n    * [Keyboard shortcuts](#working-with-files-shortcuts) \n  * [Code traversal - Navigation](#traversal) \n    * [Keyboard shortcuts](#traversal-shortcuts) \n    * [Select first](#traversal-select-first) \n  * [Snippets](#snippets) \n    * [Global](#snippets-global) \n      * [Built-in](#snippets-built-in) \n      * [User-defined ones](#snippets-user-defined) \n      * [Make snippets configurable](#snippets-user-placeholders) \n      * [Using variables](#using-variables)\n      * [Settings](#snippets-settings) \n      * [Extensions](#snippets-extensions) \n    * [Project-based](#snippets-project-based) \n    * [Generator](#snippets-generator) \n    * [Video tutorial](#snippets-video) \n  * [Using the built-in terminal](#terminal) \n    * [Extensions](#terminal-extensions) \n  * [Search](#search)\n    * [Save the search](#save-the-search)\n* [Working with code](#working-with-code) \n  * [Keyboard shortcuts](#working-with-code-shortcuts) \n    * [Code folding](#working-with-code-folding) \n    * [Comments](#working-with-code-comments) \n  * [Integrated GIT](#integrated-git) \n    * [Using with the terminal](#integrated-git-terminal) \n    * [Source Control - GIT](#integrated-git-source-control) \n    * [Extensions](#integrated-git-extensions) \n  * [Code definition](#code-definition)\n  * [PHP-Unit](#phpunit) \n    * [Extensions](#phpunit-extensions) \n  * [Using xDebug](#xdebug) \n    * [Installation](#installation)\n      * [Check if xdebug is loaded](#check-if-xdebug-is-loaded)\n    * [Visual Studio Code](#visual-studio-code)\n      * [Settings](#settings)\n      * [Use inside vscode](#use-inside-vscode)\n      * [Breakpoint](#breakpoint)\n      * [Logpoint](#logpoint)\n      * [Debug keyboard shortcuts](#debug-keyboard-shortcuts)\n      * [Also read](#also-read)\n  * [PHP Formatting](#php-formatting) \n  * [Multiple cursors](#multiple-cursors) \n    * [Insert prefix on each line](#multiple-cursors-insert-prefix) \n  * [Navigate between problems](#navigate-between-problems)\n  * [Regions](#regions)\n  * [vscode configuration](#vscode-configuration)\n    * [Suggest a list of extensions to install for your project](#suggest-a-list-of-extensions-to-install-for-your-project)\n* [Refactoring](#refactoring)\n  * [Renaming](#renaming)\n    * [a symbol](#a-symbol)\n    * [a class](#a-class)\n  * [Extract to a new method](#extract-to-a-new-method)\n* [Some settings](#settings) \n  * [Editor settings](#settings-editor) \n  * [Files settings](#settings-files) \n  * [Search settings](#settings-search) \n  * [Telemetry settings](#settings-telemetry) \n  * [Window settings](#settings-window) \n  * [Workbench settings](#settings-workbench) \n* [Extensions](#extensions) \n  * [Unneeded extensions](#unneeded-extensions)\n  * [Get the list of all installed extensions {extensions-list-extensions}](#get-the-list-of-all-installed-extensions-extensions-list-extensions)\n  * [Bash -  Shellscript](#extensions-sh) \n    * [Shell-format](#extensions-shell-format) \n    * [Shellman](#extensions-shellman) \n  * [Extend core features of Visual Studio Code](#extensions-core) \n    * [Active File In StatusBar](#extensions-active-file-statusbar) \n    * [Autofold](#extensions-autofold) \n    * [Better comments](#extensions-better-comments) \n    * [Bookmarks](#extensions-bookmarks) \n    * [Bracket Pair Colorizer](#extensions-bracket-pair-colorizer) \n    * [Change case](#extensions-change-case) \n    * [Code runner](#extension-code-runner) \n    * [Code Spell Checker](#extensions-code-spell-checker) \n    * [Compare Folders](#extensions-compare-folders) \n    * [Docker](#docker) \n    * [Docker explorer](#docker-explorer) \n    * [EditorConfig](#extensions-editorconfig) \n    * [Favorites](#extensions-favorites) \n    * [git-project-manager](#extensions-git-project-manager) \n    * [Gitlens](#extensions-gitlens) \n    * [Vscode Google Translate](#extensions-google-translate) \n      * [Configuration Google Translate](#configuration-google-translate)\n    * [Coloring of source codes according to the language](#extensions-highlight) \n      * [Apache configuration file](#highlight-apache) \n      * [Log File Highlighter](#extensions_log-file-highlighter) \n    * [LanguageTool](#extensions-code-spell-checker) \n    * [Prettier](#extensions-prettier-vscode) \n    * [Project Manager](#extensions-project-manager) \n    * [Rerun the last command](#extensions-terminal-rerun) \n    * [REST client](#extensions-rest-client) \n    * [Select highlight in minimap](#extensions-select-highlight-minimap) \n    * [Snippet-creator](#extensions-snippet-creator) \n    * [Sort lines](#extensions-sort-lines) \n    * [Start any shell](#extensions-start-any-shell) \n    * [Surround](#extensions-surround) \n    * [Syncing](#extensions-syncing) \n    * [TabNine](#extensions-tabnine) \n    * [Thunder client](#thunder-client)\n      * [Validate an API against a schema using Thunder Client](#validate-an-api-against-a-schema-using-thunder-client)\n    * [Todo Tree](#extensions-todo-tree) \n    * [vscode-icons](#extensions-vscode-icons) \n  * [Javascript](#extensions-javascript) \n    * [ESLint](#extensions-eslint) \n  * [Markdown](#extensions-markdown) \n    * [Emoji](#extensions-emoji) \n    * [Markdown All in One](#extensions-markdown-all-in-one) \n    * [Markdownlint](#extensions-markdownlint) \n      * [Configuration Markdownlint](#extensions-markdownlint-configuration) \n  * [PHP](#extensions-php) \n    * [Better PHPUnit](#extensions-php-better-phpunit) \n      * [Configure](#configure)\n      * [Run a test method](#run-a-test-method)\n      * [Run a test file](#run-a-test-file)\n      * [Run the entire suite](#run-the-entire-suite)\n      * [Run the previous test](#run-the-previous-test)\n    * [Code-runner](#extensions-php-better-phpunit) \n      * [Configuration Code-runner](#configuration-code-runner)\n    * [PHP intelephense](#extensions-php-intelephense) \n      * [Configuration PHP intelephense](#extensions-php-intelephense-configuration) \n    * [Laravel Blade Snippets](#extensions-laravel-blade) \n    * [PHP-CS-FIXER](#extensions-php-cs-fixer) \n    * [PHP DocBlocker](#extensions-php-docblocker) \n    * [PHP Extension Pack](#extensions-php-extension-pack) \n    * [PHP getters and setters](#extensions-php-getters-setters) \n    * [PHP IntelliSense](#extensions-php-intellisense) \n    * [PHP Namespace Resolver {extension-php-namespace-resolver}](#php-namespace-resolver-extension-php-namespace-resolver)\n* [Tips](#tips)\n  * [editorconfig](#editorconfig)\n  * [http://editorconfig.org/](#http-editorconfig-org)\n  * [top-most EditorConfig file](#top-most-editorconfig-file)\n  * [Interface](#interface)\n    * [Use color to identify projects](#use-color-to-identify-projects)\n    * [Sticky scroll](#sticky-scroll) \n  * [Keyboard shortcuts for Windows](#keyboard-shortcuts-for-windows)\n  * [PHP-CS-FIXER](#php-cs-fixer) \n    * [Installation](#php-cs-fixer-installation) \n    * [Remove unused imports](#php-cs-fixer-no-unused-imports) \n  * [Reduce the load time of vscode](#reduce-the-load-time-of-vscode)\n    * [Loading from a WSL2 prompt is slow](#loading-from-a-wsl2-prompt-is-slow)\n  * [Search and replace - Regex](#search-and-replace-regex)\n    * [Remove all lines starting with](#remove-all-lines-starting-with) \n    * [Remove all empty lines](#remove-all-empty-lines)\n    * [Remove all lines except those matching a regex](#remove-all-lines-except-those-matching-a-regex)\n  * [Custom tasks](#custom-tasks) \n    * [Run a DOS batch](#custom-tasks-batch) \n    * [Run PHP-Unit](#custom-tasks-phpunit) \n    * [Fire the task automatically when the project is opened in vscode](#task-autorun) \n* [Troubleshooting](#troubleshooting) \n  * [Intelephense](#troubleshooting-intelephense) \n  * [Phan](#troubleshooting-phan) \n  * [PHP-CS-FIXER](#troubleshooting-php-cs-fixer) \n    * [PHP General Error](#troubleshooting-php-cs-fixer-php-general-error) \n* [Create your own extension](#own-extension) \n* [Using vscode on the web](#vscode-dev) \n* [Bookmarks](#bookmarks)\n  * [Free course - VS Code Tutorial - Be More Productive](#free-course-vs-code-tutorial-be-more-productive)\n  * [VS Code can do that](#vs-code-can-do-that)\n  * [VS Code channel on youtube](#vs-code-channel-on-youtube)\n* [Annex](#annex)\n  * [List of extensions I use](#list-of-extensions-i-use)\n* [Trouble shooting](#trouble-shooting)\n  * [Git integration is no more working under WSL](#git-integration-is-no-more-working-under-wsl)\n  * [Markdown folding not working](#markdown-folding-not-working)\n  * [Starting code from the WSL console is not returning to the console](#starting-code-from-the-wsl-console-is-not-returning-to-the-console)\n* [License](#license)\u003c!-- table-of-contents - end --\u003e\n\n## Discovering Visual Studio Code {#discovering}\n\n### Installation {#discovering-installation}\n\nDownload [Visual Studio Code](https://code.visualstudio.com/).\n\nThe [Insiders version](https://code.visualstudio.com/insiders/) contains the very latest version but can be unstable.\n\n### The first keyboard shortcuts to learn {#discovering-shortcuts}\n\n* \u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eB\u003c/kbd\u003e toggle visibility of the side bar (the one with the list of files in the project).\n* \u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eO\u003c/kbd\u003e to open a file.\n* \u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eK\u003c/kbd\u003e-\u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eO\u003c/kbd\u003e to open a folder (a project).\n* \u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eR\u003c/kbd\u003e to show the list of recent folders (recent project).\n  * **TIP** Before clicking on the desired folder   , be sure to press the \u003ckbd\u003eCTRL\u003c/kbd\u003e key to open the folder in a new window ([link](https://github.com/Microsoft/vscode/issues/31581#issuecomment-321753188))\n* \u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eP\u003c/kbd\u003e to quickly retrieve and open a file in an open project.\n* \u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eO\u003c/kbd\u003e to open a recent folder (a project).\n* \u003ckbd\u003eSHIFT\u003c/kbd\u003e-\u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eF\u003c/kbd\u003e to open the `search` pane (when a project has been opened).\n* \u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eSHIFT\u003c/kbd\u003e-\u003ckbd\u003eP\u003c/kbd\u003e to open the `Command Palette` to quick access all commands of the editor.\n* \u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003e,\u003c/kbd\u003e to get access to the `User Settings`.\n* \u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eSHIFT\u003c/kbd\u003e-\u003ckbd\u003eN\u003c/kbd\u003e to open a new instance of vscode.\n* \u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eSHIFT\u003c/kbd\u003e-\u003ckbd\u003eT\u003c/kbd\u003e to reopen a closed file.\n* \u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eSHIFT\u003c/kbd\u003e-\u003ckbd\u003eX\u003c/kbd\u003e to open the list of `Extensions`.\n* \u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eB\u003c/kbd\u003e show/hide the left side-bar (if \u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eB\u003c/kbd\u003e isn't used like in markdown files to set in bold).\n* \u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eK\u003c/kbd\u003e-\u003ckbd\u003eZ\u003c/kbd\u003e maximize the screen, aka `Zen mode`.\n\n### Settings {#discovering-settings}\n\nThere are two sorts of settings: `User` or `Workspace`. Remember, you can quickly access settings thanks the \u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003e,\u003c/kbd shortcut.\n\n `User` settings are for all your projects and stored in the `%APPDATA%\\Code\\User\\settings.json` file.\n\n `Workspace` settings are the opened project and stored in the `.vscode/settings.json` file (in the project's structure).\n\n### Working with files and folders {#working-with-files}\n\nThe most efficient way to do is to use the tree-view at the left and right-click where the file/folder should be created.\n\nSelect the parent folder, right-click and select `New file` or `New folder`.\n\n#### Keyboard shortcuts {#working-with-files-shortcuts}\n\n* \u003ckbd\u003eSHIFT\u003c/kbd\u003e-\u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eE\u003c/kbd\u003e when a file is opened will activate the tree-view, retrieve the file and highlight it.\n\n### Code traversal - Navigation {#traversal}\n\n#### Keyboard shortcuts {#traversal-shortcuts}\n\n* \u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eP\u003c/kbd\u003e to quick open / go to an open file. Files are sorted in the list from the most recent till the last recent so it's easy to go back to the previously edited file.\n* \u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eP\u003c/kbd\u003e-\u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eP\u003c/kbd\u003e to open the most recent file (the second file in the list). You can press CTRL-P again and again to go to the third, fourth, ... When you release keys, the selected file will be immediately open.\n* \u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eSHIFT\u003c/kbd\u003e-\u003ckbd\u003eO\u003c/kbd\u003e to open (browse) a symbol[^symbol] in the opened file. Navigating with the arrows will select the portion of code in the editor.\n* \u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eT\u003c/kbd\u003e to open (browse) a symbol[^symbol] in the entire project. In a markdown file, \u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eT\u003c/kbd\u003e will display the list of every headings f.i.\n* \u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eTAB\u003c/kbd\u003e to switch between open tabs (just like Windows and active applications).\n* \u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eK\u003c/kbd\u003e-\u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eQ\u003c/kbd\u003e go back to the last edited line.\n\n#### Select first {#traversal-select-first}\n\n* Select a word, a function name, a variable, a constant then press \u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eT\u003c/kbd\u003e to open a list where that selection can be found. For instance, by selecting a constant name and pressing \u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eT\u003c/kbd\u003e you'll obtain the full list of files using that constant and the one who defines the constant.\n\n### Snippets {#snippets}\n\n#### Global {#snippets-global}\n\n##### Built-in {#snippets-built-in}\n\nSnippets are pieces of pre-programmed code (like a `try...catch...`) that allow you to generate code without typing it entirely.\n\nDepending on the open file and its language (php, js, markdown, ...), *VSCode* will offer standard snippets and it will also be possible to program your own.\n\nPress \u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eSHIFT\u003c/kbd\u003e-\u003ckbd\u003eP\u003c/kbd\u003e to open the Palette Command then type `Insert Snippet` to get the list of already existing snippets.\n\n##### User-defined ones {#snippets-user-defined}\n\nIt is however, possible to write your own snippets: press \u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eSHIFT\u003c/kbd\u003e-\u003ckbd\u003eP\u003c/kbd\u003e then `Configure User Snippets`. The programming language is chosen, e.g. `PHP`, which will open an editor with, here, the open `PHP` file.\n\nA file called `php.json` will be open and you can start to create a snippet; f.i.:\n\n```json\n{\n    \"strict\": {\n        \"prefix\": \"strict\",\n        \"body\": [\"declare (strict_types = 1);\", \"\"],\n        \"description\": \"Add strict_types\"\n    }\n}\n```\n\nThe code here above defines a snippet called `strict` and it's for a `.php` file. Open such file, start to type `stri` (you can type only a few letters) and press the \u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003espace\u003c/kbd\u003e keys. Select the snippet and press \u003ckbd\u003eenter\u003c/kbd\u003e. You'll get the code defined in the `body`. It's magic.\n\nNote: you can also desire to just press the \u003ckbd\u003eTAB\u003c/kbd\u003e key. If so, check your `User Settings` and make sure the following key is well on `on`:\n\n```json\n{\n    \"editor.tabCompletion\": \"on\"\n}\n```\n\nThe example below will add two snippets, one called `img` and the other one `url`. These snippets are for markdown files so, when adding snippets to VSCode, in the `Configure User Snippets` command, select `markdown` as language first.\n\n```json\n{\n    \"url\": {\n        \"prefix\": \"url\",\n        \"description\": \"Add an url tags\",\n        \"body\": [\"[${1:URL}](${1:URL})\"]\n    }\n}\n```\n\n##### Make snippets configurable {#snippets-user-placeholders}\n\nTake a look on the following snippet and the `$1` and `$2` placeholders.\n\n```json\n{\n    \"var-dump\": {\n        \"prefix\": \"vd\",\n        \"body\": [\n            \"echo '\u003cpre\u003e'.__METHOD__.'--'.__LINE__.'\u003c/pre\u003e';\",\n            \"echo '\u003cpre\u003e'.print_r(${1:\\\\$variableName}, true).'\u003c/pre\u003e';\",\n            \"die(${2:\\\"I'm dying right now\\\"});\"\n        ],\n        \"description\": \"Debug - Die and echo file/line info\"\n    }\n}\n```\n\nSave this snippet in your editor and, in a `php` file, type `vd` followed by \u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003espace\u003c/kbd\u003e. You'll get now three new lines and the cursor will be placed where the `$1` placeholder was. Type a PHP variable and press \u003ckbd\u003eTAB\u003c/kbd\u003e and see, the cursor will be now immediately put where `$2` was located. Thanks these placeholders it's easy to foresee, in a snippet, locations where you need to type dynamic content like variables, custom text, ...\n\nTip: use `${1:$variableName}` instead of just `$1` to show a place holder and/or a default value.\n\n![var_dump](./010-first-approach/060-snippets/images/snippets-vd.gif)\n\n##### Using variables\n\nWhen creating a snippet, we can f.i. use the current PHP filename. Imagine you've a file name `Customer.php` and there you wish to create a new class.\n\nThe following snippet will do the magic:\n\n```json\n{\n    \"Class\": {\n        \"prefix\": \"class\",\n        \"body\": [\"class ${TM_FILENAME_BASE}\", \"{\", \"    return;\", \"}\"],\n        \"description\": \"Create a new class\"\n    }\n}\n```\n\nThe `TM_FILENAME_BASE` variable will be replaced by VS Code to the filename *(without the extension)* so we'll get a new class called `Customer`.\n\nSee all variables here: [https://code.visualstudio.com/docs/editor/userdefinedsnippets#_variables](https://code.visualstudio.com/docs/editor/userdefinedsnippets#_variables)\n\n##### Settings {#snippets-settings}\n\nUser snippets are stored in the `%APPDATA%\\code\\user\\snippets` folder, one `.json` file by languages.\n\n##### Extensions {#snippets-extensions}\n\nAlso see the [snippet-creator](#extensions-snippet-creator) extension.\n\n#### Project-based {#snippets-project-based}\n\nYou can also define your snippets for your project and not globally. You can then share snippets with your colleagues f.i.\n\n1. In the root folder of your project create a `.vscode` folder if not yet present;\n2. Create a file with the `.code-snippets` extension like `my-project.code-snippets`;\n3. You can configure your snippets there.\n\nBelow an example from this `VSCode-Tips` project:\n\n```json\n{\n    \"Terminal-shortcut\": {\n        \"scope\": \"markdown\",\n        \"prefix\": \"terminal\",\n        \"body\": [\"`Terminal` (\u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eSHIFT\u003c/kbd\u003e-\u003ckbd\u003eù\u003c/kbd\u003e)\"],\n        \"description\": \"Show Terminal keyboard Shortcuts\"\n    }\n}\n```\n\nNow, each time I'll type `terminal` I can decide to immediately add the keyboard shortcuts; nice.\n\n#### Generator {#snippets-generator}\n\nIf you prefer to use a generator, [https://snippet-generator.app/](https://snippet-generator.app/) can help you.\n\n#### Video tutorial {#snippets-video}\n\n[https://www.youtube.com/watch?v=JIqk9UxgKEc](https://www.youtube.com/watch?v=JIqk9UxgKEc)\n\n### Using the built-in terminal {#terminal}\n\nPress \u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eSHIFT\u003c/kbd\u003e-\u003ckbd\u003eù\u003c/kbd\u003e to open the built-in terminal.\n\nPress \u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eSHIFT\u003c/kbd\u003e-\u003ckbd\u003eC\u003c/kbd\u003e to open a DOS Prompt session where the current folder will be the opened project.\n\nYou can choose for a DOS terminal, Powershell or bash one. Just select the `Select Default Shell` option and VS Code will prompt which shell application should be used.\n\n![Terminal](./010-first-approach/070-terminal/images/terminal.png)\n\nNote: by clicking on the `+` button, we can create as many terminals we want.\n\n#### Extensions {#terminal-extensions}\n\nAlso see the [Rerun last command](#extensions-terminal-rerun) extension.\n\n### Search\n\n#### Save the search\n\nJust after having fired a search, it's possible to click on the `Open in editor` link so the result appears in the editor. The very nice thing then is to be able to see the context (i.e. xxx lines before/after the search match) and to be able to save the search as a file (the filename will be `.code-search`).\n\nThis can be useful when f.i. the search pattern is a complex regex or if working on the search result can take a long time so we can save the search as a file in the project and open it later on.\n\n![Save search](./010-first-approach/080-search/images/save_search.png)\n\nThis video show this: [https://www.youtube.com/watch?v=zm7ZjENKUEc](https://www.youtube.com/watch?v=zm7ZjENKUEc)\n\n## Working with code {#working-with-code}\n\n### Keyboard shortcuts {#working-with-code-shortcuts}\n\n#### Code folding {#working-with-code-folding}\n\n* \u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eK\u003c/kbd\u003e-\u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eà\u003c/kbd\u003e to collapse all functions, headings, ... The same can be obtained by \u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eSHIFT\u003c/kbd\u003e-\u003ckbd\u003eP\u003c/kbd\u003e then `Fold all`.\n* \u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eK\u003c/kbd\u003e-\u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eJ\u003c/kbd\u003e to expand all functions, headings, ... The same can be obtained by \u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eSHIFT\u003c/kbd\u003e-\u003ckbd\u003eP\u003c/kbd\u003e then `Unfold all`.\n* \u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eK\u003c/kbd\u003e-\u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003e\u0026\u003c/kbd\u003e - Collapse level 1.\n* \u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eK\u003c/kbd\u003e-\u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eé\u003c/kbd\u003e - Collapse level 2.\n* \u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eK\u003c/kbd\u003e-\u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003e\"\u003c/kbd\u003e - Collapse level 3.\n* \u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eK\u003c/kbd\u003e-\u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003e'\u003c/kbd\u003e - Collapse level 4.\n* \u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eK\u003c/kbd\u003e-\u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003e(\u003c/kbd\u003e - Collapse level 5.\n* \u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eK\u003c/kbd\u003e-\u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003e§\u003c/kbd\u003e - Collapse level 6.\n* \u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eK\u003c/kbd\u003e-\u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eè\u003c/kbd\u003e - Collapse level 7.\n* \u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eK\u003c/kbd\u003e-\u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003e)\u003c/kbd\u003e - Collapse the bloc where the cursor is located.\n\n#### Comments {#working-with-code-comments}\n\nSelect a bloc of lines then,\n\n* \u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eK\u003c/kbd\u003e-\u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eC\u003c/kbd\u003e to put that bloc in comments (add `//` in front of each line).\n* \u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eK\u003c/kbd\u003e-\u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eU\u003c/kbd\u003e to remove the comments (remove `//` in front of each line).\n\nTip: there is an easier way, \u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003e:\u003c/kbd\u003e will toggle (add or remove) comments.\n\n### Integrated GIT {#integrated-git}\n\n#### Using with the terminal {#integrated-git-terminal}\n\nOnce a project has been opened, you can get access to any git command by using the terminal. Open the `Terminal` (\u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eSHIFT\u003c/kbd\u003e-\u003ckbd\u003eù\u003c/kbd\u003e).\n\nFor instance, if the project has never been sent to git, you can initialize the repository like this:\n\n* Open the `Terminal` (\u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eSHIFT\u003c/kbd\u003e-\u003ckbd\u003eù\u003c/kbd\u003e). You'll be placed in the root folder of the project;\n* `git init` to initialize your local repository;\n* `git add .` to add all files to the staging area of your repository. Visual Studio Code will change the color of any files and folders in the tree-view to reflect that files are now in the staging area and ready to be committed;\n* `git commit -m 'My initial commit'` to commit everything to the local repository. Color in the tree-view will be back in white (no greener) meaning that files are now placed in the repo.;\n\nIf you now change a file by appending a new function, removing part of the code, changing a variable, ... VSCode will display a color (green, red, ...) in the left margin of the code editor reflecting the change.\n\n* `git status` in the `Terminal` will show the list of uncommitted changes.\n\nNote: You can get access to any GIT command in the `Command Palette` (\u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eSHIFT\u003c/kbd\u003e-\u003ckbd\u003eP\u003c/kbd\u003e).\n\n#### Source Control - GIT {#integrated-git-source-control}\n\n* \u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eSHIFT\u003c/kbd\u003e-\u003ckbd\u003eG\u003c/kbd\u003e will open the `Source Control: GIT` pane with the list of changes made to your source after the last `git add` command.\n\nFrom there it's easy to see what files have been modified and, file by file, discard changes if you want.\n\n#### Extensions {#integrated-git-extensions}\n\nAlso see the [Gitlens](#extensions-gitlens) extension.\n\n### Code definition\n\nBy right-clicking on a variable, constant or method, we can get access to a few features like showing everywhere it's used.\n\n![Go to References](./020-working-with-code/030-code-definition/images/goto-references.png)\n\n* \u003ckbd\u003eSHIFT\u003c/kbd\u003e-\u003ckbd\u003eF12\u003c/kbd\u003e to show all references\n\nIn the right area of the popup, we can navigate and click to see each portion of files.\n\nPress \u003ckbd\u003eF12\u003c/kbd\u003e to jump in the definition of the method: click or select a method name like in `writeLog(...)` and press \u003ckbd\u003eF12\u003c/kbd\u003e once the cursor is located on `writeLog` and you'll jump in the file that implements the method, the method source code will be displayed too.\n\n### PHP-Unit {#phpunit}\n\nFrom the `Terminal` (\u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eSHIFT\u003c/kbd\u003e-\u003ckbd\u003eù\u003c/kbd\u003e), you can directly run phpunit and the full suite of tests will be executed.\n\n![PHP-Unit](./020-working-with-code/040-phpunit/images/phpunit.png)\n\n#### Extensions {#phpunit-extensions}\n\nAlso see the [Better PHPUnit](#extensions-php-better-phpunit) extension.\n\n### Using xDebug {#xdebug}\n\nURL: [https://xdebug.org](https://xdebug.org/)\n\n\u003e [Tutorial](https://scotch.io/@chenster/debugging-php-in-visual-studio-code205)\n\n#### Installation\n\n* Open `http://localhost/?phpinfo=1` and make \u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eA\u003c/kbd\u003e/\u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eC\u003c/kbd\u003e\n* Open `https://xdebug.org/wizard.php` and \u003ckbd\u003eCTRL\u003c/kbd\u003e\u003ckbd\u003eV\u003c/kbd\u003e there\n* Click on the `Analyze my phpinfo() output` button\n\nFollow installation steps:\n\n* download the suggested `.dll`,\n* save the file in the mentioned location,\n* edit `php.ini` and add the reference to the `.dll`\n* **extra step**: add the two lines below in the `php.ini` in the `[xdebug]` section\n\n```ini\nxdebug.remote_enable = 1\nxdebug.remote_autostart = 1\n```\n\n* save the file\n* restart the webserver\n\n**The two variables below are important and should be initialized to 1 otherwise xdebug will not stop the code on breakpoints.**\n\n##### Check if xdebug is loaded\n\n* Open `http://localhost/?phpinfo=1` once more\n* Search for `xdebug`. A  **xdebug** table should be there with a lot of keys/values.\n\n#### Visual Studio Code\n\nTutorial by Microsoft: `https://code.visualstudio.com/docs/editor/debugging#_launch-configurations`\n\n* Install the [PHP Debug](https://marketplace.visualstudio.com/itemdetails?itemName=felixfbecker.php-debug) extension\n* Click on the `bug` button ![Visual Studio - Debug](./020-working-with-code/045-xdebug/images/xdebug_visual_studio.png)\n* Click on the ![Visual Studio - Debug](./020-working-with-code/045-xdebug/images/xdebug_visual_studio_add_configuration.png) dropdown\n* Select `Add configuration` and select `PHP` as language\n* A list of options can be configured, the list is here: `https://marketplace.visualstudio.com/itemdetails?itemName=felixfbecker.php-debug#supported-launch.json-settings`\n\n##### Settings\n\nSettings are saved in the `/.vscode/launch.json` file. A nice option is the `ignore` one who makes possible to ignore certain files from a debugger perspective. Here, ask not to go into vendors scripts (and stay in our own scripts):\n\n```json\n{\n    \"version\": \"0.2.0\",\n    \"configurations\": [\n        {\n            \"name\": \"Listen for XDebug\",\n            \"type\": \"php\",\n            \"request\": \"launch\",\n            \"port\": 9000,\n            \"ignore\": [\"**/bin/**/*\",\"**/vendor/**/*\"],\n            \"internalConsoleOptions\": \"openOnSessionStart\"\n        }\n    ]\n}\n```\n\nNotes:\n\n* `ignore` is used to indicate to vscode to not stop on any error, exceptions, ... that can be retrieved in specific files or folders. If you're using dependencies, it's a good idea to not stop in files under the `vendor/` folder. Also, if you're using `.phar` archives for instance (let's say in folder `bin/`, it's also a good idea to ignore that folder / files),\n* `internalConsoleOptions` will allow to immediately open the debug console in a new terminal, pretty easy.\n\nThe list of all settings can be retrieved here: [https://code.visualstudio.com/docs/editor/debugging#_launchjson-attributes](https://code.visualstudio.com/docs/editor/debugging#_launchjson-attributes).\n\n##### Use inside vscode\n\nOpen your PHP file and add breakpoints. To do so, click on the line in your code where you want the browser to need to stop and click on the `Debug` menu then click on `Toggle breakpoint`. A red bullet will appear near the line number:\n\n![Red bullet](./020-working-with-code/045-xdebug/images/xdebug_visual_studio_breakpoints.png)\n\nThen, once your breakpoints are in place, click on the `Debug` menu and click then on `Start Debugging`. You'll see an orange panel like the following one:\n\n![xDebug is running](./020-working-with-code/045-xdebug/images/xdebug_visual_studio_is_running.png)\n\nYou'll also have a new toolbar:\n\n![xDebug toolbar](./020-working-with-code/045-xdebug/images/xdebug_visual_studio_buttons.png)\n\nNow, go back to your web browser and refresh your URL without any change; if your breakpoints are correctly initialized, the browser will be on *pause* and Visual Studio Code will activate the first met breakpoint.\n\n![xDebug has stopped the execution](./020-working-with-code/045-xdebug/images/xdebug_visual_studio_debugging.png)\n\nUse \u003ckbd\u003eF10\u003c/kbd\u003e to go to the next instruction or \u003ckbd\u003eF11\u003c/kbd\u003e to set into the next instruction (if the instruction is a function, go inside the function).\n\n##### Breakpoint\n\nBy adding a breakpoint, it's possible to edit it and set a condition.\n\n![Conditional breakpoint](./020-working-with-code/045-xdebug/images/conditional_breakpoint.gif)\n\n##### Logpoint\n\nInstead of writing here and there `echo '...';` or `console.log(...);` statements, VS Code can do it for us:\n\n![Add a logpoint](./020-working-with-code/045-xdebug/images/logpoint.gif)\n\n##### Debug keyboard shortcuts\n\n* Show the Run pane (that pane contains all your variables so you can see, at runtime, their values): \u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eSHIFT\u003c/kbd\u003e-\u003ckbd\u003eD\u003c/kbd\u003e\n* Toggle breakpoint: \u003ckbd\u003eF9\u003c/kbd\u003e\n* Step Info: \u003ckbd\u003eF11\u003c/kbd\u003e\n* Start / Continue: \u003ckbd\u003eF5\u003c/kbd\u003e\n\n##### Also read\n\nYou can find more information on this repository, from Microsoft: [https://github.com/Microsoft/vscode-recipes/tree/master/PHP](https://github.com/Microsoft/vscode-recipes/tree/master/PHP)\n\n### PHP Formatting {#php-formatting}\n\nIf you already have installed [PHP intelephense](#extensions-php-intelephense), you can retrieve a `Format Document` command in the `Command Palette` (\u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eSHIFT\u003c/kbd\u003e-\u003ckbd\u003eP\u003c/kbd\u003e) but you can't really configure the rules (how the formatting should be done, tabs or spaces, removed unused classes, ...) and for this reason it's probably best to install [PHP-CS-FIXER]](#extensions-php-cs-fixer).\n\nOnce installed, php-cs-fixer will add command like `Fix this file` (\u003ckbd\u003eALT\u003c/kbd\u003e-\u003ckbd\u003eSHIFT\u003c/kbd\u003e-\u003ckbd\u003eF\u003c/kbd\u003e).\n\nphp-cs-fixer can be configured globally (in the `User Settings` (\u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003e,\u003c/kbd\u003e)) or for the Workspace (in this case, create or edit the `/.vscode/settings.json` file in your project).\n\n```json\n{\n    \"php-cs-fixer.executablePath\": \"php-cs-fixer\",\n    \"php-cs-fixer.executablePathWindows\": \"\",\n    \"php-cs-fixer.onsave\": false,\n    \"php-cs-fixer.rules\": \"@PSR2\",\n    \"php-cs-fixer.config\": \".php_cs;.php_cs.dist\",\n    \"php-cs-fixer.allowRisky\": false,\n    \"php-cs-fixer.pathMode\": \"override\",\n    \"php-cs-fixer.exclude\": [],\n    \"php-cs-fixer.autoFixByBracket\": true,\n    \"php-cs-fixer.autoFixBySemicolon\": false,\n    \"php-cs-fixer.formatHtml\": false,\n    \"php-cs-fixer.documentFormattingProvider\": true\n}\n```\n\nBy creating a `.php-cs` file in your root folder, php-cs-fixer will apply rules defined in that file.\n\n### Multiple cursors {#multiple-cursors}\n\nVSCode supports multiple cursors: click here and there and there but just press the \u003ckbd\u003eCTRL\u003c/kbd\u003e key after the first click.\n\nYou'll then have more than one cursor and starting type will do it in any places where a cursor was displayed.\n\nFor instance, you've a list of public functions, click before each `p` of public functions, press the delete key to remove the `public` word, it'll be done for all functions at a time and type now `private`.\n\nYou can also have an enumeration list, one word on each line. Click before each letter and then type `*` to add a bullet before each item.\n\nReally convenient.\n\nThe \u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eD\u003c/kbd\u003e shortcut will select the next occurrence: double-click on, f.i., the `public` word to select the first occurrence. Press \u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eD\u003c/kbd\u003e to select the second, the third, and so on. Press \u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eD\u003c/kbd\u003e again and again to select all occurrences. Then type `private` f.i. to overwrite selections and replace by the new word.\n\nI's not really like a `Search` and `Replace all` since here we can decide how many occurrences we wish to replace. It's more interactive.\n\n#### Insert prefix on each line {#multiple-cursors-insert-prefix}\n\n\u003ckbd\u003eSHIFT\u003c/kbd\u003e-\u003ckbd\u003eALT\u003c/kbd\u003e-\u003ckbd\u003eI\u003c/kbd\u003e allow to enable multiple cursors, a nice use case is to select a bloc of lines and add a bullet so transform lines to a bullet list.\n\nHere is how to do:\n\n1. Select a bloc a line\n2. Press \u003ckbd\u003eSHIFT\u003c/kbd\u003e-\u003ckbd\u003eALT\u003c/kbd\u003e-\u003ckbd\u003eI\u003c/kbd\u003e to enable multiple cursors\n3. Press \u003ckbd\u003eHome\u003c/kbd\u003e to put cursors at the beginning of each lines,\n4. Press \u003ckbd\u003e*\u003c/kbd\u003e followed by a space to transform the list of lines to a bullet list.\n\n![Make a  bullet list](./020-working-with-code/060-multiple-cursors/images/make_bullet_list.gif)\n\n### Navigate between problems\n\nThe list of problems detected by VS Code is displayed in a tab at the bottom of the screen, below the main editor.\n\nYou can see the list of problems and navigate between each of them by just pressing \u003ckbd\u003eF8\u003c/kbd\u003e.\n\n### Regions\n\n`Regions` are a very smart features to make code editing more readable.\n\nConsider the following function:\n\n```php\n\u003c?php\n\nfunction addRows(array $data): array\n{\n    $result = [];\n\n    //region 1. Add row only once for the same surveyId/sessionId\n    foreach ($data as $participant) {\n        // A few dozen lines of code...\n        // A few dozen lines of code...\n        // A few dozen lines of code...\n    }\n\n    //endregion\n\n    //region 2. Add new participants\n    try {\n        // A few dozen lines of code...\n        // A few dozen lines of code...\n        // A few dozen lines of code...\n    } catch (\\Exception $e) {\n        // Handle the exception\n    }\n\n    //endregion\n\n    //region 3. Prepare resulting array\n    // A few dozen lines of code...\n    // A few dozen lines of code...\n    // A few dozen lines of code...\n    // A few dozen lines of code...\n    //endregion\n\n    return $result;\n}\n```\n\nYour function is, logically, divided into three parts; the first to do checks, the second to do the job and the third to prepare the return data.\n\nUsing `regions` inside your function make the code's logic really easy to understand.\n\n![Working with regions](./020-working-with-code/080-regions/images/regions.gif)\n\nA very languages didn't support regions, this is the case for `.env` (aka `dotenv`) files. In that case, you can use this addon: [https://github.com/maptz/maptz.vscode.extensions.customfolding](https://github.com/maptz/maptz.vscode.extensions.customfolding).\n\nAnd now, you can add your own settings like this:\n\n```json\n{\n    \"maptz.regionfolder\": {\n        \"[dotenv]\": {\n            \"foldEnd\": \"### endregion\",\n            \"foldEndRegex\": \"^### endregion[\\\\s]*(.*)\",\n            \"foldStart\": \"### region\",\n            \"foldStartRegex\": \"^### region[\\\\s]*(.*)\",\n            \"disableFolding\": false\n        }\n    }\n}\n```\n\n### vscode configuration\n\nVScode stores his settings, for your project, in the `.vscode` folder in your project's root directory.\n\nIf you don't have that folder, just create it.\n\n#### Suggest a list of extensions to install for your project\n\nJust create a file called `extensions.json` in the `.vscode` folder. In that file, copy/paste something like this:\n\n```json\n{\n    \"recommendations\": [\n        \"aaron-bond.better-comments\",\n        \"bmewburn.vscode-intelephense-client\",\n        \"eamodio.gitlens\",\n        \"gruntfuggly.todo-tree\",\n        \"mikestead.dotenv\",\n        \"ms-azuretools.vscode-docker\",\n        \"ms-vscode-remote.remote-containers\",\n        \"ms-vscode-remote.remote-wsl\",\n        \"neilbrayfield.php-docblocker\",\n        \"xdebug.php-debug\",\n        \"zobo.php-intellisense\"\n    ]\n}\n```\n\nFrom now, everyone who'll open your project **for the first time** will get a popup \"Do you want to install recommended extensions for this project?\". More information at [https://code.visualstudio.com/docs/editor/extension-marketplace#_workspace-recommended-extensions](https://code.visualstudio.com/docs/editor/extension-marketplace#_workspace-recommended-extensions)\n\n## Refactoring\n\n### Renaming\n\n\u003e https://marketplace.visualstudio.com/items?itemName=st-pham.php-refactor-tool\n\nFor PHP, for install the `PHP Refactor Tool` addon.\n\n#### a symbol\n\n1. Select a property,\n2. Press \u003ckbd\u003eF2\u003c/kbd\u003e (or choose `Rename Symbol` in the Command palette (press \u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eSHIFT\u003c/kbd\u003e-\u003ckbd\u003eP\u003c/kbd\u003e))\n3. Rename the property\n4. Select `Update Getter name and Setter name`\n5. Press \u003ckbd\u003eEnter\u003c/kbd\u003e\n\n![Renaming a symbol](./030-refactoring/010-rename/images/rename_symbol.gif)\n\nThanks to `PHP Refactor Tool`, all occurrences of the property will be renamed, the getter and the setter and everywhere these functions were used too. In all files of your project.\n\n#### a class\n\nAnywhere in your code (in the class itself or where you use it), select the class name, press \u003ckbd\u003eF2\u003c/kbd\u003e, rename it and press \u003ckbd\u003eEnter\u003c/kbd\u003e.\n\nThe name will be changed everywhere, the name of the file will be changed too as you can see here below.\n\n![Renaming a class](./030-refactoring/010-rename/images/rename_class.gif)\n\n### Extract to a new method\n\n\u003e [https://marketplace.visualstudio.com/items?itemName=marsl.vscode-php-refactoring](https://marketplace.visualstudio.com/items?itemName=marsl.vscode-php-refactoring)\n\nIn a long method, select a block of lines, open the `Command Palette` and run `Extract to a new method`. Then give a name and press \u003ckbd\u003eEnter\u003c/kbd\u003e. The method will be created and the extension will pass local variabled if needed to the new method and, if the method initialize a variable, that variable will be returned.\n\n![Extract to a new method](./030-refactoring/020-extract-new-method/images/extract-new-method.gif)\n\n## Some settings {#settings}\n\n### Editor settings {#settings-editor}\n\nAdapts the size of the font used:\n\n```json\n{\n    \"editor.fontSize\": 18\n}\n```\n\nFormat the code during a copy/paste:\n\n```json\n{\n    \"editor.formatOnPaste\": true\n}\n```\n\nFormat the code when saving:\n\n```json\n{\n    \"editor.formatOnSave\": true\n}\n```\n\nIndentation: tabs or spaces? `true` for spaces, `false` for tabs:\n\n```json\n{\n    \"editor.insertSpaces\": false\n}\n```\n\nStop displaying the list of open files (top left):\n\n```json\n{\n    \"explorer.openEditors.visible\": 0\n}\n```\n\nDisplay a grayed out \"dot\" to make spaces visible:\n\n```json\n{\n    \"editor.renderWhitespace\": \"all\"\n}\n```\n\nWhen using snippets, pressing the Tab key will activate the conversion from the shortcut to the content of the snippet:\n\n```json\n{\n    \"editor.tabCompletion\": true\n}\n```\n\nSet the width of a tabulation:\n\n```json\n{\n    \"editor.tabSize\": 3\n}\n```\n\n### Files settings {#settings-files}\n\nAssociating certain extensions with programming languages:\n\n```json\n{\n    \"files.associations\": {\n        \".frm\": \"html\",\n        \".php-cs\": \"php\"\n    }\n}\n```\n\nSpecifies the default language for new :\n\n```json\n{\n    \"files.defaultLanguage\": \"PHP\"\n}\n```\n\nSpecifies the default format for CRLF (Windows) or LF (Unix) files:\n\n```json\n{\n    \"files.eol\": \"\\n\"\n}\n```\n\nIf you don't want to see certain files / folders in your :\n\n```json\n{\n    \"files.exclude\": {\n        \"**/.DS_Store\": true,\n        \"**/.git\": true,\n        \"**/.hg\": true,\n        \"**/.svn\": true,\n        \"**/CVS\": true,\n        \"**/libs/**\": true\n    }\n}\n```\n\n### Search settings {#settings-search}\n\nIf you want the search feature to ignore certain files / folders :\n\n```json\n{\n    \"search.exclude\": {\n        \"**/bower_components\": true,\n        \"**/node_modules\": true,\n        \"**/libs/**\": true\n    }\n}\n```\n\n### Telemetry settings {#settings-telemetry}\n\nDisables telemetry to Microsoft:\n\n```json\n{\n    \"telemetry.enableCrashReporter\": false,\n    \"telemetry.enableTelemetry\": false\n}\n```\n\n### Window settings {#settings-window}\n\nWhen you open a file and then open another one without modifying the first one, the editor will open the second file in the same tab; the first file will then be closed.\n\nIf you want to open each time in a new tab, you have to adapt the parameter below:\n\n```json\n{\n    \"window.openFilesInNewWindow\": \"on\"\n}\n```\n\nChanges the zoom level:\n\n```json\n{\n    \"window.zoomLevel\": 5\n}\n```\n\n### Workbench settings {#settings-workbench}\n\nDon't display the vertical menu bar on the left side which includes icons for files, search, Git, ...:\n\n```json\n{\n    \"workbench.activityBar.visible\": false\n}\n```\n\nStop displaying the status bar that appears at the bottom of the screen :\n\n```json\n{\n    \"workbench.statusBar.visible\": false\n}\n```\n\n## Extensions {#extensions}\n\nSome extensions that will be useful for any PHP developer.\n\n### Unneeded extensions\n\nUnneeded because vscode can do the same natively... After each names here below, the setting to enable in VSCode, somes are already enabled by default:\n\n* [Auto Close Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag)\n    * `\"html.autoClosingTags\": true,`\n    * `\"javascript.autoClosingTags\": true,`\n    * `\"typescript.autoClosingTags\": true`\n* [Auto Import](https://marketplace.visualstudio.com/items?itemName=steoates.autoimport)\n    * `\"javascript.suggest.autoImports\": true,`\n    * `\"typescript.suggest.autoImports\": true,`\n    * `\"javascript.updateImportsOnFileMove.enabled\": \"always\",`\n    * `\"typescript.updateImportsOnFileMove.enabled\": \"always\",`\n* [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)\n    * `\"editor.renameOnType\":true`\n* [Settings Sync](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync)\n    * See [https://code.visualstudio.com/updates/v1_48#_settings-sync](https://code.visualstudio.com/updates/v1_48#_settings-sync)\n\n### Get the list of all installed extensions {extensions-list-extensions}\n\nYou can use vscode on the command line with the `--list-extensions` option to retrieve the list of all installed extensions.\n\nOpen a DOS Prompt Session and run `code --list-extensions`. You'll get a list like below:\n\n```text\naaron-bond.better-comments\nalefragnani.Bookmarks\nbajdzis.vscode-twig-pack\nbmewburn.vscode-intelephense-client\nbobmagicii.autofoldyeah\ncalebporzio.better-phpunit\n...\n```\n\nBy running a `Windows Powershell` prompt, you can quickly generate a list of vscode instructions to install all these extensions. Start `Windows Powershell` and run the following command:\n\n```powershell\ncode --list-extensions | % { \"code --install-extension $_\" }\n```\n\nYou'll get a list like below:\n\n```text\ncode --install-extension aaron-bond.better-comments\ncode --install-extension alefragnani.Bookmarks\ncode --install-extension bajdzis.vscode-twig-pack\ncode --install-extension bmewburn.vscode-intelephense-client\ncode --install-extension bobmagicii.autofoldyeah\ncode --install-extension calebporzio.better-phpunit\n...\n```\n\n![List of all installed extensions](./070-extensions/images/code-list-extensions.png)\n\nJust copy/paste the full output and, f.i. send it by mail to someone. He'll just need to paste the list in a DOS Prompt Session to install them.\n\n### Bash -  Shellscript {#extensions-sh}\n\n#### Shell-format {#extensions-shell-format}\n\n\u003e [https://marketplace.visualstudio.com/items?itemName=foxundermoon.shell-format](https://marketplace.visualstudio.com/items?itemName=foxundermoon.shell-format)\n\nLinter for `.sh` scripts.\n\n#### Shellman {#extensions-shellman}\n\n\u003e [https://marketplace.visualstudio.com/items?itemName=Remisa.shellman](https://marketplace.visualstudio.com/items?itemName=Remisa.shellman)\n\nShellman provides an impressive list of snippets for Bash. Just start to type something in your code and Shellman will display snippets. Really easy.\n\nThe list of supported commands can be retrieved here: [https://github.com/yousefvand/shellman/blob/HEAD/COMMANDS.md](https://github.com/yousefvand/shellman/blob/HEAD/COMMANDS.md)\n\n### Extend core features of Visual Studio Code {#extensions-core}\n\n#### Active File In StatusBar {#extensions-active-file-statusbar}\n\n\u003e [https://marketplace.visualstudio.com/items?itemName=RoscoP.ActiveFileInStatusBar](https://marketplace.visualstudio.com/items?itemName=RoscoP.ActiveFileInStatusBar)\n\nDisplays the full name of the file being edited at the bottom of the screen and allows, for example, to copy/paste its name by clicking on it.\n\n![Active file in status bar](./070-extensions/core/active_file/images/ActiveFileInStatusBar.gif)\n\n#### Autofold {#extensions-autofold}\n\n\u003e [https://marketplace.visualstudio.com/items?itemName=bobmagicii.autofoldyeah](https://marketplace.visualstudio.com/items?itemName=bobmagicii.autofoldyeah)\n\nBy opening a file, the autofold extension can automatically collapse docblocks, functions, ...\n\nThe level (collapse all, from the second, third, ... level) can be configured for each file extension separately.\n\nHere is a sample: by opening that source file, comments and function code is collapsing automatically, we've directly a better view on what that file is doing.\n\n![Autofold](./070-extensions/core/autofold/images/autofold.png)\n\n#### Better comments {#extensions-better-comments}\n\n\u003e [https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments)\n\nThe Better Comments extension will help you create more human-friendly comments in your code.\n\n![Better comments](./070-extensions/core/better-comments/images/better-comments.png)\n\n#### Bookmarks {#extensions-bookmarks}\n\n\u003e [https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks](https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks)\n\nAllows you to put files in a bookmark folder, displayed in the icon bar on the left. This allows you to jump very quickly to a file, to a specific line (which would have been bookmarked).\n\n#### Bracket Pair Colorizer {#extensions-bracket-pair-colorizer}\n\n**NO MORE REQUIRED, NOW CORE IN VSCODE 1.60: [https://code.visualstudio.com/updates/v1_60#_high-performance-bracket-pair-colorization](https://code.visualstudio.com/updates/v1_60#_high-performance-bracket-pair-colorization)**\n\n#### Change case {#extensions-change-case}\n\n\u003e [https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case](https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case)\n\nEasily change the case of variable names; like switching to pascal case, camelCase, CONSTANT, ...\n\n![Change case](./070-extensions/core/change-case/images/change-case.gif)\n\n#### Code runner {#extension-code-runner}\n\n\u003e [https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner](https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner)\n\nWith Code runner, open a supported code source (like PHP or Python) and press  \u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eSHIFT\u003c/kbd\u003e-\u003ckbd\u003eR\u003c/kbd\u003e to run that code and get the result in the console. You even don't need to save the file.\n\n![Code run](./070-extensions/core/code-runner/images/code-run.gif)\n\n#### Code Spell Checker {#extensions-code-spell-checker}\n\n\u003e [https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)\n\nA basic spell checker that works well with camelCase code.\n\nThe goal of this spell checker is to help catch common spelling errors while keeping the number of false positives low.\n\n![Code Spell Checker](./070-extensions/core/code-spell-checker/images/example.gif)\n\n#### Compare Folders {#extensions-compare-folders}\n\n\u003e [https://marketplace.visualstudio.com/items?itemName=moshfeu.compare-folders](https://marketplace.visualstudio.com/items?itemName=moshfeu.compare-folders)\n\nYou'll not need `winMerge` (Windows) anymore.\n\nJust select the two files (or folders) you want to compare, make a right click on a file and select `Compare Selected`.\n\n![Compare Folders](./070-extensions/core/compare-folders/images/compare-folders.png)\n\n#### Docker {#docker}\n\n\u003e [https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker)\n\nMicrosoft extension for Docker that will make working with Docker easier.\n\n![Docker](./070-extensions/core/docker/images/docker.gif)\n\nYou'll get a new button in the left navigation sidebar to see a lot of features like getting the list of running containers (with start / stop / remove actions), the list of images, the list of volumes, ...\n\nYou'll also get linting feature for files like `Dockerfile` or `docker-compose.yml` and many more.\n\n#### Docker explorer {#docker-explorer}\n\n\u003e [https://marketplace.visualstudio.com/items?itemName=formulahendry.docker-explorer](https://marketplace.visualstudio.com/items?itemName=formulahendry.docker-explorer)\n\nThis extension will allows you to code inside a container, what Microsoft called `Remote containers`.\n\nYou'll need to have a `.devcontainer.json` file for this (see [https://code.visualstudio.com/docs/remote/remote-overview](https://code.visualstudio.com/docs/remote/remote-overview)).\n\nWhen installed, as soon as the `devcontainer.json` file is detected by vscode, you'll be prompted to reopen the project remotely. You can also press \u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eSHIFT\u003c/kbd\u003e-\u003ckbd\u003eP\u003c/kbd\u003e to open the *Command Palette* and select `Remote-Containers: Reopen in Container`.\n\n#### EditorConfig {#extensions-editorconfig}\n\n\u003e [https://github.com/editorconfig/editorconfig-vscode](https://github.com/editorconfig/editorconfig-vscode)\n\nEditorConfig extension for Visual Studio Code [https://editorconfig.org/](https://editorconfig.org/)\n\n#### Favorites {#extensions-favorites}\n\n\u003e [https://marketplace.visualstudio.com/items?itemName=kdcro101.favorites](https://marketplace.visualstudio.com/items?itemName=kdcro101.favorites)\n\nAllows you to group shortcuts to files that, for example, you often have to open.\n\n![Favorites](./070-extensions/core/favorites/images/favorites.jpg)\n\n#### git-project-manager {#extensions-git-project-manager}\n\n\u003e [https://github.com/felipecaputo/git-project-manager](https://github.com/felipecaputo/git-project-manager)\n\nA Git Project Manager extension for vsCode.\n\nUsing GPM, it's now really easy to open a project: just press \u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eP\u003c/kbd\u003e to open the Command Palette and select `GPM: Open Git Project`. Then you'll get the list of all folders on your disk with Git repositories.\n\nFirst, you'll need to configure the `gitProjectManager.baseProjectsFolders` setting with the list of directories with your project; let's say `C:\\Christophe\\Repository`. You can mention several folders if you desire to.\n\nYou can also specify a root folder and playing with the `gitProjectManager.maxDepthRecursion` setting, you can define the recursion (*the higher the number, the slower the system will be to retrieve the list of projects*).\n\n```json\n{\n    \"gitProjectManager.baseProjectsFolders\": [\n        \"C:\\\\Christophe\\\\Repository\"\n    ],\n    \"gitProjectManager.storeRepositoriesBetweenSessions\": true,\n    \"gitProjectManager.ignoredFolders\": [\"node_modules\",\"vendor\"],\n    \"gitProjectManager.maxDepthRecursion\": 2,\n    \"gitProjectManager.checkRemoteOrigin\": false,\n    \"gitProjectManager.openInNewWindow\": false\n}\n```\n\n![git-project-manager](./070-extensions/core/git-project-manager/images/GPM.gif)\n\n#### Gitlens {#extensions-gitlens}\n\n\u003e [https://github.com/eamodio/vscode-gitlens](https://github.com/eamodio/vscode-gitlens)\n\nSupercharge the Git capabilities built into Visual Studio Code — Visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more\n\n![GitLens](./070-extensions/core/gitlens/images/gitlens-preview.gif)\n\n#### Vscode Google Translate {#extensions-google-translate}\n\n\u003e [https://marketplace.visualstudio.com/items?itemName=funkyremi.vscode-google-translate](https://marketplace.visualstudio.com/items?itemName=funkyremi.vscode-google-translate)\n\nQuickly translate text right in your code.\n\n![Translate](./070-extensions/core/google-translate/images/translate.gif)\n\n##### Configuration Google Translate\n\nBy setting your preferred language, you'll not be prompted each time about the target language.\n\n```json\n{\n    \"vscodeGoogleTranslate.preferredLanguage\": \"fr\"\n}\n```\n\nAlso, it's best to assign keyboard shortcut like \u003ckbd\u003eALT\u003c/kbd\u003e-\u003ckbd\u003eSHIFT\u003c/kbd\u003e-\u003ckbd\u003eT\u003c/kbd\u003e to translate the text.\n\n```json\n{\n    \"key\": \"shift+alt+t\",\n    \"command\": \"extension.translateTextPreferred\"\n}\n```\n\n#### Coloring of source codes according to the language {#extensions-highlight}\n\n##### Apache configuration file {#highlight-apache}\n\n\u003e [https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-apache](https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-apache)\n\nSupport (coloring) Apache files such as `.htaccess`, `.htpasswd`, `.conf` and `.htgroups`.\n\n![Apache coloring](./070-extensions/core/highlight/apache/images/apache.png)\n\n##### Log File Highlighter {#extensions_log-file-highlighter}\n\n\u003e [https://marketplace.visualstudio.com/items?itemName=emilast.LogFileHighlighter](https://marketplace.visualstudio.com/items?itemName=emilast.LogFileHighlighter)\n\nLog file highlight.\n\n![logfile_highlight.png](./070-extensions/core/highlight/log-file-highlighter/images/logfile_highlight.png)\n\n#### LanguageTool {#extensions-code-spell-checker}\n\n\u003e [Based on the French *Utiliser languagetool dans Visual Studio Code* article](https://blog.stephane-robert.info/post/langagetool-visual-studio-code/)\n\nLanguageTool is an addon for vscode using a backend server we can host locally. It's a spelling and grammar tool supporting several languages like English and French but many others too. It has an auto-detect feature.\n\nFirst create a new folder on your disk and put this a file called `docker-compose.yml`. Copy/paste the content below in it. This done, using a command line, run `docker compose up --detach` to download the Docker image and run the container.\n\nYou've your local backend server.\n\n```yml\nversion: \"3\"\n\nservices:\n  languagetool:\n    image: erikvl87/languagetool\n    container_name: LanguageTool\n    restart: always\n    ports:\n      - 8010:8010 #### Using default port from the image\n    environment:\n      - langtool_languageModel=/ngrams #### OPTIONAL: Using ngrams data\n      - Java_Xms=512m #### OPTIONAL: Setting a minimal Java heap size of 512 mib\n      - Java_Xmx=1g #### OPTIONAL: Setting a maximum Java heap size of 1 Gib\n    volumes:\n      - ./ngrams:/ngrams\n```\n\nThe next step is to install the `LanguageTool Linter` of David L. Day: [https://marketplace.visualstudio.com/items?itemName=davidlday.languagetool-linter](https://marketplace.visualstudio.com/items?itemName=davidlday.languagetool-linter)\n\nHere are the settings to add to your vscode `settings.json` file:\n\n```json\n\"languageToolLinter.external.url\": \"http://127.0.0.1:8010\",\n\"languageToolLinter.languageTool.motherTongue\": \"fr\",\n\"languageToolLinter.plainText.languageIds\": [\n    \"plaintext\",\n    \"markdown\"\n]\n```\n\nFeel free of course to add more supported `languageIds`, the full list is available at [https://code.visualstudio.com/docs/languages/identifiers#_known-language-identifiers](https://code.visualstudio.com/docs/languages/identifiers#_known-language-identifiers).\n\n#### Prettier {#extensions-prettier-vscode}\n\n\u003e [https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)\n\nPrettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.\n\n#### Project Manager {#extensions-project-manager}\n\n\u003e [https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager](https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager)\n\nEasily switch between projects.\n\n![Project Manager](./070-extensions/core/project-manager/images/project-manager-list-sort-by-name.png)\n\n#### Rerun the last command {#extensions-terminal-rerun}\n\n[https://marketplace.visualstudio.com/items?itemName=Cameron.rerun-last-command](https://marketplace.visualstudio.com/items?itemName=Cameron.rerun-last-command)\n\nQuickly repeat the last command in your terminal without leaving the text editor.\n\nJust press \u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eF7\u003c/kbd\u003e to rerun it.\n\n![Rerun last command](./070-extensions/core/rerun-last-command/images/demo.gif)\n\n#### REST client {#extensions-rest-client}\n\n\u003e [https://marketplace.visualstudio.com/items?itemName=humao.rest-client](https://marketplace.visualstudio.com/items?itemName=humao.rest-client)\n\nMake easy to debug JSON API without leaving the IDE.\n\n#### Select highlight in minimap {#extensions-select-highlight-minimap}\n\n\u003e [https://marketplace.visualstudio.com/items?itemName=mde.select-highlight-minimap](https://marketplace.visualstudio.com/items?itemName=mde.select-highlight-minimap)\n\nHighlights the selected code (e.g. a function name) in the minimap so that you can quickly identify where in the currently edited file the same function is called.\n\n![Select highlight in minimap](./070-extensions/core/select-highlight-minimap/images/ide.png)\n\n#### Snippet-creator {#extensions-snippet-creator}\n\nThe [snippet-creator](https://marketplace.visualstudio.com/items?itemName=nikitaKunevich.snippet-creator) extension simplifies the creation of a snippet from existing code. Simply select the code already present in a file and then do a \u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eSHIFT\u003c/kbd\u003e-\u003ckbd\u003eP\u003c/kbd\u003e, type `Create Snippet` to call the wizard.\n\n*Note: the extension is actually deprecated (may 2020).*\n\n#### Sort lines {#extensions-sort-lines}\n\n\u003e [https://marketplace.visualstudio.com/items?itemName=Tyriar.sort-lines](https://marketplace.visualstudio.com/items?itemName=Tyriar.sort-lines)\n\nSorts lines of text.\n\n![Sort lines](./070-extensions/core/sort-lines/images/usage-animation.gif)\n\n#### Start any shell {#extensions-start-any-shell}\n\n\u003e [https://github.com/remcoros/vscode-startanyshell](https://github.com/remcoros/vscode-startanyshell)\n\nPress \u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eSHIFT\u003c/kbd\u003e-\u003ckbd\u003eC\u003c/kbd\u003e to start a shell like DOS Prompt, Windows Powershell or Git Bash. The startup folder will be the root of your project.\n\nSo easy to run DOS batch, powershell or Bash scripts or any other commands (git, composer, ...).\n\n![Start any shell](./070-extensions/core/start-any-shell/images/start-any-shell.png)\n\n#### Surround {#extensions-surround}\n\n\u003e [https://marketplace.visualstudio.com/items?itemName=yatki.vscode-surround](https://marketplace.visualstudio.com/items?itemName=yatki.vscode-surround)\n\nWe select a block of lines of code and then, thanks to Surround, we can include it in an `if/else`, `try/catch`, ... The tool indents the code itself.\n\n![VS Code - Surround](./070-extensions/core/surround/images/demo.gif)\n\n#### Syncing {#extensions-syncing}\n\nSynchronization is now (August 2020) part of Visual Studio Code: [https://code.visualstudio.com/docs/editor/settings-sync](https://code.visualstudio.com/docs/editor/settings-sync)\n\n#### TabNine {#extensions-tabnine}\n\nAMAZING code completion extension.\n\nTabNine is using AI to learn how you are using vscode (no matter the used language) and will predict the next words.\n\nThis addon is really a MUST HAVE: [https://marketplace.visualstudio.com/items?itemName=TabNine.tabnine-vscode](https://marketplace.visualstudio.com/items?itemName=TabNine.tabnine-vscode)\n\n#### Thunder client\n\n\u003e A pure wonder\n\nThunder Client is a lightweight Rest API Client Extension for VS Code.\n\n[https://github.com/rangav/thunder-client-support/](https://github.com/rangav/thunder-client-support/)\n\nWithout leaving vscode, you'll be able to test your REST API.\n\n![Thunder client](./070-extensions/core/thunder_client/images/thunder-client.gif)\n\n##### Validate an API against a schema using Thunder Client\n\nImagine you have an API \"How many employees are working in my company\" and returning something like this:\n\n```json\n{\n  \"data\": {\n    \"count\": 6\n  },\n  \"meta\": {\n    \"type\": \"employees\"\n  }\n}\n```\n\nYou can easily generate a JSON schema using [https://www.liquid-technologies.com/online-json-to-schema-converter](https://www.liquid-technologies.com/online-json-to-schema-converter). Just copy/paste your JSON response.\n\nYou'll get a JSON response and remove the first line with `$schema`, so, you'll have:\n\n```json\n{\n  \"type\": \"object\",\n  \"properties\": {\n    \"data\": {\n      \"type\": \"object\",\n      \"properties\": {\n        \"count\": {\n          \"type\": \"integer\"\n        }\n      },\n      \"required\": [\n        \"count\"\n      ]\n    },\n    \"meta\": {\n      \"type\": \"object\",\n      \"properties\": {\n        \"type\": {\n          \"type\": \"string\"\n        }\n      },\n      \"required\": [\n        \"type\"\n      ]\n    }\n  },\n  \"required\": [\n    \"data\",\n    \"meta\"\n  ]\n}\n```\n\nNot so difficult to understand: we have two root level nodes, one for `data` and one for `meta` (these two are mandatory). `data` has a `count` property and his type is `integer` and is required. `meta` has a `type` property and his type is `string`, required too.\n\nSo, we've obtained our JSON schema.\n\nHow schema validation is built in Thunder client is by creating first an environment variable called, f.i., `schema_count`.\n\n![Environment variable](./070-extensions/core/thunder_client/validate_json_schema/images/environment_variable.png)\n\nThis is a one-line string so we'll minify our JSON schema; we'll use [https://codebeautify.org/jsonminifier](https://codebeautify.org/jsonminifier) for this (or any other tool).\n\nCreate your environment variable and, very important, **don't forget to click on the save button each time you need to update the value!**\n\nGo to your Thunder Client request, click on the `Tests` tab and create a new item `ResponseBody`, type `schema` and refer to your variable `{{schema_count}}`.\n\nBy clicking on the `Send` button to execute the request, you should see that your `Response Body schema is valid`.\n\n![Test the schema in our request](./070-extensions/core/thunder_client/validate_json_schema/images/request_test_schema.png)\n\nNote: you also can test your schema using [https://jsonschemalint.com/#!/version/draft-07/markup/json](https://jsonschemalint.com/#!/version/draft-07/markup/json). Just copy your schema and your JSON document in the web interface.\n\n#### Todo Tree {#extensions-todo-tree}\n\n\u003e [https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree)\n\nDisplays an icon on the left side of the screen, in the form of a tree, which allows you to find, in one place, the list of TODOs that you have to make, i.e. comments beginning with `// TODO` that have been encoded in the source files.\n\nA very article about **Todo Tree** explain how to parametrize the extension, add custom tags with custom color and icon.  More info on [https://dev.to/koustav/how-a-vs-code-extension-todo-tree-can-make-your-coding-easier-todo-tree-configuration-and-use-cases-11kc](https://dev.to/koustav/how-a-vs-code-extension-todo-tree-can-make-your-coding-easier-todo-tree-configuration-and-use-cases-11kc).\n\n![Todo Tree](./070-extensions/core/todo-tree/images/screenshot.png)\n\n#### vscode-icons {#extensions-vscode-icons}\n\n\u003e [https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons](https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons)\n\nAdapt the tree-view with the list of files to use an icon associated to the type of file (css, html, php, ...)\n\n![VS Code Icons](./070-extensions/core/vscode-icons/images/screenshot.gif)\n\n### Javascript {#extensions-javascript}\n\n#### ESLint {#extensions-eslint}\n\n\u003e [https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)\n\nJavascript linter\n\n### Markdown {#extensions-markdown}\n\n#### Emoji {#extensions-emoji}\n\n\u003e [https://marketplace.visualstudio.com/items?itemName=perkovec.emoji](https://marketplace.visualstudio.com/items?itemName=perkovec.emoji)\n\nInsert an emoji without leaving the editor. The\n\n![Insert emoji](./070-extensions/markdown/insert-emoji/images/insert-emoji.gif)\n\n#### Markdown All in One {#extensions-markdown-all-in-one}\n\n\u003e [https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one)\n\nImplements keyboard shortcuts for the Markdown language allows the generation of tables of contents, preview, ...\n\n#### Markdownlint {#extensions-markdownlint}\n\n* [https://github.com/DavidAnson/vscode-markdownlint](https://github.com/DavidAnson/vscode-markdownlint)\n\n##### Configuration Markdownlint {#extensions-markdownlint-configuration}\n\nYou can configure markdownlint to ignore some files or some rules.\n\nThe list of rules can be retrieved from [https://github.com/DavidAnson/markdownlint/blob/master/doc/Rules.md](https://github.com/DavidAnson/markdownlint/blob/master/doc/Rules.md).\n\nTo ignore f.i. rules `MD033` and `MD041`, just add the following configuration in your `settings.json` file:\n\n```json\n{\n    \"markdownlint.config\": {\n        \"MD033\": false,\n        \"MD041\": false\n    }\n}\n```\n\nTo ignore files use the `ignore` key:\n\n```json\n{\n    \"markdownlint.config\": {\n        \"ignore\": [\"!**/History.md\"]\n    }\n}\n```\n\nSet your custom rules:\n\n```json\n{\n    \"markdownlint.customRules\": [\"C:\\\\Christophe\\\\.config\\\\.markdownlint.json\"]\n}\n```\n\n### PHP {#extensions-php}\n\n#### Better PHPUnit {#extensions-php-better-phpunit}\n\n\u003e [https://github.com/calebporzio/better-phpunit](https://github.com/calebporzio/better-phpunit)\n\nBetter PHPUnit is the most popular, cleanest, and fastest PHPUnit runner for VS Code.\n\n![Better PHPUnit](./070-extensions/php/better-phpunit/images/demo.gif)\n\n##### Configure\n\nMake sure to edit the `Workspace` settings and add these two keys:\n\n{\n    \"better-phpunit.phpunitBinary\": \"c:\\\\your_project\\\\vendor\\\\bin\\\\phpunit.bat\",\n    \"better-phpunit.xmlConfigFilepath\": \"c:\\\\your_project\\\\phpunit.xml\"\n}\n\nShould be the absolute path to the `phpunit.bat` file and your `phpunit.xml` configuration file.\n\n##### Run a test method\n\n* Place your cursor in/on the method you want to run\n* \u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eSHIFT\u003c/kbd\u003e-\u003ckbd\u003eP\u003c/kbd\u003e to open the `Command Palette`\n* Select: `Better PHPUnit: run` (\u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eK\u003c/kbd\u003e-\u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eR\u003c/kbd\u003e)\n\n##### Run a test file\n\n* \u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eSHIFT\u003c/kbd\u003e-\u003ckbd\u003eP\u003c/kbd\u003e to open the `Command Palette`\n* Select: `Better PHPUnit: run-file` (\u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eK\u003c/kbd\u003e-\u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eF\u003c/kbd\u003e)\n\n##### Run the entire suite\n\n* \u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eSHIFT\u003c/kbd\u003e-\u003ckbd\u003eP\u003c/kbd\u003e to open the `Command Palette`\n* Select: `Better PHPUnit: run suite`\n\n##### Run the previous test\n\n* \u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eSHIFT\u003c/kbd\u003e-\u003ckbd\u003eP\u003c/kbd\u003e to open the `Command Palette`\n* Select: `Better PHPUnit: run previous` (\u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eK\u003c/kbd\u003e-\u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eP\u003c/kbd\u003e)\n\n#### Code-runner {#extensions-php-better-phpunit}\n\n\u003e [https://github.com/formulahendry/vscode-code-runner](https://github.com/formulahendry/vscode-code-runner)\n\nWith code-runner, open a PHP file and just run it from within vscode. Useful to run samples scripts f.i.\n\n##### Configuration Code-runner\n\nBe sure to enable the `fileDirectoryAsCwd` setting. This will force `code-runner` to run the script by first setting the current directory to the one of the PHP file. Needed to make sure your require (like your autoloader) statements can retrieve files.\n\n{\n    \"code-runner.clearPreviousOutput\": true,\n    \"code-runner.defaultLanguage\": \"php\",\n    \"code-runner.enableAppInsights\": false,\n    \"code-runner.fileDirectoryAsCwd\": true\n}\n\n#### PHP intelephense {#extensions-php-intelephense}\n\n\u003e [https://github.com/bmewburn/vscode-intelephense](https://github.com/bmewburn/vscode-intelephense)\n\n##### Configuration PHP intelephense {#extensions-php-intelephense-configuration}\n\nAfter installation, we need to disable the built-in PHP feature of VSCode.\n\n1. Go to the extensions tab (\u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eSHIFT\u003c/kbd\u003e-\u003ckbd\u003eX\u003c/kbd\u003e)\n2. Search for `@builtin php`\n3. Select `PHP Language Features`\n4. Disable it.\n\n#### Laravel Blade Snippets {#extensions-laravel-blade}\n\n\u003e [https://marketplace.visualstudio.com/items?itemName=onecentlin.laravel-blade](https://marketplace.visualstudio.com/items?itemName=onecentlin.laravel-blade)\n\nHelper for working with Laravel Blade templates.\n\n#### PHP-CS-FIXER {#extensions-php-cs-fixer}\n\n\u003e [https://marketplace.visualstudio.com/items?itemName=junstyle.php-cs-fixer](https://marketplace.visualstudio.com/items?itemName=junstyle.php-cs-fixer)\n\nAutomatic correction of the quality of PHP code formatting thanks to quality standards (e.g. PSR2), which can be overloaded through a configuration file.\n\nOnce installed, go to the `Command Palette` (\u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eSHIFT\u003c/kbd\u003e-\u003ckbd\u003eP\u003c/kbd\u003e) and select `php-cs-fixer: fix this file` to correctly format the file.\n\nNote: you can add PHP-CS-FIXER as a global dependency (thus for all your projects) by running `composer require friendsofphp/php-cs-fixer global` on the command line.\n\nphp-cs-fixer is using a `.php-cs` file for his configuration; there are a lot of items that can be configured. See [https://github.com/FriendsOfPHP/PHP-CS-Fixer](https://github.com/FriendsOfPHP/PHP-CS-Fixer) for more information's.\n\n#### PHP DocBlocker {#extensions-php-docblocker}\n\n\u003e [https://marketplace.visualstudio.com/items?itemName=neilbrayfield.php-docblocker](https://marketplace.visualstudio.com/items?itemName=neilbrayfield.php-docblocker)\n\nAllows generating documentation blocks of classes, methods, ...\n\nEssential extension for any PHP programmer because it allows generating docblocks to document methods, properties, constants, ... in a PHP source code.\n\n![PHP DocBlock](./070-extensions/php/php-docblocker/images/php-docblock.gif)\n\n#### PHP Extension Pack {#extensions-php-extension-pack}\n\n\u003e [https://marketplace.visualstudio.com/items?itemName=felixfbecker.php-pack](https://marketplace.visualstudio.com/items?itemName=felixfbecker.php-pack)\n\nIncludes the most important extensions to get you started with PHP development in Visual Studio Code.\n\n#### PHP getters and setters {#extensions-php-getters-setters}\n\n\u003e [https://github.com/phproberto/vscode-php-getters-setters](https://github.com/phproberto/vscode-php-getters-setters)\n\nCreate a new property in your class; right-click on it and choose `Insert PHP Getter \u0026 Setter` to generate PHP code for both actions.\n\nReally easy...\n\n![Insert PHP Getter \u0026 Setter](./070-extensions/php/php-getters-setters/images/insert-php-getter-setter.jpg)\n\nThe extension can be configured (see [https://github.com/phproberto/vscode-php-getters-setters#extension-settings](https://github.com/phproberto/vscode-php-getters-setters#extension-settings)) and, if you wish, you can redefine the code of the Setter for instance (as an example, you can decide not to return the value).\n\n#### PHP IntelliSense {#extensions-php-intellisense}\n\n\u003e [https://marketplace.visualstudio.com/items?itemName=felixfbecker.php-intellisense](https://marketplace.visualstudio.com/items?itemName=felixfbecker.php-intellisense)\n\nAdvanced PHP IntelliSense for Visual Studio Code.\n\n![PHP IntelliSense](./070-extensions/php/php-intellisense/images/signatureHelp.gif)\n\n#### PHP Namespace Resolver {extension-php-namespace-resolver}\n\n\u003e [https://marketplace.visualstudio.com/items?itemName=MehediDracula.php-namespace-resolver](https://marketplace.visualstudio.com/items?itemName=MehediDracula.php-namespace-resolver)\n\nIn a PHP file, right-click on a class name and PHP Namespace Resolver will search where that class is defined (based on your `composer.json` file). If there is only one occurrence, the class will be immediately added in a `use` command. Otherwise, you'll be prompted to select the desired one.\n\n![PHP Namespace Resolver](./070-extensions/php/php-namespace-resolver/images/php-namespace-resolver.gif)\n\n## Tips\n\n### editorconfig\n\n\u003e [https://editorconfig.org](https://editorconfig.org)\n\nJust place a file like the one below in your project folder or **any parent folder**. The file should be named `.editorconfig`.\n\nThere is **nothing** to do in VSCode except installing the [extension](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig). There is no settings... The extension will automatically check for the presence of the `.editorconfig` file in the project folder or any parent folder. If a file is found, if the `root = true` line is in it, the extension knows that this is the final file.\n\nSo we can have a file in our project folder without the root statement for overriding some features and a global file in the parent folder.\n\n```text\n### http://editorconfig.org/\n\n### top-most EditorConfig file\nroot = true\n\n[*]\ncharset = utf-8\nindent_style = spaces\nindent_size = 4\nend_of_line = lf\ntrim_trailing_whitespace = true\ninsert_final_newline = true\n\n[*.md]\ntrim_trailing_whitespace = false\n\n[*.Markdown]\ntrim_trailing_whitespace = false\n```\n\n### Interface\n\n#### Use color to identify projects\n\nColors have to be set in the `.vscode/settings.json` file in the project root folder; example:\n\n```json\n{\n    \"workbench.colorCustomizations\": {\n        \"titleBar.activeBackground\": \"#f3a2bc\",\n        \"titleBar.inactiveBackground\": \"#FF2CCC\",\n        \"titleBar.activeForeground\": \"#0e0b0b\",\n        \"titleBar.inactiveForeground\": \"#FFF000\"\n    }\n}\n```\n\nTo open that setting file, just go to your `Workspace settings` page.\n\n![Interface colors](./080-tips/interface/colors/images/interface_colors.png)\n\nTips:\n\n* Install [Peacock](https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock) to make changes easily. Peacock will use some default schemas or allow to choose a random one.\n* you can use a tool like [https://contrastchecker.com/](https://contrastchecker.com/) to find a good contrast schema.\n* You can also deeper in the configuration of the editor; please take a look to [https://code.visualstudio.com/api/references/theme-color](https://code.visualstudio.com/api/references/theme-color)\n\nHappy coloring 😉\n\n#### Sticky scroll \n\n\u003e [https://dev.to/amrsamy/vs-code-sticky-scroll-2jcd](https://dev.to/amrsamy/vs-code-sticky-scroll-2jcd)\n\nThere is a nice feature called `StickyScroll` you can enable by putting `\"editor.stickyScroll.enabled\": true` in your `settings.json` file.\n\n![Sticky Scroll](./080-tips/interface/stickyScroll/images/stickyscroll.gif)\n\nThe idea is, when you go deeper in a supported language (like Javascript, PHP or Markdown and much more), the name of the parent will be automatically stick on the top of the screen as illustrated in the animation above.\n\nAnother example is this documentation:\n\n![Sticky scroll in markdown](./080-tips/interface/stickyScroll/images/sticky_markdown.png)\n\n### Keyboard shortcuts for Windows\n\n* Cheat sheet for Windows users: [https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf](https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf)\n* [Online and interactive tutorial](https://www.shortcutfoo.com/app/dojos/vscode-win)\n\n### PHP-CS-FIXER {#php-cs-fixer}\n\nThe use of [php-cs-fixer](https://github.com/FriendsOfPHP/PHP-CS-Fixer) can help to maintain a proper code. More info below.\n\n#### Installation {#php-cs-fixer-installation}\n\nInstall [PHP-CS-FIXER](https://github.com/FriendsOfPHP/PHP-CS-Fixer)\u003chttps://github.com/FriendsOfPHP/PHP-CS-Fixer.\u003e\n\nCreate your `php-cs-fixer.php` file and put it there your settings. More info below.\n\nOpen VSCode, go to the settings page (press \u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003e,\u003c/kbd\u003e), search for `php-cs-fixer.config` and initialize the settings to the path of your `php-cs-fixer.php` (f.i. `C:\\\\config\\\\php-cs-fixer.php`).\n\n#### Remove unused imports {#php-cs-fixer-no-unused-imports}\n\nThe `no_unused_imports` setting, when set to `true`, allow php-cs-fixer to detect unused imports like below and to remove it automatically.\n\n```php\n\u003c?php\n\nrequire 'vendor/autoload.php';\n\nuse Avonture\\Pandoc;\n\necho __DIR__;\n```\n\nThis is done when you'll save your file.\n\n```php\n\u003c?php\nreturn PhpCsFixer\\Config::create()\n    -\u003esetRules([\n        'no_unused_imports'=\u003e true\n    ]);\n```\n\n### Reduce the load time of vscode\n\nYou've installed some addons and at given time period, you're suffering on *Damned, vscode takes a lot of time to load my project*.\n\nPress \u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eP\u003c/kbd\u003e to open the palette and run `Developer: Show Running Extensions`.\n\nYou'll get a screen like the one below, extensions are ordered by the slowest one.\n\nIn my case, I like to use `Compare Folders` but no so often so it's best to disabled it and enable it again only on a need base. Same for `Code Runner`. By disabling these two, I earn 4 seconds each time I start vscode a day (and I start it so much for all my projects).\n\n![Show Running Extensions](./080-tips/reduce_load_time/images/activation_time.png)\n\n#### Loading from a WSL2 prompt is slow\n\n\u003e [https://stackoverflow.com/questions/66310913/vscode-with-wsl2-delayed-launching-due-to-no-response-to-ping](https://stackoverflow.com/questions/66310913/vscode-with-wsl2-delayed-launching-due-to-no-response-to-ping)\n\u003e [https://github.com/microsoft/vscode-remote-release/issues/4888](https://github.com/microsoft/vscode-remote-release/issues/4888)\n\nIf, running `code .` from a WSL2 prompt is slow, try to set the `remote.WSL.server.connectThroughLocalhost` global setting to `true`.\n\nThe problem comes from an internal ping done by VSCode on the IP of your machine and in some situation like working on a virtual machine, the ping will be blocked and vscode will wait one minute before throwing a timeout.\n\nLoosing that minute of time can be avoided thanks the `remote.WSL.server.connectThroughLocalhost` setting.\n\n### Search and replace - Regex\n\n#### Remove all lines starting with \n\nImagine you want to remove all commented lines and the character used for comments is a `#` so you want to remove lines starting with `#`.\n\n* Search `^#.*[\\n|\\r]*`\n* Replace by *let this field empty*\n\nThe regex means: \n\n* `^#`: we want all lines starting with `#`\n* `.*`: followed by any character\n* `[\\n|\\r]*`: and followed by one or more carriage return / linefeed.\n\n#### Remove all empty lines\n\n\u003e [https://dev.to/gyurisc/easily-remove-empty-lines-using-regular-expression-in-visual-studio-code-1230](https://dev.to/gyurisc/easily-remove-empty-lines-using-regular-expression-in-visual-studio-code-1230)\n\n* Search `^(?:[\\t]*(?:\\r?\\n|\\r))+`\n* Replace by *let this field empty*\n\n![Remove all empty lines](./080-tips/regex/images/replace_empty_lines.png)\n\n#### Remove all lines except those matching a regex\n\nImagine you've a big JSON file with f.i. a list of users like this:\n\n```json\n[\n    {\n        \"name\": \"Leanne Graham\",\n        \"username\": \"Bret\",\n        \"email\": \"Sincere@april.biz\"\n    },\n    {\n        \"name\": \"Ervin Howell\",\n        \"username\": \"Antonette\",\n        \"email\": \"Shanna@melissa.tv\"\n    },\n    {\n        \"name\": \"Clementine Bauch\",\n        \"username\": \"Samantha\",\n        \"email\": \"Nathan@yesenia.net\"\n    },\n    {\n        \"name\": \"Patricia Lebsack\",\n        \"username\": \"Karianne\",\n        \"email\": \"Julianne.OConner@kory.org\"\n    },\n    {\n        \"name\": \"Chelsey Dietrich\",\n        \"username\": \"Kamren\",\n        \"email\": \"Lucio_Hettinger@annie.ca\"\n    }\n]\n```\n\nFrom that list you wish to keep only lines with emails.\n\nThe idea is to use a regex expression so we can match email lines and use a negative search so not email lines are selected:\n\nTo match email lines (with the carriage return at the end), we'll use `.*email.*\\n`.\n\nFor the use case, we'll search for `.*email.*\\n` and replace by nothing: emails lines will be removed in the entire file.\n\n![Search and replace](./080-tips/regex/images/search_replace_regex.gif)\n\nUsing the negative regex `^(?!.*email).*$\\n` will match all lines except the ones containing the email word and, here too, if we search and replace by nothing, we'll remove all lines except emails:\n\n![Search and replace negative regex](./080-tips/regex/images/search_replace_negative_regex.gif)\n\n\u003c!-- markdownlint-disable MD033 --\u003e\n\n### Custom tasks {#custom-tasks}\n\n\u003e [https://code.visualstudio.com/docs/editor/tasks](https://code.visualstudio.com/docs/editor/tasks)\n\u003e\n\u003e [https://code.visualstudio.com/docs/editor/variables-reference](https://code.visualstudio.com/docs/editor/variables-reference)\n\nBy creating a  `./.vscode/tasks.json`, it's possible to add custom tasks to Visual Studio Code.\n\nA custom task can be running PHP Unit tests or any other shell commands.\n\n#### Run a DOS batch {#custom-tasks-batch}\n\nThe following example define a task called `concat-md`, it's a shell command (i.e. a DOS task).\n\n```json\n{\n    \"version\": \"2.0.0\",\n    \"tasks\": [\n        {\n            \"label\": \"concat-md\",\n            \"type\": \"shell\",\n            \"command\": \"${workspaceFolder}/concat-md.cmd\",\n            \"group\": \"build\",\n            \"presentation\": {\n                \"reveal\": \"always\"\n            },\n            \"problemMatcher\": []\n        }\n    ]\n}\n```\n\nNote: `${workspaceFolder}` has been used instead of just `./concat-md.cmd` to make sure vscode will use the file from the repo's root folder.\n\nTo run that task, we just need to call the `Command Palette` (\u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eSHIFT\u003c/kbd\u003e-\u003ckbd\u003eP\u003c/kbd\u003e) then select `Tasks: Run task`. You'll then be prompted to select the task and `concat-md` will appear.\n\nAll your custom tasks will be accessible in the `Tasks: Run task` list.\n\nTip: it's possible to specify more than one command using the `\u0026\u0026` syntax; f.i. `\"command\": \"cd tests/ \u0026\u0026 run_all.cmd\",`\n\n![Running the pre-commit custom task](./080-tips/tasks/images/pre-commit.gif)\n\n#### Run PHP-Unit {#custom-tasks-phpunit}\n\nAnother example can be to run PHP Unit with some command-line options.\n\nThe example below defines a `phpunit: run tests\\Api` task so we can execute all tests under the `Api` folder. We can of course use any command line options supported by PHP Unit.\n\n```json\n{\n\t\"version\": \"2.0.0\",\n\t\"tasks\": [\n        {\n            \"label\": \"phpunit: run tests\\\\Api\",\n            \"type\": \"process\",\n            \"command\": \"${workspaceFolder}\\\\vendor\\\\bin\\\\phpunit.bat\",\n            \"args\": [\n                \"${workspaceFolder}\\\\tests\\\\Api\"\n            ],\n            \"presentation\": {\n                \"echo\": true,\n                \"panel\":\"new\"\n            },\n            \"problemMatcher\": []\n        }\n    ]\n}\n```\n\nNote: the `type` defined in the JSON file is `process`, this means that the defined `command` will be executed within vscode, in the `Terminal`. The process should then be an executable and any parameters have to be defined in the `args` array;\n\n#### Fire the task automatically when the project is opened in vscode {#task-autorun}\n\nWhen you define a task with the following setting, that task can be fired automatically by VSCode during the opening of the editor.\n\n```json\n\"runOptions\": {\n    \"runOn\": \"folderOpen\"\n}\n```\n\nIn the complete example below, the `docker-up.bat` is a DOS script that will set-up `Docker` for my project.\n\n```json\n{\n    \"label\": \"Docker-up \",\n    \"type\": \"shell\",\n    \"command\": \"docker-up.bat\",\n    \"problemMatcher\": [],\n    \"presentation\": {\n        \"echo\": true,\n        \"reveal\": \"always\",\n        \"focus\": false,\n        \"panel\": \"dedicated\",\n        \"showReuseMessage\": true,\n        \"clear\": true\n    },\n    \"runOptions\": {\n        \"runOn\": \"folderOpen\"\n    }\n}\n```\n\nIn VSCode, we need to\n\n1. Press \u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eSHIFT\u003c/kbd\u003e-\u003ckbd\u003eP\u003c/kbd\u003e to open the `Command Palette`.\n2. Search for `Tasks: Manage Auotomatic Tasks in Folder`,\n3. Select `Allow Automatic Tasks in Folder`\n\nSo we allow VSCode to run automatic tasks for that project.\n\nThen:\n\n1. Press \u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eSHIFT\u003c/kbd\u003e-\u003ckbd\u003eP\u003c/kbd\u003e to open the `Command Palette`.\n2. Search for `Tasks: Run Task`,\n3. and select our task\n\nThe task will be fired.\n\nClose VScode and open it again and check your console, the task has been fired automagically.\n\n## Troubleshooting {#troubleshooting}\n\n### Intelephense {#troubleshooting-intelephense}\n\nIn order to avoid errors with `Intelephense` like `Undefined function xxx` (f.i. `trim`) or `Undefined type xxx` (f.i. `stdClass`) for core PHP features, make sure to specify in your `settings.json`  file the correct PHP version you're using.\n\n```json\n\"intelephense.environment.phpVersion\": \"7.4.4\"\n```\n\nThat version should match the one you've defined in the `PHPBIN` environment variable:\n\n![PHPBIN](./090-troubleshooting/Intelephense/images/phpbin.png)\n\n### Phan {#troubleshooting-phan}\n\nMake sure to specify in your `settings.json` file the PHP version you're using:\n\n```json\n\"phan.phpExecutablePath\": \"\"C:\\\\wamp64\\\\bin\\\\php\\\\php7.4.4\\\\php.exe\"\n```\n\nThat version should match the one you've defined in the `PHPBIN` environment variable:\n\n![PHPBIN](./090-troubleshooting/phan/images/phpbin.png)\n\n### PHP-CS-FIXER {#troubleshooting-php-cs-fixer}\n\n#### PHP General Error {#troubleshooting-php-cs-fixer-php-general-error}\n\nBy calling a PHP-CS-FIXER function like running `Fix this file` (\u003ckbd\u003eALT\u003c/kbd\u003e-\u003ckbd\u003eSHIFT\u003c/kbd\u003e-\u003ckbd\u003eF\u003c/kbd\u003e), you can get the following error:\n\n![PHP General Error](./090-troubleshooting/php-cs-fixer/images/php-general-error.png)\n\nTo get more information, make sure to display the `Developer Tools` (\u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eSHIFT\u003c/kbd\u003e-\u003ckbd\u003eI\u003c/kbd\u003e) in the `Help` menu. You'll get there extra information's.\n\n![Console](./090-troubleshooting/php-cs-fixer/images/console.png)\n\nAs we can see here above, our PHP-CS-FIXER needs to be updated: we're using a more recent version of PHP and the maximum supported by the current PHP-CS-FIXER installed version is an old one.\n\n## Create your own extension {#own-extension}\n\n\u003e [https://www.youtube.com/watch?v=srwsnNhiqv8](https://www.youtube.com/watch?v=srwsnNhiqv8)\n\u003e\n\u003e [https://code.visualstudio.com/api/get-started/your-first-extension](https://code.visualstudio.com/api/get-started/your-first-extension)\n\nIt's quite easy to create his own extension by the use of `Yo Code - Extension Generator`.\n\nThe [YouTube video](https://www.youtube.com/watch?v=srwsnNhiqv8) is showing how to create a snippet extension. Really easy!\n\n## Using vscode on the web {#vscode-dev}\n\nVisual Studio code can be used directly from the web i.e. nothing to install on your machine.\n\nGo to [https://vscode.dev](https://vscode.dev) to start the journey.\n\nYou can also go to any github repository like f.i. [https://github.com/cavo789/vscode_tips](https://github.com/cavo789/vscode_tips) and edit the URL: add `vscode.dev/` as the domain name so edit the URL so it becomes [https://vscode.dev/github.com/cavo789/vscode_tips](https://vscode.dev/github.com/cavo789/vscode_tips). That repository will be opened in vscode.dev.\n\nEven stronger: press the **dot** touch on your keywoard, vscode will also be opened. Here, the URL will be [https://github.dev/cavo789/vscode_tips](https://github.dev/cavo789/vscode_tips) (and not vscode.dev/). See the youtube demo at [https://www.youtube.com/watch?v=ywUZOOzLX3c](https://www.youtube.com/watch?v=ywUZOOzLX3c).\n\n## Bookmarks\n\nList of nice website for learning VS Code.\n\n### Free course - VS Code Tutorial - Be More Productive\n\n\u003e [https://www.youtube.com/watch?v=heXQnM99oAI](https://www.youtube.com/watch?v=heXQnM99oAI)\n\n⭐️ Contents ⭐️\n\n- #01: Welcome to Productive VS Code\n- #02: How I Use VS Code To Be Productive\n- #03: Installing VS Code\n- #04: A Tour of VS Code's UI\n- #05: VS Code's #1 Essential Tool: The Command Palette\n- #06: VS Code Themes and Icon Themes\n- #07: 20 Best VS Code Themes\n- #08: VS Code Fonts and Important Font Settings\n- #09: My 5 Favorite Coding Fonts\n- #10: Important VS Code Appearance Settings\n- #11: Intro to Get to Know VS Code\n- #12: VS Code's Explorer: Your Home Base\n- #13: VS Code's Editor Area: Where Magic Happens\n- #14: VS Code's IntelliSense: The Smartest Helper\n- #15: Find and Replace All the Things in VS Code\n- #16: Refactoring in VS Code\n- #17: Extensions and Customization in VS Code\n- #18: Settings Sync in VS Code\n- #19: Using Snippets in VS Code\n- #20: Using Emmet in VS Code\n- #21: VS Code's Command Line Tools\n- #22: Get Started w/ HTML \u0026 CSS in VS Code\n- #23: 5 Best HTML/CSS Extensions for VS Code\n- #24: Using node and npm in VS Code\n- #25: Using JavaScript in VS Code\n- #26: Using ESLint in VS Code\n- #27: The Best JavaScript Extensions for VS Code\n- #28: Using React in VS Code + 2 Best Extensions\n- #29: Using Vue.js in VS Code + 3 Best Extensions\n- #30: Using Tailwind in VS Code + 3 Best Extensions\n- #31: Using Markdown in VS Code + 3 Best Extensions\n- #32: PHP and Laravel in VS Code + 7 Best Extensions\n- #33: Quick Ways to Make VS Code Look Good\n- #34: The Starting Point for VS Code Workflows\n- #35: Minimalism in VS Code\n- #36: Using the Terminal in VS Code\n- #37: Using Git and GitHub in VS Code\n- #38: 5 Best Git Extensions for VS Code\n- #39: Using Multiple Projects in VS Code\n- #40: Autosave and Autoformat in VS Code: An Awesome Combo\n- #41: Get a Browser in VS Code with Browser Preview\n- #42: Getting Started w/ Keyboard Shortcuts in VS Code\n- #43: Basic Editing Shortcuts in VS Code\n- #44: Navigating Around VS Code w/ Keyboard Shortcuts\n- #45: Multi Cursor: My Favorite Feature\n- #46: Keyboard Shortcuts for VS Code's UI\n- #47: Keyboard Shortcuts Cheat Sheet for VS Code\n- #48: GitHub Pull Requests and Issues in VS Code\n- #49: Editing GitHub Remote Repos in VS Code\n- #50: Calling APIs in VS Code\n- #51: Vim in VS Code: Blazing Fast\n- #52: Artificial Intelligence Coding Helpers in VS Code\n- #53: Right Sidebar in VS Code is Weird but Cool\n- #54: Outro to Productive VS Code\n\n### VS Code can do that\n\nAll the best things about Visual Studio Code that nobody ever bothered to tell you.\n\n\u003e[https://vscodecandothat.com/](https://vscodecandothat.com/)\n\n### VS Code channel on youtube\n\n\u003e [https://www.youtube.com/channel/UCs5Y5_7XK8HLDX0SLNwkd3w](https://www.youtube.com/channel/UCs5Y5_7XK8HLDX0SLNwkd3w)\n\n## Annex\n\n### List of extensions I use\n\nYou can create the same list by running ` code --list-extensions | % { \"code --install-extension $_\" }` in a `Windows Powershell` prompt.\n\n```text\ncode --install-extension aaron-bond.better-comments\ncode --install-extension alefragnani.Bookmarks\ncode --install-extension bajdzis.vscode-twig-pack\ncode --install-extension bmewburn.vscode-intelephense-client\ncode --install-extension bobmagicii.autofoldyeah\ncode --install-extension calebporzio.better-phpunit\ncode --install-extension Cameron.rerun-last-command\ncode --install-extension CoenraadS.bracket-pair-colorizer\ncode --install-extension DavidAnson.vscode-markdownlint\ncode --install-extension dbaeumer.vscode-eslint\ncode --install-extension DotJoshJohnson.xml\ncode --install-extension druideinformatique.antidote\ncode --install-extension eamodio.gitlens\ncode --install-extension EditorConfig.EditorConfig\ncode --install-extension emilast.LogFileHighlighter\ncode --install-extension esbenp.prettier-vscode\ncode --install-extension felipecaputo.git-project-manager\ncode --install-extension felixfbecker.php-debug\ncode --install-extension felixfbecker.php-intellisense\ncode --install-extension felixfbecker.php-pack\ncode --install-extension formulahendry.auto-close-tag\ncode --install-extension formulahendry.code-runner\ncode --install-extension GrapeCity.gc-excelviewer\ncode --install-extension Gruntfuggly.todo-tree\ncode --install-extension hollowtree.vue-snippets\ncode --install-extension ikappas.phpcs\ncode --install-extension ionutvmi.reg\ncode --install-extension johnpapa.vscode-peacock\ncode --install-extension junstyle.php-cs-fixer\ncode --install-extension Kasik96.latte\ncode --install-extension marsl.vscode-php-refactoring\ncode --install-extension mblode.twig-language\ncode --install-extension mde.select-highlight-minimap\ncode --install-extension mechatroner.rainbow-csv\ncode --install-extension MehediDracula.php-namespace-resolver\ncode --install-extension mikestead.dotenv\ncode --install-extension mrmlnc.vscode-apache\ncode --install-extension mrmlnc.vscode-duplicate\ncode --install-extension ms-vscode-remote.remote-wsl\ncode --install-extension ms-vscode.powershell\ncode --install-extension neilbrayfield.php-docblocker\ncode --install-extension NiclasvanEyk.am-i-behind\ncode --install-extension nonoroazoro.syncing\ncode --install-extension octref.vetur\ncode --install-extension olback.es6-css-minify\ncode --install-extension Otiel.vscode-xyplorer\ncode --install-extension Perkovec.emoji\ncode --install-extension persoderlind.vscode-phpcbf\ncode --install-extension phproberto.vscode-php-getters-setters\ncode --install-extension RoscoP.ActiveFileInStatusBar\ncode --install-extension sdras.vue-vscode-snippets\ncode --install-extension SirTori.indenticator\ncode --install-extension slevesque.vscode-autohotkey\ncode --install-extension slevesque.vscode-hexdump\ncode --install-extension spences10.vba\ncode --install-extension st-pham.php-refactor-tool\ncode --install-extension streetsidesoftware.code-spell-checker\ncode --install-extension TabNine.tabnine-vscode\ncode --install-extension tomoyukim.vscode-mermaid-editor\ncode --install-extension Tyriar.sort-lines\ncode --install-extension TysonAndre.php-phan\ncode --install-extension vscode-icons-team.vscode-icons\ncode --install-extension whatwedo.twig\ncode --install-extension Christophe Avonture.writing-documentation-snippets\ncode --install-extension yatki.vscode-surround\ncode --install-extension yzhang.markdown-all-in-one\n```\n\n## Trouble shooting\n\n### Git integration is no more working under WSL\n\nThe problem: vscode is showing `No source control providers registered` in the `Source control` tab (\u003ckbd\u003eCTRL\u003c/kbd\u003e+\u003ckbd\u003eSHIFT\u003c/kbd\u003e+\u003ckbd\u003eG\u003c/kbd\u003e) even though it is a git project and you've well a `.git` folder in your directory.\n\nDue to that problem, vscode won't recognize your project as a git one and you don't have any versioning.\n\nReasons can be multiple but make sure that the `Git` core extension is well enabled. Show the list of extensions  (\u003ckbd\u003eCTRL\u003c/kbd\u003e+\u003ckbd\u003eSHIFT\u003c/kbd\u003e+\u003ckbd\u003eX\u003c/kbd\u003e) and type `@builtin git` in the `Search` bar. Make sure `Git` and `Git Base` are enabled.\n\nWhen I had the `No source control providers registered` problem, `Git` was disabled and it was purely impossible to enable it. The description page of `Git` was saying `This extension is disabled in this workspace because it is defined to run in the Remote Extension Host. Please install the extension in 'WSL: Ubuntu-20.04' to enable` and impossible to really understand what to do.\n\nThe solution: it was given here: [https://stackoverflow.com/a/69131127/1065340](https://stackoverflow.com/a/69131127/1065340). After an uninstallation of Visual Studio Code, I've start a command prompt in Linux, in my Ubuntu distribution, go to my home profile (i.e. `cd ~`) and there, I've removed (in fact, renamed) all my `.vscode-xxx` folders (I had `.vscode-remote-containers`, `.vscode-server` and `.vscode-server-server`).\n\nThen, I've reinstalled Visual Studio Code and, finally, running `code .` from the Linux console.  Linux was reinstalling the vscode-server.\n\nOnce vscode was started and my project opened, this time, the git extension was well enabled and versioning was finally supported back. \n\n### Markdown folding not working\n\n\u003e [https://github.com/microsoft/vscode/issues/107130](https://github.com/microsoft/vscode/issues/107130)\n\nIn case code folding is not working in markdown mode, make sure the `@builtin` **Markdown Language Features** addon is enabled.\n\n![Markdown Language Features](./950-troubleshooting /markdown_code_folding/images/markdown_language_features.png)\n\n### Starting code from the WSL console is not returning to the console\n\nThe problem: running `code .` from the console, in WSL2, start vscode but is not returning to the console so we can't type any others commands until we close vscode which is really annoying.\n\nThe solution is: just install the [Remote Development](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack) extension in vscode. \n\n## License\n\n[MIT](/blob/master/LICENSE)\n\n\u003c!-- markdownlint-disable MD033 MD041 --\u003e\n\n[^symbol]: A symbol is the name of a constant, of a function, part of a title (for a markdown document f.i.), ... You can get access to symbols of an opened file by using the \u003ckbd\u003eCTRL\u003c/kbd\u003e-\u003ckbd\u003eSHIFT\u003c/kbd\u003e-\u003ckbd\u003eO\u003c/kbd\u003e keyboard shortcut.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcavo789%2Fvscode_tips","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcavo789%2Fvscode_tips","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcavo789%2Fvscode_tips/lists"}