My Visual Studio Code setup
Last time I wrote about my preferences over IDEs and text editors, my choice of that moment was Sublime Text and PHPStorm.
I’m still working with PHP and JavaScript, so my needs haven’t changed too much, but my text editor preferences did. Today I’m using Visual Studio Code almost exclusively. In this post I’ll tell you why and all the settings and extensions I have.
The killer features for me
Vscode has the quick open feature that sublime (and all the other text editors nowadays) have. The shortcut is the same (ctrl+p), but you can change it (in the previous post I didn’t mention it, but PHPStorm has a similar shortcut (double shift) to search for files, symbols, settings, actions etc). There’s a difference, though. In sublime, when you scroll through the list, the highlighted file opens in preview mode, so you don’t have to open it to see the content. This is nice, vscode doesn’t have it 🙁.
It also supports finding symbols in the current document with @ in the search field.
I think the feature I miss most when using PHPStorm is the ctrl+alt+click shortcut (there’s a feature request about it for almost 3 years now). Is the “go to definition on split window”. PHPStorm (and the other popular IDEs and editors) have split window, but the convenience of combinating go to definition and open a new split window is priceless. I use it extensively when I need to work on code I don’t know very well. I’m relatively new to my company, consequently it often occurs.
Vscode also has a few more shortcuts to help you navigate through the code.
With ctrl+shift+f10 you can “peek definition”. It’s as if it opens a layer showing the code of another file (or other part of the current one) right below the current line. And you can edit the code inside this layer and save it. This is very helpful. Recently they add an orange background to the piece of code related to what you are seeing the definition for. I didn’t like it, but…
With shift+f12 you can see the usages of the symbol. It can show multiple files on an interface similar to the peek definition.
The integrated debugger is awesome. It is native and you can install adapters, like the PHP one. Atom also has a plugin to debug PHP code, but I found it a little clumsy.
Other nice features
I also like the integrated terminal. I use it most of the time, even more than guake.
The git integration is awesome too. The diff view is what I need it to be, the commit process is simple. Before vscode I used to commit using the terminal, but I’m happy with its GUI.
Almost everything in the editor is customizable on a json file. Sublime does this too, but vscode helps you with hints and autocomplete for the supported settings and shortcuts, including the ones provided by extensions. Is a very nice experience.
Extensions
I’m using vscode for about 6 months. I use some extensions to help me work comfortable. Let’s list them:
Note: I’ll list only the must-have plugins on my list. Themes and extensions that I’m experimenting will be kept out.
This extension can run a piece of code and show you the output on the console. It supports many languages. I use it like Sublime’s build system. Sometimes I want to experiment some function, try an algorithm and see if it works etc. Sometimes I use the mistakes.io to do that too. For PHP, some people use sites like phptester, but having this on the editor is far easier. And you don’t even have to create a file to run it. It creates a temporary file to run.
With this extension you can open a different project very fast. You configure in what folders your projects are and it will search for git repos in all subfolders. Then you can open a new window with a different project with a shortcut. Press ctrl+alt+p and it will list the projects. You select the one you want and hit enter. Very handy.
It brings autocomplete for paths in the filesystem.
Edit: Since I wrote this post, there’s a new language server for PHP, [PHP] Intelephense. Still a preview, but it works nicely. The autocomplete is very, very fast. I’m using it now and one thing is different in my daily use: “find usages” is not working and I miss it :’(.
Edit 2: PHP Intelephense now supports “find usages”. It’s awesome \o/ :)
To work with PHP, this extension is a must-have. It will parse all your project’s file and provide information to the great features of vscode to work with PHP code too, like autocomplete, go to definition, symbol search, code formatting and more.
Tip: sometimes the language server of this extension starts to use a lot of CPU and memory. With Linux + HDD (I don’t use vscode on windows or macOS to know) the machine can freeze and you will need to restart. This happened to me with 2 files in my project over the last few months. But since my work machine was changed by one with SSD, when it happened I was able to kill the language server and get back to work. It’s not very common, but know that it can happen.
There’s three things that bother me:
- the autocomplete is very slow;
- it doesn’t have signature help, so when I don’t remember the arguments of a function or method, I have to open it to see;
- not always it knows the type of the variable that I’m using, so the autocomplete doesn’t work at all. Also doesn’t support type annotation, that often helps with other editors and IDEs;
This extension add support for PHP in the integrated debugger.
With this extension, you always know who authored the current line of the code you are working on. You can see the history of the files, blame annotations and more.
We all love icons. This extension show icons in your sidebar!
If you use jest, this extension is for you. It runs automatically your tests and shows the result for each scenario as you change it. It’s like using the watch option on jest, but you can see the results in the editor instead of the terminal.
As like the name suggests, you can sync your editor settings, extensions, shortcuts and themes between different machines. It uses a gist on your github account to sync.
The Docker extension has a lot of features to work with docker, like generation of Dockerfile and docker-compose.yml, snippets and more. It also has linting and provide intellisense for those files, with autocomplete.
Cucumber (Gherkin) Syntax and Snippets
At work, we are using Behat for testing. Thins extension brings syntax highlight and, more important, is a dependency of the next extension.
I wrote this extension because the only decent tool that I found to work with behat is PHPStorm. On my team, the QA people wrote the features and the developers wrote the contexts to run the features. One problem that we have is that A LOT OF TIMES the features have the same steps, but with different writing. The contexts and steps reuse is one of the best features of the behat, IMHO, so fix this steps on feature files was a very boring task. And we can’t blame the QA people for this, because PHP Storm is expensive to buy only to write feature files. So this extension reads the contexts of the project and highlights the ones in the feature files that aren’t implemented. This way, the QA people can ask themselves “this step is really new or it’s just a different writing than before?”.
The plan is to add more features in the future, but for now it helps a little.
Custom settings
My main customizations on settings.json file:
{
"editor.renderWhitespace": "all",
"editor.fontFamily": ["Fira Code", "Roboto Mono for Powerline"],
"editor.fontSize": 14,
"editor.fontLigatures": true,
"editor.rulers": [
80, 120
],
"gitProjectManager.storeRepositoriesBetweenSessions": true,
"gitProjectManager.maxDepthRecursion": 1,
"gitProjectManager.baseProjectsFolders": [
"/home/luis/projects"
],
"gitProjectManager.openInNewWindow": true,
"window.zoomLevel": -1,
"editor.renderLineHighlight": "all",
"editor.renderIndentGuides": true,
"workbench.editor.showIcons": true,
"editor.selectionHighlight": true,
"explorer.openEditors.dynamicHeight": false,
"explorer.autoReveal": true,
"docker.enableLinting": true,
"files.trimTrailingWhitespace": true,
"workbench.welcome.enabled": false,
"php.suggest.basic": false,
"window.menuBarVisibility": "hidden",
"workbench.colorCustomizations": {
"statusBar.background" : "#007acc",
"statusBar.noFolderBackground" : "#0A0A0D",
"statusBar.debuggingBackground": "#cc6633"
}
}And the shortcuts:
[
{
"key": "ctrl+b",
"command": "code-runner.run"
},
{
"key": "ctrl+'",
"command": "workbench.action.terminal.toggleTerminal"
},
{
"key": "ctrl+shift+b",
"command": "workbench.action.toggleSidebarVisibility"
},
{
"key": "ctrl+;",
"command": "editor.action.commentLine"
}
]Do you use vscode? Do you have something to share?
