🖌️ Code style

Code style is extremely important when developing code that lasts. This is especially important with JavaScript because the interpreter is very tolerant and will allow a great deal of syntactic mistakes to pass undetected when code is executed. JS developers must exhibit great discipline in writing idiomatic code that is easily readable to all other developers.

Because of this, we're going to be adhering to a style guide for code written in this class. If you ever go out and write code professionally, you would do well to adhere to a structured style guide as well.

For every ESLint error, 1 point will be deducted. Make sure to lint and format your code!

🛠️ Linting and formatting

In order to do ensure that your JavaScript submissions adhere to this style guide, we will be using ESLint. You should definitely check your code style with ESLint before submitting. If you are not following the rules, 1 style point will be deducted for each type of error.

For each homework, you will have to set up ESLint by following the steps in the development guide (if it is not provided in the stub file). Our configuration for ESLint is based on the AirBNB style guide, which (believe it or not) is one of the most consistently used and loved configs out there. We also use a plugin called Unicorn which enables some unique good practice rules.

Because code readability includes formatting, we give some extra credit for formatting your code. Our setup is configured to use Prettier, a popular formatter for web development.

We will run ESLint on your code using this set of rules, so do not modify the rules yourself unless you want to add extra errorring rules! If you ever encounter an error message from ESLint that you don't understand, look it up and you will find explanatory documentation.

✏️ Syntax

const dog = { name: 'Rocket', age: 10 };
const cat = { name: 'Meowy', age: 4 };
const { name, age } = dog;

// ✅ correct - use previous destructuring
console.log('dog:', name, age);
// dots are fine as long as we haven't already destructured cat
console.log('cat:', cat.name, cat.age);

// ❌ incorrect - we've already destructured dog
console.log('dog:', dog.name, dog.age);
// ❌ incorrect
if (b === true) { ... }

// ✅ correct
if (b) { ... }
// ❌ incorrect
let a;
if (b) {
  a = 3;
} else {
  a = 2;

// ✅ correct
let a = b ? 3 : 2;
// ❌ incorrect
const func = (a) => {
  return a;

// ✅ correct
const func = (a) => a;
// ❌ incorrect (evil)
const func = new Function('console.log("hello!")');

// ✅ all correct
const func = () => {};
const func = function () {};
function func() {}
const s1 = 'the result of 3 + 3 is';
const s2 = 6;

// ❌ incorrect
const newString = s1 + ' ' + s2;
// ✅ correct
const newString = `${s1} ${s2}`;

There are more rules we didn't mention here that exist in the ESLint configuration. If you encounter one which needs to be broken under a specific circumstance, use // eslint-disable-next-line <rule-name> to disable it for whichever line it occurs on. You must have good reason to do this!