Configuring XO with Visual Studio Code

xo Jan 10, 2020

I struggled a bit initially to get this integration working and I keep forgetting the steps. This post is more of a dev note for future XO setup with VSCode.

XO is a JS linter based on Eslint with excellent default rules.

Pre-Requisites

  • Visual studio code installed
  • NodeJS >=8

Configuration Steps

  1. Intialize a project
mkdir test-xo && cd test-xo && npm init -y

2. Launch VSCode and open the test-xo directory.

3. Create a test file index.js in the root of the project for testing the XO configurations and add following content:

const name = "World"
console.log('Hello %s', name)

We are going to use above code for configuring XO as linter. Since, XO is not configured, you shouldn't see any error highlighting in VSCode editor yet.

4. Setup XO:

npm install -D xo

5. Add XO plugin for VSCode. Press cmd + shift + P or F1 and type Install extensions. Search for XO and install the first plugin as shown below:

Install XO extension on VSCode

6. Enable XO from the VSCode settings:

  • Press cmd + shift + P or F1 and type user settings. Open the User Settings panel.
  • Search for XO and Enable XO and XO > Format as shown below
Enable XO from user settings

You should now see the error highlighting in VSCode editor. You are all set to use XO with VSCode.

Bonus - Setup keyboard shortcut for XO --fix

In order to quickly fix most of the XO warnings, you can run the command XO --fix at the command line. Alternatively, you can map a keyboard shortcut to this to make it faster:

  • Press cmd + shift + P or F1 and type Open Keyboard shortcuts to open the keyboard shortcuts panel.
  • Search for XO. Click on the + icon at the beginning. This will open a dialog to set the key bindings. I use alt + cmd + , on mac. You can use whichever key combination works for you.
  • Try using the new key combination on index.js file. XO should automatically fix the warnings as shown below:
Setting keyboard shortcut for XO --fix

Configuring additional rules for XO

You can configure additional rules for XO in package.json file:

"xo": {
  "semicolon": false
}

Credits