Setting up StandardJS in VSCode for React work

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 (on Github), so here's how I integrated that into VSCode. 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 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).

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.

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.

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