Must use VS Code Extensions

Vs Code is the most used IDE, for my daily coding activity. Eventhough there are other IDE’s installed in my machine, most of the time I use the Vs Code because it is very much “Extensible and Customizable”. It supports hundreds of programming languages, which makes it a single IDE for many programming languages. One more main reason why I like Vs Code is because it is Free and Runs everywhere(macOS, Linux, Windows and on Browser).

I spent a lot of time finding a IDE, which works for most of my needs. I found VsCode was helpful and spent most of my time setting up the IDE to work the way i want. This helped me in getting all my coding work done in a easier and faster. Below is the list of Extensions, which are my favourites:

#1 Bracket Peek

The Bracket Peek extension helps to view the line of code containing the opening bracket, when the cursor is at the closing bracket. It also display the preview of the first line of the editor, when the opening bracket is not visible in the current view. The bracket peek works for the below bracket options,

Curly brackets { … }
Parentheses ( … )
Square brackets [ … ]
Tags …

The Bracket Peek extension provides below settings for customization,

Preview Location (Top, In Line or Hover) — Editor Top (default)
Preview Always (default: false)
Preview Color (default: Theme default)
Preview font style (Italic)
Disable Different Brackets Types / Tags

#2 Align by RegEx

The Align by RegEx extension allows to align multiple lines of text by using the regular expression. There is also and option to store the regular expressions as templates for repeated use. The advantage of using this extension for alignment in Vs Code is it offers alignment on any character.

Below is the demo for aligning the code based on the = sign.

Below is the demo for aligning the text based on the words number and string.

The Align by RegEx extension provides the below setting for customization,

align.by.regex.templates: Map which can hold user specified regular expression templates (i.e. "align.by.regex.templates": { "abc": "=|,|:"} ).

#3 Hex Array Formatter

The Hex Array Formatter extension is used to format the hex string and represent the Hex string in a C array format for easy use. It has 3 formats of representation which can be changed by using a configured shortcut menu.

Below is the demo showing the hex string been formatted in the 3 different formats for using in the array.

This extension comes very handy, when you want to initialize a large array which are not formatted.

#4 Hover Converter

The Hover Converter extension is used to convert a Hexadecimal or a Decimal numbers into Binary, Hex or Decimal Values by just hovering over the number.

For the extension to work we have to enable it from the command palette.

Hover Converter: Enable Extension
Hover Converter: Disable Extension

Below are the following formats supported by the extension

Hex : 0xFF
Hex : FFh
Decimal : 12345

#5 Intel HEX format

The Intel HEX format extension provides support to view the Intel HEX file format with the corresponding syntax highlighting and basic commands.

The color syntax for the hex file in the editor helps to view the various fields of the HEX file.

The Status bar indicator shows the Binary size in bytes, without the intel hex format overhead. It also displays the address of the cursor location when the cursor is in the Data field.

There is also option to repair the file, which does the checksum calculation and updates the checksum field.

The Intel Hex format extension provides the below setting for customization,

hex-fmt.repairOnSave: tells if an hex file must be repaired when saved (default to true).

#6 Motorola S-Record

The Motorola S-Record extension can be used to view the Motorola S-record file format in Vs Code.

example (1).gif

The Status bar indicator provides information about the binary size in bytes without the S-record format overhead and Address of the cursor location in the data field and also the start address.

There is also option to repair the file, which does the checksum calculation and updates the checksum field.

The Motorola S-Record extension provides the below setting for customization,

srecord.repairOnSave: tells if a srec file must be repaired when saved (default to false).

#7 Log File Highlighter

The Log File Highlighter provides color highlighting for the log files, which makes easier to view the flow of log events and identify the problems.

The color formatting is applied to files with extensions .log format.

The Log File Highlighter extension provides the below setting for customization,

Grammar tokens that can be used to override the colors

log.constant

log.date

log.verbose

log.debug

log.error

log.exception

log.info

log.string

log.exceptiontype

log.warning

To override the color for one of the above tokens, modify the user setting has shown below,

"editor.tokenColorCustomizations": {
    "textMateRules": [
        {
            "scope": "log.error",
            "settings": {
                "foreground": "#af1f1f",
                "fontStyle": "bold"
            }
        },
        {
            "scope": "log.warning",
            "settings": {
                "foreground": "#f4ad42",
                "fontStyle": ""
            }
        }
    ]
}

Defining custom highlighting patterns

The patterns are defined in the user settings like in the below example:

"logFileHighlighter.customPatterns": [
    {
        "pattern": "Verbose",
        "foreground": "#22aa22"
    },
    {
        "pattern": "E/\\w+",
        "foreground": "#af1f1f",
        "background": "#344323"
    },
    {
        "pattern": "\\[.*\\]",
        "background": "#333333"
    }
]

Other file formats also can be used for the color formatting by modifying the user setting has shown below.

"files.associations": {
    "*.log.*": "log"
},

#8 Monokai ST3

The Monokai ST3 extension can be used to get the Sublime’s iconic Monokai original theme in Vs Code. This is one of the best and eye friendly theme which can be used in Vs Code. Users who are coming from Sublime Text3 editor would like to set this theme on Vs Code to get the same visual appearance.

Even though the Vs Code comes with the Monokai Theme, this extension provides some more additional syntax highlighting since the default theme was little different from the Sublime Text3 theme.

The Monokai ST3 extension provides the below setting for customization,

Enabling custom titleBar
"window.titleBarStyle": "custom"
"workbench.colorCustomizations":{
  "statusBar.background" : "#1A1A1A",
  "statusBar.noFolderBackground" : "#212121",
  "statusBar.debuggingBackground": "#263238"
}
"workbench.colorCustomizations":{
  "terminal.background": "#012456"
}

#9 Open in Notepad++

The Open in Notepad++ extension provides an option to open the current file in Notepad++. Eventhough we use many of the advanced IDE’s for programming at some point we might want to use the so called ancient software Notepad++. This extension helps in opening the current file, when you right click the file and there is a option “Open in Notepad++”. By clicking this options VsCode opens the current file in Notepad++ with the cursor at the row and column where the click was done.

Keyboard Shortcut — A keyboard shortcut Ctrl+K Ctrl+N is set for triggering this command.

The Open in Notepad++ extension provides the below setting for customization,

openInNpp.Executable:
openInNpp.spawnOptions:
openInNpp.workingDirectory:
openInNpp.decoupledExecution:
openInNpp.commandLineArguments:
openInNpp.multiInst:
openInNpp.skipSessionHandling:
openInNpp.openFolderAsWorkspace:
openInNpp.filesInFolderPattern:
openInNpp.preserveCursorPosition:
openInNpp.extendExplorerContextMenu:
openInNpp.extendEditorContextMenu:

#10 Disable Ligatures

The Disable Ligatures extension is used to disable the ligatures at the “cursor position” or “disable all ligatures on the line”.

The Disable Ligatures extension provides the below setting for customization,

"disableLigatures.mode": "Line"

Disable all ligatures on the current line

"disableLigatures.mode": "Cursor"

Disable ligatures at cursor position

"disableLigatures.ligatures"

Choose which ligatures to disable

-------------------------------------------------------------------------

Thanks for reading!!! Happy Coding