Unrelated to this article picture of me eating Saturday breakfast.

Setting up your create-react-app project with TypeScript & VSCode

I found myself copy pasting the same configuration over and over every time I start new “create-react-app” project, so here is how I always start.

I’m using create-react-app v3.1.1 as of writing this document (September 18th, 2019)

I will show here how to setup a project in a certain configuration:

• create-react-app with TypeScript
• VSCode as code editor
• eslint with prettier (style on save)
• set up root alias for local imports (“components/Button.tsx” instead of “../../../../components/Button.tsx”)

Bootstrap a new typescript project:

npx create-react-app create-react-app-boilerplate --typescript && cd create-react-app-boilerplate

Install all dev dependencies (eslint + prettier):

npm i -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser prettier eslint-config-prettier eslint-config-react eslint-plugin-prettier

Add ./.eslintrc.js file

Add ./.eslintignore file

Add ./.prettierrc.js file (it’s up to you what settings you like here, don’t judge me for “semi: true”)

Add ./.vscode/settings.json file

Edit ./package.json file and update “scripts” section so that you will actually run eslint on npm run test along with unit tests. Also it’s sometimes useful to run eslint with --fix flag (just change “scripts” section, don’t change other settings):

Add “baseUrl” option equal to“src” within “compilerOptions” section in ./tsconfig.json file (just add this option, don’t change other settings):

You should also install these extensions in your VSCode:

• ESLint (dbaeumer.vscode-eslint)
• Prettier — Code formatter (esbenp.prettier-vscode)

Testing

Another thing worth mentioning is that it is nowadays a popular solution to use react-testing-library by Kent C. Dods. Here’s how you can add it to your project:

Install these deps:

npm i -D @testing-library/react @testing-library/jest-dom

Add src/setupTests.ts file with this import:

import '@testing-library/jest-dom/extend-expect';

And finally update default test src/App.test.tsx

import React from 'react';
import { render } from '@testing-library/react';
import App from './App';
it('renders without crashing', () => {
  const { getByText } = render(<App />);
  expect(getByText('Learn React')).toBeInTheDocument();
});

Repo

You can check this diff with all the configuration I showed you here:
https://github.com/michal-wrzosek/create-react-app-boilerplate/compare/c329d3dc3892bc3e19c78d06a840edb8975078c3...master