Setting up StandardJS in VSCode for React work
Tags: vscode, react, standardjs
Published: 2020-06-11 15:58:22

I've started learning React - so far it's really cool - and being a bit of a stickler for code styling, I wanted to use something that would keep my code consistent and in line with my current company's style. 

The question that really got me into this was the age-old one of "Semi-colons or no semi-colons at the end of a line?". I will NOT get into which is better, because I have better things in my life to do than debate that :) Anyway, devs at my company recommended [StandardJS](https://standardjs.com/) (on [Github](https://github.com/standard/standard)), so here's how I integrated that into [VSCode](https://code.visualstudio.com/). Note that the Prettier extension is similar to this, and can apparently be configured to work like StandardJS. However, I never tried that myself.

In my project's folder, I used npm to install the StandardJS package along with ESLint:

```
npm install --save-dev standard eslint-plugin-html
```

Once that was done, I added the following code to `package.json`:

```
  "standard.options": {
    "ignore": [
      "node_modules/**"
    ],
    "plugins": [
      "html"
    ],
    "parser": "babel-eslint"
  }
```

I installed the following extension for VSCode: [https://marketplace.visualstudio.com/items?itemName=chenxsan.vscode-standardjs](https://marketplace.visualstudio.com/items?itemName=chenxsan.vscode-standardjs) and then edited my `settings.json` file (click the gear icon in the bottom left corner of VSCode, select Settings, then click the little page icon in the top right corner to open `settings.json`). 

![settings.json link](https://dev-to-uploads.s3.amazonaws.com/i/xp6d8nhv9i9d1ack6uig.png)

I added the following code to the end of my file:

```
    // StandardJS settings.
    // ------------------------------
    // Disable default validator first.
    "javascript.format.enable": false,
    "javascript.validate.enable": false,
    "standard.enable": true,
    "standard.autoFixOnSave": true,
    "standard.validate": [
        "javascriptreact"
    ]
```

I had already set a file association for `javascriptreact` earlier, but I will provide it here, just in case you don't have that yet. This is also in `settings.json`. If you already have a `files.associations` section, just add the `*.js` line to it, and don't forget the comma on the preceding line; no trailing comma on the last line:

```
    "files.associations": {
        "*.js": "javascriptreact"
    },
```

Now, when you're editing `.js` files in a React project, you should see `Javascript React` in the status bar of VSCode, in the bottom right corner, with `Javascript Standard Style` next to it. If you just see `Javascript` for the first part, click on it and select `Javascript React`.

![File language type](https://dev-to-uploads.s3.amazonaws.com/i/qj79c3ho2b56tp9ei7w8.png)

One thing to note: I already had an ESLint extension added to VSCode, so you might need that too. In case you do, this is the one I have [https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint).

That's it! Enjoy the nicely formatted code (with no trailing semi-colons) :)