What does it mean to be more productive when you are programming?
Browing the other day on Twitter, someone asked which are the best extensions to use with VSCode. This got me thinking about the ones I use and why.
Some help me do my job faster by helping me to have a clear vision of my code these are the ones that I call Visual Helpers and Formatters.
There are also the ones that help me to type or move faster, do some tasks with fewer keystrokes. These are File utils, autocompletes or IntelliSense, and error highlighters. I´m calling this section Avoiding Mistakes & Fast pacing.
There are other extensions that I use because without them I would have to open an external tool to do the task. This is the Tools Section.
I like to have an enjoyable environment when I´m programming in this area a good Theme and font help a lot. This is the Themes section.
And personal taste I like to use some emojis on my comments then I use an extension Just For Fun. 🚀
Visual Helpers
- Better Comments. The Better Comments extension will help you create more human-friendly comments in your code.
- Bracket Pair Colorizer. This extension allows matching brackets to be identified with colors. The user can define which tokens to match, and which colors to use.
- Color Highlight. This extension styles css/web colors found in your document.
- Highlight Matching Tag. This extension highlights matching opening and/or closing tags. Optionally it also shows the path to tag in the status bar. Even though VSCode has some basic tag matching, it's just that - basic.
- DotENV. .env files syntax highlighting
- Error Lens: vscode settings.json
"workbench.colorCustomizations": {
"errorLens.hintForeground": "#ffc600A1",
"errorLens.hintBackground": "#ffc60003",
"errorLens.errorBackground": "#ff000005",
"editorCursor.background": "#333999",
"editorCursor.foreground": "#F04464DD",
},
"errorLens.fontSize": "12",
// "errorLens.fontFamily": "Comic Sans MS",
"errorLens.onSave": true,
"errorLens.enabledDiagnosticLevels": [
"error",
"warning",
"hint"
],
"errorLens.exclude": [
"never (read|used)",
],
Formatters
- SCSS Formatter. SCSS Formatter uses Prettier under the hood to format files. Though Prettier supports formatting various file types. This extension focuses only on SCSS. Additionally, it supports CSS.
- PHP cs fixer. This extension simply provides the PHP CS Fixer command. You need to install PHP CS Fixer on your computer.
Avoiding Mistakes & Fast pacing
- File Utils. A convenient way of creating, duplicating, moving, renaming, deleting files and directories.
- Advanced New File. Inspired by Sublime's AdvancedNewFile plugin, this adds the ability to create files anywhere in your workspace.
- HTML CSS Support. Missing CSS support for HTML documents.
- PHP Intelephense. Intelephense is a high-performance PHP language server packed full of essential features for productive PHP development.
- IntelliSense for CSS class names in HTML. A Visual Studio Code extension that provides CSS class name completion for the HTML class attribute based on the definitions found in your workspace or external files referenced through the link element
- Tailwind CSS IntelliSense. Tailwind CSS IntelliSense enhances the Tailwind development experience by providing Visual Studio Code users with advanced features such as autocomplete, syntax highlighting, and linting.
- npm Intellisense. Visual Studio Code plugin that autocompletes npm modules in import statements.
- PHP cs fixer
- PHP DocBlocker. Basic PHP DocBlocking extension.
- Vim. VSCodeVim is a Vim emulator for Visual Studio Code.
Tools
- SVG. A Powerful SVG Language Support Extension. Almost all the features you need to handle SVG.
- Markdown All in One. All you need for Markdown (keyboard shortcuts, table of contents, auto preview, and more).
Themes
Just For fun