Configuring XO with Visual Studio Code
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
orF1
and typeuser settings
. Open the User Settings panel. - Search for
XO
and EnableXO
andXO > 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
orF1
and typeOpen 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 usealt + 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:

Configuring additional rules for XO
You can configure additional rules for XO
in package.json
file:
"xo": {
"semicolon": false
}
Credits
- https://github.com/xojs/xo
- https://github.com/SamVerschueren/vscode-linter-xo
- https://getkap.co/ for generating excellent gifs
- Cover photo - https://unsplash.com/@pankajpatel