Code Quality Per Language Settings in Visual Studio Code A few tips for making sure each language you use in Visual Studio Code is following its own coding standards.

In previous posts, I’ve talked a bit about Visual Studio Code, and though I’ve tried a variety of other editors, I keep coming back to this particular IDE.

An IDE For WordPresss Development: Visual Studio Code

Over time, it’s matured quite a bit, continues to do so, and allows plenty of customization especially for those of us working in PHP, Sass, JavaScript, and, more generally speaking, WordPress.

If you use any linters, though, you’ll find that one of the things each will talk about is the amount of whitespace that should exist before a given line of code.

So if you’re using Visual Studio Code, these are the extensions and the settings I recommend for making sure your code is up to par with whatever code quality tools you’re using.

Code Quality Per Language

First, the extensions that I recommend every person install – at least if you’re working with the above languages – include the following:

  • ESLint. Integrates ESLint into VS Code. (If you are new to ESLint check the documentation.)
  • PHPCS which integrates the PHP Coding Standards (set in the preferences) into the IDE.
  • WordPress Toolbox provides snippets for every WordPress function, class and constant, with argument type hints and brief descriptions up to WordPress 4.9.4 (at the time of this post).

Once those are installed, you can restart your IDE or add the following code to the preferences file before doing so. You can do this on a global basis or a per-projet basis. Either is fine. I’ve commented the code to make it as easy as possible to follow.

Code Quality Per Language

I’ll also add a few notes below it.

This is how it works:

  • For each type of language, you can define certain settings such as tabSize and whether or not to autoIndent by creating a definition in the JSON file.
  • To do this, precede the definition with the file suffix of the language or, in some cases (like JavaScript), the name of the language.

The code at the bottom of the file, the General Editor Settings are provided as some extras that you may want to include. For example, I like to trim all trailing space, suggest basic PHP definitions, and a set of coding standards for when I’m working on a project.

These are things that are generally outside the scope of this project (but I’ve discussed in other posts). But it’s still enough to get started with a higher-level of code quality per language than what’s offered out of the box.