DEV Community

Chun
Chun

Posted on • Updated on

Set up a new React project with TypeScript, ESLint and Prettier

#react #typescript #tutorial #eslint

This is my workflow when I set up a new project, it should only take a few minutes to get everything up and running.

Create React App

The easiest way to create a new React project is to use the create react app, and you can easily have it set up with TypeScript too.

npx create-react-app my-app --template typescript
# or
yarn create react-app my-app --template typescript
Enter fullscreen mode Exit fullscreen mode

ESLint

Next, you will want to install ESLint, and plugins for TypeScript:

yarn add -D eslint eslint-plugin-react @typescript-eslint/eslint-plugin @typescript-eslint/parser
Enter fullscreen mode Exit fullscreen mode

Then in your project directory, create .eslintrc.js:

module.exports = {
  parser: '@typescript-eslint/parser',
  extends: [
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  },
  rules: {},
  settings: {
    react: {
      version: 'detect', // Tells eslint-plugin-react to automatically detect the version of React to use
    },
  },
  env: {
    jest: true,
  },
};
Enter fullscreen mode Exit fullscreen mode

Now, you will have basic linting rules for TS:
ESLint

Prettier

Install Prettier for formatting your code:

yarn add -D prettier eslint-plugin-prettier eslint-config-prettier
Enter fullscreen mode Exit fullscreen mode

Create .prettierrc.json, and add the following:

{
  "trailingComma": "es5",
  "printWidth": 100,
  "semi": true,
  "singleQuote": true
}
Enter fullscreen mode Exit fullscreen mode

Then modify the eslintrc.js, and add these two lines:

extends: [
  ...
  'prettier/@typescript-eslint', // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
  'plugin:prettier/recommended', // Enables eslint-plugin-prettier and displays prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
],
Enter fullscreen mode Exit fullscreen mode

With the Prettier extension installed in VS Code, it will show any formatting errors:
Prettier linting warnings

VS Code

I would recommend turning on formatOnSave, and fix all ESLint error on save, to make your life even easier:

{
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
  },
}
Enter fullscreen mode Exit fullscreen mode

Finally

I hope you found it useful, please let know if you have any feedback.

Top comments (1)

Collapse
 
nickytonline profile image
Nick Taylor •

Nice! Just wanted to mention another alternative to CRA in case you weren’t aware, TSDX.

It was created by Jared Palmer and it’s endorsed by the TypeScript team. It handles multiple project types including React.

GitHub logo jaredpalmer / tsdx

Zero-config CLI for TypeScript package development

tsdx

Blazing Fast Blazing Fast Blazing Fast Greenkeeper badge

Despite all the recent hype, setting up a new TypeScript (x React) library can be tough. Between Rollup, Jest, tsconfig, Yarn resolutions, ESLint, and getting VSCode to play nicely....there is just a whole lot of stuff to do (and things to screw up). TSDX is a zero-config CLI that helps you develop, test, and publish modern TypeScript packages with ease--so you can focus on your awesome new library and not waste another afternoon on the configuration.

Features

TSDX…

View on GitHub

Looking forward to your next post!

Read next

jancizmar profile image

I have localized the best short-linking platform in the world

Jan Cizmar -

mayallo profile image

How I Improved Video Streaming with FFmpeg and Node.js

Mohamed Mayallo -

igadii profile image

How TypeScript Makes React Better: Smoother Developer Experience, Fewer Bugs (With a useState Example)

Idris Gadi -

be11amer profile image

Part 2: Generics in Collections, Sorting, and Utility Methods

Bellamer -