Last updated: January 11, 2022
Code style is extremely important when developing code that you hope to last longer than its first writing. 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 each type of style mistake (syntax/ ESLint), 0.5 points will be deducted ❗
// const key = obj.key (x)const { key } = obj // const otherKey = obj.key (x)const { key: otherKey } = obj const a = 1const b = 1 // const obj = { a: a, b: b } (x)const obj = { a, b } const obj = { key1: a, key2: b } // this is fine because key names are different // const func = obj => { const { key } = obj ... } (x)const func = ({ key }) => { ... }
const b = true// if (b == True) {...} (x)if (b) {...} const obj = null// if (obj != null) {...} (x)if (obj) {...} const num = 0// if (num != 0) {...} (x)if (num) {...}
if/else
block whenever possiblelet aconst b = true // if (b) { a = 3 } else { a = 2 } (x)a = b ? 3 : 2
===
and !==
instead of ==
and !=
()
around function inputs if there is only 1 inputs// const func = (a) => a (x)const func = a => a
{}
and return
when the function body takes one line only// const func = a => { return a } (x)const func = a => a
=>
or function
const func = (...) => {} const func = function (...) {}
let
or const
for variable declaration instead of var
const s1 = 'the result of 3 + 3 is'const s2 = 6 // const newString = str1 + str2 (x)const newString = `${s1} ${s2}`
console.log()
statementsIn 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, 0.5 style point will be deducted for each type of error.
For each homework, you will have to set up ESLint by following the steps below (if it is not provided in the stub file). The rules are used in Airbnb, which are among the best-accepted and most general JavaScript style guidelines.
Create a file called .eslintrc
at the root directory. Copy and paste the following rules.
We will run ESLint on your code using this set of rules, so do not modify the rules yourself!
If you ever encounter an error message from ESLint that you don't understand, just Google it up.
If you are still unsure, post on CW and we are very happy to help :-)
{ "env": { "browser": true, "node": true, "es6": true }, "extends": "airbnb", "parser": "babel-eslint", "rules": { "brace-style": [2, "1tbs"], "camelcase": 0, "no-bitwise": 2, "no-empty": 2, "no-ex-assign": 2, "no-lonely-if": 2, "no-mixed-spaces-and-tabs": 2, "no-tabs": 2, "no-underscore-dangle": 0, "no-unused-vars": 0, "quote-props": [2, "as-needed"], "quotes": [2, "single", { "avoidEscape": true, "allowTemplateLiterals": true }], "strict": 0, "semi": ["error", "never"], // require or disallow use of semicolons instead of ASI, "arrow-parens": ["error", "as-needed"], // require the use of parenthesis when needed "prefer-destructuring": ["error", { "array": true, "object": true }, { "enforceForRenamedProperties": true }], "eqeqeq": ["error", "smart"], "prefer-template": "error", "react/jsx-filename-extension": 0, "react/prop-types": 0, "no-plusplus": 0, "max-len": 0, "react/jsx-props-no-spreading": 0, "jsx-a11y/label-has-associated-control": 0, "jsx-a11y/img-redundant-alt": 0 }, "parserOptions": { "ecmaVersion": 2017 }}
The specific definitions for these rules can be found in the ESLint rules documentation. Including them in your final project would probably be a good idea as well - it could save you a great deal of trouble down the line!
Your file structure should now look similar to this.
In package.json
, you should add the following packages
"devDependencies": { "eslint-plugin-import": "^2.21.2", "eslint-plugin-jsx-a11y": "^6.3.0", "eslint-plugin-react": "^7.20.0", "eslint-plugin-react-hooks": "^4 || ^3 || ^2.3.0 || ^1.7.0", ... }, "dependencies": { "eslint": "^6.8.0", "eslint-config-airbnb": "^18.2.0", "babel-eslint": "^10.1.0", ... }
Your package.json
should look similar to this
Make sure you are using VSCode and install the ESLint extension if you have not done so.
Now, run npm install
in your command-line tools/ terminal. After the installation is complete,
open VS Code, and you should be able to see ESLint complaining if you are using bad styles :)
If you want to see a summary of all errors in your terminal like the following, please follow the remaining steps
npm i -g eslint
eslint ./