Roman Imankulov

Roman Imankulov

Full-stack Python web developer from Porto

search results (esc to close)
05 Jul 2022

My setup for a typescript react project

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

See also.

Linters

What do we install:

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

Hey, I'm Roman, a full-stack Python web developer.

If you like what you read and want to work with me, drop me a line to roman.imankulov@gmail.com.

About me