JavaScript Code Style

This took me way longer than expected due to me losing the repl twice. So without further ado, let's get into the world of eslint and good, clean code!

What is ESLINT?

EsLint is a way for people to enforce code style and good coding practices. They allow you to clean up your code, and also even give you insights about redundant code and code that won't ever be reached.

Getting EsLint

Getting eslint is super easy. Just go to the shell (hit ctrl + shift + s if you can't find it), and type in this:

npm i -D eslint ; npm init -y ; npx eslint --init

First, it will install eslint, then it will initiate your package.json with default values, and then it will initiate eslint. If all of that goes well, it will look something like this:

Go through the form, and soon you will find yourself a very nice eslintrc.js (given you chose JS as your config file)!

Configuring EsLint even more

In order to configure eslint more, and get in more options, you will first need to know what those options available are!
This is a doc of all the available configurations. You can also add some yourself, but eslint has a ridiculous amount of avaible configurations, and I never had to actually use that.

EsLint Syntax

So now we know what our options are, but how do we use them? Simple! Inside your rules are where all the options (or as eslint calls them, rules) are.

  "rules": {
    "indent": [
      "error",
      4
    ],
    "linebreak-style": [
      "error",
      "unix"
    ],
    "quotes": [
      "error",
      "double"
    ],
    "semi": [
      "error",
      "always"
    ]
  }

They can either be a string or an array or a number.
If it is a string, it has to be: "none", "warning", or "error". "none" means eslint doesn't enforce it, "warning" warns you about it, and "error" well, errors. For some reason eslinters are super rash and we always use "error" so that's what we are using. The numbers also correspond to that, here's a table:

Ok, lets look at an example! We will look at the no-extra-parens rule.

"no-extra-parens": 2

Now, by default, it:

disallows unnecessary parentheses around any expression

Seems pretty useful! Now, lets look at a more complex rule, array-element-newline.

"array-element-newline": ["error", {
  "ArrayExpression": "consistent",
  "ArrayPattern": { "minItems": 3 }
}]

This takes in an object sometimes! Make sure to read the documentation carefully.

My Code Style

Here's my eslintrc.js:

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: "eslint:recommended",
  parserOptions: {
    ecmaVersion: 12,
    sourceType: "module"
  },
  rules: {
    "indent": [ "error", 2 ],
    "linebreak-style": [ "error", "unix" ],
    "quotes": [ "error", "double" ],
    "semi": [ "error", "always" ],
    "no-extra-parens": [ "error", "all" ],
    "no-unreachable-loop": 2,
    "no-constant-condition": 0,
    "no-else-return": 2,
    "no-extra-bind": 2,
    "no-multi-spaces": 2,
    "no-useless-return": 2,
    "yoda": 2,
    "no-undef-init": 2,
    "prefer-const": 2,
    "prefer-template": 2,
    "prefer-arrow-callback": 2,
    "no-var": 2,
    "no-useless-constructor": 2,
    "spaced-comment": 2,
    "switch-colon-spacing": 2,
    "quote-props": [ "error", "consistent-as-needed" ],
    "prefer-exponentiation-operator": 2,
    "no-unneeded-ternary": 2,
    "no-lonely-if": 2,
    "key-spacing": 2,
    "func-call-spacing": 2,
    "keyword-spacing": 2,
    "comma-dangle": 2,
    "brace-style": 2,
    "array-bracket-spacing": [ "error", "always", { objectsInArrays: false, arraysInArrays: false }],
    "camelcase": 2,
    "block-spacing": 2,
    "computed-property-spacing": 2,
    "dot-location": [ "error", "property" ],
    "dot-notation": 2,
    "no-implicit-coercion": 2,
    "prefer-rest-params": 2,
    "space-before-function-paren": [ "error", "never" ],
    "curly": [ "error", "multi-line" ],
    "function-call-argument-newline": [ "error", "never" ],
    "space-in-parens": 2,
    "space-before-blocks": 2,
    "no-trailing-spaces": 2
  }
};

Closing

Hopefully this was a good introduction to eslint. It's actually quite simple, and I think they did a good job designing something that would be simple to use, but also very powerful.