Must-have VS Code Settings for Web Development

Last week I wrote about must-have VS Code extensions for web development. This time, I’m writing about the recommended settings to make sure these extensions and VS Code work correctly. 

VS Code is an
excellent tool for writing software, and when you install the right extensions, it can be very powerful. However, if these extensions and VS Code isn’t set up correctly, many of its features or extensions might not work the way you expect them to work.

Below is a list of settings that I use as my base when setting up VS Code for any type of web development. You can also get them from the gist located here:

https://gist.github.com/ricardodsanchez/179f693c8c843abc782e3e40112904aa

The way to get to the setting in VS Code is by typing Ctrl-Shift P and then type “settings”. A settings.json file will open and this is where you can remove all existing settings and paste the settings below.

{
  "telemetry.enableTelemetry": false,
  "telemetry.enableCrashReporter": false,
  "files.autoSave": "afterDelay",
  "files.associations": {
    "*.md": "markdown"
  },
  "window.zoomLevel": 0,
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "breadcrumbs.enabled": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.acceptSuggestionOnEnter": "on",
  "editor.detectIndentation": false,
  "editor.fontFamily": "'Source Code Pro', Menlo, Consolas, Courier, monospace",
  "editor.fontSize": 13,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.multiCursorModifier": "ctrlCmd",
  "editor.quickSuggestions": {
    "other": true,
    "comments": true,
    "strings": true,
  },
  "editor.renderWhitespace": "none",
  "editor.snippetSuggestions": "top",
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "editor.wrappingIndent": "indent",
  "extensions.ignoreRecommendations": true,
  "extensions.showRecommendationsOnlyOnDemand": true,
  "files.exclude": {
    "**/._*": true
  },
  "files.insertFinalNewline": true,
  "html.format.endWithNewline": true,
  "html.format.extraLiners": "body",
  "html.format.indentInnerHtml": true,
  "html.format.unformatted": "b,em,i,span,strong,wbr",
  "html.format.wrapLineLength": 0,
  "liveServer.settings.donotShowInfoMsg": true,
  "liveServer.settings.port": 0,
  "workbench.colorCustomizations": {
    "editorIndentGuide.activeBackground": "#FFA500"
  },
  "workbench.editor.tabSizing": "shrink",
  "workbench.editor.enablePreview": false,
  "workbench.editor.enablePreviewFromQuickOpen": false,
  "gitlens.advanced.messages": {
    "suppressGitDisabledWarning": true
  }
}

That’s all for all folks, remember to subscribe and please let me know if you have any comments or questions below.

Must-have VS Code Extensions for Web Development

The VS Code editor is such a pleasure to work with; it is my code editor of choice when working with light C# projects or any other languages such as JavaScript or Ruby on Rails.

Below are my must-have extensions for anyone doing web development. There are many more magnificent extensions, but I feel like the following are not only useful but required to augment your web development experience with VS Code.

HTML Preview

An extension to preview HTML files while editing them in VSCode

The extension can be activated in two ways

  • Toggle Preview – ctrl+shift+v or cmd+shift+v
  • Open Preview to the Side – ctrl+k v or cmd+k v

Markdown Preview Enhanced

An extension to preview Markdown (MD) files while editing them in VSCode

The goal of this project is to bring you a wonderful markdown writing experience.

Keybindings: The cmd key for Windows is ctrl.

ShortcutsFunctionality
cmd-k vOpen preview to the Side
ctrl-shift-vOpen preview
ctrl-shift-sSync preview / Sync source
shift-enterRun Code Chunk
ctrl-shift-enterRun all Code Chunks
cmd-= or cmd-shift-=Preview zoom in
cmd– or cmd-shift-_Preview zoom out
cmd-0Preview reset zoom
escToggle sidebar TOC

Code Spell Checker

A basic spell checker that works well with camelCase code.

Functionality:

Load a TypeScript, JavaScript, Text, etc. file. Words not in the dictionary files will have a squiggly underline.

Example:

Example

GitLens – Git supercharged

GitLens increases the capabilities of Git built into Visual Studio Code. It helps you visualize code authorship at a glance through Git blame and code lens annotations, among other things.

Git Code Lens
Current line blame

ESLint

Integrate ESLint into VS code. ESLint statically analyzes your code to find problems quickly.

The setting below turns on Auto Fix for all providers including ESLint:

    "editor.codeActionsOnSave": {
        "source.fixAll": true
    }

In contrast, this configuration only turns it on for ESLint:

    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }

You can also selectively disable ESLint via:

    "editor.codeActionsOnSave": {
        "source.fixAll": true,
        "source.fixAll.eslint": false
    }

Prettier – Code formatter

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

Default Formatter:

To ensure that this extension is used over other extensions you may have installed, be sure to set it as the default formatter in your VS Code settings. This setting can be set for all languages or by a specific language.

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Intellisense for CSS class names

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.


That’s all, folks! I invite you to try other extensions, but make sure not to clutter your VS Code experience by installing extensions you might not need or use.

Also, remember to adjust your VS Code settings to make sure you get the most productivity and the best experience when using VS Code and these extensions.

If you know of any other VS Code extensions for web development, please feel free to share them in the comments below. Cheers.

Favorite Visual Studio Code Extensions of 2018

Visual Code is a fantastic code editor, but what really makes it powerful are the extensions available for it. In this post, I share some of my favorite VS Code extensions while using VS Code to develop web applications.

  • WakaTime – Metrics, insights, and time tracking automatically generated from your programming activity.
  • GitLens – GitLens supercharges the Git capabilities built into Visual Studio Code. It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more.
  • REST Client – REST Client allows you to send HTTP request and view the response in Visual Studio Code directly.
  • Npm Intellisense – Visual Studio Code plugin that autocompletes npm modules in import statements.
  • Code Spell Checker – A basic spell checker that works well with camelCase code.The goal of this spell checker is to help with catching common spelling errors while keeping the number of false positives low.
  • Azure Storage – The Azure Storage extension for VS Code lets you deploy static websites and browse Azure Blob Containers, File Shares, Tables, and Queues. Follow this tutorial to deploy your web apps to Azure Storage from VS Code.
  • Night Owl – A VS Code theme for the night owls out there. Works well in the daytime, too, but this theme is fine-tuned for those of us who like to code late into the night.
  • Project Manager – It helps you to easily access your projects, no matter where they are located. Don’t miss that important projects anymore. You can define your own Favorite projects, or choose for auto-detect VSCode projects, GitMercurial and SVN repositories.
  • Todo Tree – This extension quickly searches (using ripgrep) your workspace for comment tags like TODO and FIXME, and displays them in a tree view in the explorer pane. Clicking a TODO within the tree will open the file and put the cursor on the line containing the TODO.
  • Turbo Console Log – This extension make debugging much easier by automating the operation of writing meaningful log messages.

Do you know of any cool and useful VS Code extensions? Please share them in the comments.

Happy Coding!

Run code from your code editor

The other day I discovered this useful extension that allows you to run your code from within the Atom editor. The name of the extension is Script Runner, and while there are many other extensions that do this, I really like how this one shows the code results on the right side of your screen, allowing you to easily see your code and the result of it after running it side-by-side.

After discovering this tool my first thought was, can I find the same extension or similar for the VS Code editor? The answer is Yes. The best extension I found to run your code while in the editor is Code Runner, and while this extension shows you the results in the console window, it still displays the results in a clear way by only adding the result and the time it took to execute the code. Very useful tool!

Why are these tools useful? For starters, they allow you to see the result of your code right away, without the need of setting up a unit test, or anything else really. You still have to output your result by doing a console.log for example, but you don’t have to run it in a browser or anything like that.

Below is an example of a FizzBuzz program using Atom and Script Runner:

And below is the same code using VS Code and Code Runner

They are very similar and I will be using both, I really like how easy it is to run and see your code’s output right from the editor.

To download and install these extensions, just click on the links below, and happy coding!

Script Runner – extension for Atom editor

Code Runner – extension for Code editor