ESLint is a great tool for enforcing code formatting rules. There are four separate rules just for semicolons! In this tutorial I will enable all four with some options and show what it looks like when the rules are broken.
Here are code examples that break each rule (with my particular config set):
I will explain each rule below and demonstrate some of the configs. None of these rules are enabled by default.
Here’s the complete configuration in my .eslintrc.json rules section for this tutorial:
"semi": ["error", "always", { "omitLastInOneLineBlock": false}],
"semi-style": ["error", "last"],
"no-extra-semi": ["error"],
"semi-spacing": ["error", { "before": false, "after": true }]I have every rule set to “error”, which means the compiler throws an error (instead of a warning) when a rule violation is encountered.
See the full ESLint rules list here and search “semi” to find links to the semicolon rules.
ESLint Semi
The ESLint semi rule provides value to teams either enforcing always using semicolons or never enforcing semicolons. I personally prefer to require semicolons so my code never has issues with automatic semicolon insertion.
If the semi rule is set to always (always require semicolons at the end of a statement), then an additional option of omitLastInOneLineBlock can be set to true or false. This is the specification I use.
Here’s the configuration for this rule from my .eslintrc.json rules section:
"semi": ["error", "always", { "omitLastInOneLineBlock": false}]The omitLastInOneLineBlock: false option ensures that one-line statements end in a semicolon after each individual code statement. Here’s an example:
If the semi rule is set to never ( disallow semicolons at the end of a statement), then an additional option of beforeStatementContinuationChars can be set to any, always, or never. The default is any, and this lets a coder choose whether to put a semicolon “at the end of statements if the next line starts with [, (, /, +, or -“.
The semi rule is not enabled by default (neither is the max-len rule).
ESLint Semi-Style
The semi-style rule enforces whether a semicolon is at the end of a line or placed at the beginning of the next line. Here’s an example configuration:
semi-style: ["error", "first"]And here’s an example of how code has to be written to follow this rule:
I have never personally met JS developers who like to add semicolons at the start of the next line, and it seems to conflict with the semi-spacing rule, which is discussed below.
If you set the style to “first” then semicolons might take up too many lines and make it hard to comply with the max-lines-per-function rule.
ESLint No-Extra-Semi
The no-extra-semi rule is perhaps the simplest of all the rules. It disallows unnecessary extra semicolons.
The rule has no other options. It is either off or set to warn or error.
This rule helps keep code clean by deleting unneeded code, just like the no-unused-vars rule.
ESLint Semi-Spacing
The ESLint semi-spacing rule behaves a little bit differently than I expected. It has two options, before and after. They each take a Boolean value and only enforce their rule on a single line.
Here’s an example of what that means:
console.log("Test 1");console.log("No Space Allowed");This code will only compile if before and after are both set to false. If the second console.log is on its own line, then the semicolons can have an unlimited number of spaces after. The linter does not check spaces after a semicolon if the semicolon is the last non-space character on a line.
When the rule is enabled, the default is "semi-spacing": ["error", { "before": false, "after": true }]. This means that on a single line, there cannot be a space before a semicolon and there must be a space after a semi colon if there is more code on the line.
Read about configuring global vars in the eslintrc file here.
