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

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:

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

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: