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:
- 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.