Frontend Coding Standards

Eslint Set-Up

1. AirBnB JavsScript Style Guide
2. AirBnB TypeScript Eslint
3. TypeScript Eslint Recommended
4. Prettier

Common issues caught by our linting setup:

Adopt	Error	Meaning	Reference
✔️	@typescript-eslint/default-param-last	Enforce default parameters to be last.	https://typescript-eslint.io/rules/default-param-last
✔️	@typescript-eslint/naming-convention	Enforce naming conventions for everything across a codebase.	https://typescript-eslint.io/rules/naming-convention
:heavy_check_mark:	@typescript-eslint/no-explicit-any	Disallow the any type.	https://typescript-eslint.io/rules/no-explicit-any
✔️	@typescript-eslint/no-implied-eval	Disallow the use of eval()-like methods.	https://typescript-eslint.io/rules/no-implied-eval
✔️	@typescript-eslint/no-use-before-define	Disallow the use of variables before they are defined.	https://typescript-eslint.io/rules/no-use-before-define
✔️	@typescript-eslint/no-unused-expressions	Disallow unused expressions.	https://typescript-eslint.io/rules/no-unused-expressions
✔️	@typescript-eslint/no-unused-vars	Disallow unused variables.	https://typescript-eslint.io/rules/no-unused-vars
✔️	@typescript-eslint/return-await	Enforce consistent returning of awaited values.	https://typescript-eslint.io/rules/return-await
✔️	@typescript-eslint/no-shadow	Disallow variable declarations from shadowing variables declared in the outer scope.	https://typescript-eslint.io/rules/no-shadow/
✔️	Array-callback-return	Enforce return statements in callbacks of array methods	https://eslint.org/docs/latest/rules/array-callback-return
✔️	consistent-return	Require return statements to either always or never specify values	https://eslint.org/docs/latest/rules/consistent-return
✔️	eqeqeq	Require the use of === and !==	https://eslint.org/docs/latest/rules/eqeqeq
✔️	guard-for-in	Looping over objects with a for in loop will include properties that are inherited through the prototype chain. This behavior can lead to unexpected items in your for loop.	https://eslint.org/docs/latest/rules/guard-for-in
✔️	import/cycle	Ensures that there is no resolvable path back to this module via its dependencies.	https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/no-cycle.md
✔️	import/order	Enforce a convention in the order of require() / import statements. +(fixable) The --fix option on the [command line] automatically fixes problems reported by this rule.	https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/order.md
✔️	import/named	Verifies that all named imports are part of the set of named exports in the referenced module.	https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/named.md
✔️	import/no-duplicates	Disallow duplicate module imports	https://eslint.org/docs/latest/rules/no-duplicate-imports
✔️	import/no-named-as-default	Reports use of an exported name as the locally imported name of a default export.	https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/no-named-as-default.md
✔️	import/prefer-default-export	Prefer default export on a file with single export	https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/prefer-default-export.md
✔️	no-console	Disallow the use of console	https://eslint.org/docs/latest/rules/no-console
✔️	no-else-return	Disallow else blocks after return statements in if statements	https://eslint.org/docs/latest/rules/no-else-return
✔️	no-empty-pattern	Disallow empty destructuring patterns	https://eslint.org/docs/latest/rules/no-empty-pattern
✔️	no-nested-ternary	Disallow nested ternary expressions	https://eslint.org/docs/latest/rules/no-nested-ternary
✔️	no-param-reassign	This rule aims to prevent unintended behavior caused by modification or reassignment of function parameters.	https://eslint.org/docs/latest/rules/no-param-reassign
✔️	No-plusplus	Disallow the unary operators ++ and --	https://eslint.org/docs/latest/rules/no-plusplus
✔️	no-restricted-globals	Explicitly call global variables (e.g. Number.isNan vs just isNaN)	https://eslint.org/docs/latest/rules/no-restricted-globals
✔️	no-restricted-syntax	This rule disallows specified (that is, user-defined) syntax.	https://eslint.org/docs/latest/rules/no-restricted-syntax
✔️	no-return-assign	Disallow assignment operators in return statements	https://eslint.org/docs/latest/rules/no-return-assign
✔️	no-underscore-dangle	Disallow dangling underscores in identifiers	https://eslint.org/docs/latest/rules/no-underscore-dangle
✔️	Object-shorthand	Require or disallow method and property shorthand syntax for object literals	https://eslint.org/docs/latest/rules/object-shorthand
✔️	one-var	Enforce variables to be declared either together or separately in functions	https://eslint.org/docs/latest/rules/one-var
✔️	Prefer-const	Require const declarations for variables that are never reassigned after delcared	https://eslint.org/docs/latest/rules/prefer-const
✔️	Prefer-promise-reject-errors	Require using Error objects as Promise rejection reasons	https://eslint.org/docs/latest/rules/prefer-promise-reject-errors
✔️	Prefer-regex-literals	Disallow use of the RegExp constructor in favor of regular expression literals	https://eslint.org/docs/latest/rules/prefer-regex-literals
✔️	prefer-template	Require template literals instead of string concatenation	https://eslint.org/docs/latest/rules/prefer-template
✔️	radix	Enforce the consistent use of the radix argument when using parseInt()	https://eslint.org/docs/latest/rules/radix
✔️	react/jsx-boolean-value	This rule will enforce one or the other to keep consistency in your code.	https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-boolean-value.md
✔️	react/function-component-definition	This option enforces a specific function type for function components.	https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/function-component-definition.md
✔️	react/jsx-curly-brace-presence	Disallow unnecessary JSX expressions when literals alone are sufficient	https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-curly-brace-presence.md
✔️	react/jsx-filename-extension	JSX not allowed in files with extension '.js'	https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-filename-extension.md
✔️	react/no-array-index-key	Disallow usage of Array index in keys	https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-array-index-key.md
✔️	react/no-unstable-nested-components	Creating components inside components (nested components) will cause React to throw away the state of those nested components on each re-render of their parent.	https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unstable-nested-components.md
✔️	react/jsx-no-useless-fragment	A fragment is redundant if it contains only one child, or if it is the child of a html element, and is not a keyed fragment.	https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-useless-fragment.md
✔️	react/jsx-props-no-spreading	Enforces that there is no spreading for any JSX attribute. This enhances readability of code by being more explicit about what props are received by the component. It is also good for maintainability by avoiding passing unintentional extra props and allowing react to emit warnings when invalid HTML props are passed to HTML elements.	https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-props-no-spreading.md
✔️	react/no-danger	Dangerous properties in React are those whose behavior is known to be a common source of application vulnerabilities. The properties names clearly indicate they are dangerous and should be avoided unless great care is taken.	https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-danger.md