Intro

In this section, we will discuss coding standards for TypeScript and the set of standards that we use at Figuro.

TypeScript is a typed superset of JavaScript that allows for strict typing, catching errors at compile time, and improved code navigation. To ensure that our TypeScript code is of the highest quality, we follow a set of coding standards that we have found to be effective.

Our coding standards are enforced using ESLint, a popular JavaScript and TypeScript linting tool that can analyze code for potential errors and stylistic issues. To make our TypeScript linting experience easier, we use the following configuration that extends from the Next.js and Turbo configurations, as well as a few plugins:

{
    "extends": [
      "next",
      "next/core-web-vitals",
      "plugin:react/recommended",
      "plugin:@typescript-eslint/recommended",
      "prettier",
      "turbo"
    ],
    "plugins": [
      "@typescript-eslint"
    ]
  }

• next: This extends from the Next.js configuration, which includes a set of best practices for building Next.js applications. This configuration includes support for React, JSX, and ECMAScript modules.
• next/core-web-vitals: This extends from the Next.js next configuration and adds support for Core Web Vitals, which are a set of metrics that are used to measure the user experience of a website.
• plugin:react/recommended: This extends from the React recommended configuration, which includes a set of rules for React development.
• plugin:@typescript-eslint/recommended: This extends from the recommended configuration for TypeScript-specific ESLint rules. This configuration includes rules for type-checking, variable declaration, and function usage.
• prettier: This configuration uses the Prettier code formatter, which ensures that code is formatted in a consistent and readable way.
• turbo: This extends from a popular set of ESLint configurations that are designed to improve code quality and catch bugs early.

We also use the @typescript-eslint plugin, which includes a set of additional TypeScript-specific rules that can be used to catch errors and improve code quality.

By using these coding standards, we are able to ensure that our TypeScript code is of the highest quality. We are also able to catch errors early and ensure that our code is readable and maintainable.

The following is a full example of out TypeScript ESLint configuration.

module.exports = {
    extends: [
        "next",
        "next/core-web-vitals",
        "plugin:react/recommended",
        "plugin:@typescript-eslint/recommended",
        "prettier",
        "turbo",
    ],
    parser: "@typescript-eslint/parser",
    parserOptions: {
        ecmaVersion: 12,
        sourceType: "module",
    },
    plugins: ["@typescript-eslint"],

    rules: {},
    env: {
        browser: true,
        es2021: true,
    },
    settings: {
        react: {
            version: "detect",
        },
    },
    overrides: [
        {
            files: ["*.ts", "*.tsx"],
            rules: {
                "@typescript-eslint/explicit-module-boundary-types": "off",
            },
        },
    ],
};

tip

Coding standards are an essential part of software development, and TypeScript is no exception. At Figuro, we use a set of coding standards that have proven to be effective in ensuring that our TypeScript code is of the highest quality. By using these standards, we are able to catch errors early, improve code quality, and ensure that our code is readable and maintainable.