DEV Community

Constantin Boulanger
Constantin Boulanger

Posted on

My favorite extensions for Visual Studio Code

Visual Studio Code

If you want to read the French version of the article, it's here! Mes extensions favorites pour Visual Studio Code

I use VS Code since almost its release. I'll spare you all the justifications and reasons why I use it except that it's the code editor with which I'm most comfortable.

I put a non-exhaustive list of extensions that I use daily to make my code writing cleaner and more efficient.

Apache Conf Snippets

Useful extension if you regularly edit .htaccess files. It's a set of shortcuts that will make your life easier.

Extension Apache Conf Snippets Visual Studio Code

Apache Conf

Additional extension from the previous one. It will allow you to have a syntactic coloring of the Apache files, including the .htaccess file

Extension Apache Conf Visual Studio Code

Beautify

An extension that does exactly what it is asked, namely, beautify javascript files, JSON, CSS, Sass, and HTML

Extension Beautify Visual Studio Code

Beautify css/sass/scss/less

Extension that does exactly what we call indicates

Extension Beautify css/sass/scss/less

Smarty

I work on Prestashop most of my day and so I have to edit smarty files. This function therefore ensures the support of .tpl files

Extension Smarty Visual Studio Code

Twig

Same extension as the previous one but for supporting Twig files, especially used by Symfony (and Prestashop 1.7)

Extension Twig Visual Studio Code

PHP Symbols

A simple but effective extension that allows, via the Ctrl shortcuts - Shift - O to have the list of functions and classes of a PHP file. Essential:)

Extension PHP Symbols Visual Studio Code

Log File Highlighter

Extension absolutely essential when you have to read log files. Whether it's system logs or Apache logs.

Extension Log File Highlighter Visual Studio Code

MDTools

An extension that I created several years ago and which still serves me today. It is essentially a compilation of Visual Studio Code snippets for Prestashop that save me time. Don't hesitate if you want me to add or contribute to it!

I use it to develop my Prestashop Addons !

Extension MDTools

These are the extensions I use at least once a day. I have a few for WordPress and other functions but I rarely use them! :)

If you have more to offer, don't hesitate!

Image: StockSnap / Pixabay

Top comments (2)

Collapse
 
dgloriaweb profile image
dgloriaweb

Hi, I need to use {translate text=""} smarty function, and it's really hard to see any text after I've added this to the code. Do you know how can I add a color theme especially for this smarty tag, so that I can distinguish? Thanks!!!

Collapse
 
dgloriaweb profile image
dgloriaweb

Hi, I've sorted this out. I've searched for smarty in the settings, opened settings.json and fiddled with the scopes and values a bit. Here's the result.
Actually the scope can be found by searching (shift+ctrl+p) for "Developer: Inspect Editor Tokens and Scopes" by hovering over some elements.


  "editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "scope": "string.quoted.double.smarty",
        "settings": {
          "foreground": "#ff0808",
          "fontStyle": "italic"
        }
      },
      {
        "scope": "entity.name.function.smarty",
        "settings": {
          "foreground": "#fffd77",
          "fontStyle": "italic"
        }
      },
      {
        "scope": "variable.parameter.smarty",
        "settings": {
          "foreground": "#fffd77",
          "fontStyle": "italic"
        }
      },
      {
        "scope": "keyword.control.smarty",
        "settings": {
          "foreground": "#48ff38",
          "fontStyle": "italic"
        }},
      {
        "scope": "string.quoted.double.html",
        "settings": {
          "foreground": "#de38ff"

        }
      }
    ]
  },
Enter fullscreen mode Exit fullscreen mode