05 Jul 2022

My setup for a typescript react project

table of contents

A memo about my setup for a TypeScript React project: I copy and paste these commands whenever I need to start a new project and ensure that it has all linters, formatters, and pre-commit hooks configured.

Initialize proper version

I use nvm, and I automatically initialize the node environment with nvm if .nvmrc is found.

# File ~/.zshrc
test -f ./.nvmrc && nvm use

Start a new project

I tried Vite for a few recent projects and liked it. That’s how I create a new empty project.

yarn create vite  --template react-ts

Alternatively, here’s you can create a new project with create-react-app:

yarn create react-app my-app --template typescript

Define a node version

Use Node 16.x (aka Gallium) in a project.

echo lts/gallium > .nvmrc

Use Node 14.x (aka Fermium) in a project.

echo lts/fermium > .nvmrc

See Node codenames for more options.

Pinning versions

You can pin Node and NPM to a specific version.

Add to package.json

{
  "engines": {
    "node": "^16",
    "npm": "^8"
  }
}

Node is permissive, though, and by default it only raises a warning if engines don’t match. You can make node fail every time it tries to run the code in the environment that doesn’t match the pinned versions.

Create an .npmrc file.

echo "engine-strict=true" > .npmrc

Linters

What do we install:

ESLint for linting.
Prettier for consistent autoformatting.
TypeScript ESLint projects (parser and eslint-plugin) to help eslint understand TypeScript syntax have TypeScript-specific rules.
ESLint config for the Google style guide.
ESLint config for prettier. A config that turns off all rules that are unnecessary or might conflict with Prettier.
React-specific linting rules for ESLint.

yarn add -D \
  eslint prettier \
  @typescript-eslint/parser @typescript-eslint/eslint-plugin \
  eslint-config-google eslint-config-prettier eslint-plugin-react

Add configuration file .eslintrc.js. Here we extend the recommended ESLint configuration with the rules from the extensions that we’ve installed above.

In the rules section, I overwrite some rules to my preferences. Usually, this sections grows with the project.

module.exports = {
  extends: [
    "eslint:recommended",
    "google",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended",
    "plugin:react/jsx-runtime",
    "prettier",
  ],
  plugins: ["@typescript-eslint"],
  parserOptions: {
    ecmaVersion: 2017,
    sourceType: "module",
  },
  env: {
    es6: true,
    node: true,
    browser: true,
  },
  rules: {
    "require-jsdoc": "off",
    "valid-jsdoc": "off",
    "react/boolean-prop-naming": "error",
    "react/sort-prop-types": "error",
  },
  settings: {
    react: {
      version: "detect",
    },
  },
};

I use single quotes in JavaScript strings, so I add a single-quote configuration for prettier: .prettierrc.json:

echo '{ "singleQuote": true }' > .prettierrc.json

Install lint-staged and husky with mrm.

npx mrm@2 lint-staged

It installs dependencies and creates or updates necessary config files.

Double-check lint-staged configuration. You should have the following section in your package.json.

  "lint-staged": {
    "*.{js,jsx}": "eslint --cache --fix",
    "*.{js,jsx,css,md}": "prettier --write",
    "*.{ts,tsx}": "sh -c 'tsc --noEmit'"
  }

Verify current project

npx eslint --cache --fix src
npx prettier --write src

VSCode

VSCode should catch the Linter configuration for the project. If it doesn’t, simply restarting VSCode often helps.

Automate this guideline

Note to self: you can turn this memo into an mrm preset.

Roman Imankulov