IDE Ninja 🥷

If you're a developer, you definitely want to be fast and efficient when writing code. Whether you're working on a small or large project, in any language or environment, you take every opportunity to boost your productivity.

In this article, we'll show you a few tips on how to speed up coding with keyboard shortcuts, user snippets, and editor extensions. We'll focus mainly on VS Code and PHPStorm.

⚔️⚔️⚔️

Keyboard shortcuts

Keyboard shortcuts let you quickly perform common tasks like searching, replacing, formatting, or generating code. We all know the widely used shortcuts CTRL + C a CTRL + V. But there are plenty of other shortcuts that can really boost how fast you produce code.

Every editor has its own shortcuts, which can vary by platform or settings. You can also create your own custom shortcuts to match your specific needs.

Below you'll find a few of the most common shortcuts that are must-knows for us.

Keyboard shortcuts in VS Code

For further study, we recommend the full list of keyboard shortcuts for Windows i MacOS. But if you want to save time, here's a list of selected shortcuts we use ourselves:

CMD + D // z označeného výrazu vyhledá další výskyt v souboru
CMD + F2 // z označeného výrazu vyhledá všechny další výrazy v souboru
CMD + Shift + F // vyhledání v celém projektu
CMD + Shift + H // nahrazování v celém projektu
CMD + K + L // zabalování/rozbalování bloků
CMD + Shift + P // zmenšení textu na lowercase
CMD + Shift + P // zmenšení textu na uppercase
CMD + P // vyhledávání souborů
CMD + B // otevřít/zavřít boční panel
CMD + K + W // zavře všechny taby

Keyboard shortcuts in PHPStorm

You can find the full list of keyboard shortcuts here: Windows, MacOS. We've picked out just the ones we use the most:

F1 // při stisku na konkrétním souboru vám ukáže jeho velikost, datum změny apod.
F2 // přejmenování souboru
CMD + , // otevře nastavení editoru PHPstorm
CMD + Shift + O // vyhledání souboru v celém projektu
2x Shift // vyhledání čehokoliv v celém projektu včetně funkcí z menu apod.
Control + G // vyhledá všechny shody s označeným obsahem v souboru
Control + Shift + G // odebírá shody s označeným výrazem v souboru
CMD + Shift + V // multiple clipboard, funguje i mezi více okny PHPstormu
CMD + Shift + U // přepis textu na lower/upper case
Control + Space // ukáže všechny verze knihovny (lze pak jednoduše povyšovat verze)

Custom shortcuts in VS Code

We often run into graphic assets where the text is in caps lock, which isn't what we want. Making text bigger should be handled through styles. To make it smaller, you can either use the shortcut CMD + Shift + P → Transform to lowercase (see the keyboard shortcuts above), or you can create your own dedicated shortcuts for transforming text to lowercase or uppercase.

You can get to the keyboard shortcuts settings in VS Code via the menu CMD + SHIFT + P → Open keyboard shortcuts (JSON). Here you can define your own shortcuts and actions.

Converting text to lowercase:

{ "key": "ctrl+alt+cmd+down", "command": "editor.action.transformToLowercase" }

Converting text to uppercase:

{ "key": "ctrl+alt+cmd+up", "command": "editor.action.transformToUppercase" }

⚔️⚔️⚔️

User snippets

User snippets (or "user code fragments" for anyone who's not a fan of English terminology) are templates that make it easier to write repetitive bits of code. You simply type a predefined piece of text or combination of characters, and after pressing enter, the text gets replaced with the preset code. In VS Code, user snippets show up in the IntelliSense IntelliSense menu along with other suggestions.

How to create user snippets in VS Code

You can get to user snippet management via the menu CMD + SHIFT + P → Configure user snippets. Here you can create a new JSON file. We usually split snippets into files based on which language they're for.

You can find more about creating user snippets in the documentation. But we do want to highlight the use of tab stops ($1, $2, …), which let you tab through predefined positions after inserting a snippet.

One example would be a snippet for inserting a link, where you want the cursor placed in the src attribute and then move inside the tag using tab after typing.

Placeholders work in a similar way, using the following syntax: ${1:foo}. The difference is that after inserting, you get pre-filled, highlighted sample text that you start overwriting.

It's also useful to restrict a snippet to specific languages (the scope parameter) or to use variables inside a snippet.

Examples of our user snippets

• Inserting target blank a rel attributes into links

"Blank": {
	"prefix": "blank",
	"scope": "html, nunjucks, twig, typescriptreact",
	"body": [
		"target=\"_blank\" rel=\"noopener noreferrer\"$1"
	],
	"description": "Target blank"
}

• Quick nested BEM syntax in SCSS

"bem element": {
	"prefix": [
		"_"
	],
	"body": [
		"&__$1"
	],
	"description": "bem element shortcut"
}

• Generating a media query (we have similar setups for all the up and down combinations)

"mdup": {
	"prefix": [
		"mdup"
	],
	"body": [
		"@media (config.\\$md-up) {",
		"    $0",
		"}"
	],
	"description": "mdUp"
}

• Base SCSS file – inserts includes and pre-fills the component name (we have something similar for Latte files too)

"Include base CSS component with @use": {
	"prefix": "base",
	"body": [
		"@use 'config';\n@use 'base/variables';\n@use 'base/functions';\n@use 'base/extends';\n\n.b-${1:component} {\n\t//\n}"
	]
}

⚔️⚔️⚔️

Extensions

You've probably all come across extensions by now, whether for VS Code, PHPStorm or any other editor. We'll skip Prettier, ESLint, Stylelint, and similar must-have extensions and give you a few tips on the (maybe) lesser-known ones.

VS Code

• Gremlins shows invisible characters, like non-breaking spaces, line breaks, and so on.
• Auto Close Tag lets you close tags using the CMD + OPTION + . shortcut.
• Auto Rename Tag speeds up automatically renaming paired tags.
• Highlight Matching Tag highlights the closing or opening tag when it's focused.
• indent-rainbow is useful for highlighting indentation with colors.
• SCSS Everywhere provides autocomplete suggestions for classes used in the project.
• Local History – a local history, in case even Git lets you down.
• PathIntellisense makes writing file paths easier thanks to its autocomplete.
• Multiple cursor case preserve takes care of preserving letter case during bulk editing (using CMD + D).
• GitLens – Git history right inside VS Code

• And finally, our catch from Cody AI at the FrontKon conference. It's a free AI assistant for reviewing code, automatically generating code based on meaning, fixing it, explaining how it works, and much more

PHPStorm

Unlike VS Code, PHPStorm is a paid IDE. It includes almost everything a developer could think of right out of the box. Automatic tag closing and renaming, current tag highlighting, showing the nesting path in the code structure, or syntax highlighting for practically any programming language.

A big advantage is that you don't need to use any external applications, like an FTP client, a Git manager, and so on. All the commonly used tools are directly integrated into PHPStorm.

For example, it's very handy to compare file versions on the server with your localhost via an FTP client and push only specific lines to the server, without having to overwrite the whole file.

Cody AI

In today's AI-driven world, even a fully loaded PHPStorm needs a boost to push it a little further. Just like with VS Code, there's an AI extension called Cody, which suggests, comes up with, and fills in pieces of functions faster than you can type a curly brace :)

⚔️⚔️⚔️

In closing

Do you use any interesting user snippets or extensions that didn't make our hot list? Share them with us 🔥!