DEV Community

Cover image for Easy start of a Typescript/React project (w/ Yarn, ESlint and Prettier)
Vinicius Dias
Vinicius Dias

Posted on • Edited on

Easy start of a Typescript/React project (w/ Yarn, ESlint and Prettier)

#typescript #react #eslint #prettier

Hello everyone, in this super fast tutorial, I'll teach you how to start an application with ESlint and Prettier to standardize your code and improve your productivity, let's go?

Create project

  • Create project with create-react-app: 
yarn create react-app *your-application-name* --template=typescript
Enter fullscreen mode Exit fullscreen mode

ESlint

  • Add ESlint to the project on the development mode: 
yarn add eslint -D
Enter fullscreen mode Exit fullscreen mode
  • Start a new eslint file: 
yarn eslint --init
Enter fullscreen mode Exit fullscreen mode
  • Choose these answers for the above command: 
1. To check syntax, find problems, and enforce code style
2. JavaScript modules (import/export)
3. React
4. Yes
5. Browser
6. Use a popular style guide
7. Airbnb
8. JSON
9. No
Enter fullscreen mode Exit fullscreen mode
  • Install with Yarn the list of required dependencies that appear after denying intall with npm in the last choice of above command (Remove eslint and additional versions of react hooks). The command should look something like this: 
yarn add eslint-plugin-react@^7.20.0 @typescript-eslint/eslint-plugin@latest eslint-config-airbnb@latest eslint@^7.2.0 eslint-plugin-import@^2.21.2 eslint-plugin-jsx-a11y@^6.3.0 eslint-plugin-react-hooks@^4 @typescript-eslint/parser@latest -D
Enter fullscreen mode Exit fullscreen mode

be careful the dependencies can change.

  • Create a file .eslintignore in the root of the project.

.eslintignore :

**/*.js
node_modules
build
Enter fullscreen mode Exit fullscreen mode
  • Add the following library in the development mode, to import typescript by default: 
yarn add eslint-import-resolver-typescript -D
Enter fullscreen mode Exit fullscreen mode
  • Add some configurations in file eslintrc.json.

eslintrc.json :

{
  ...
  "extends": [
    ...
    "plugin:@typescript-eslint/recommended"
  ],
  ...
  "plugins": [
    ...
    "react-hooks"
  ],
  "rules": {
        "react-hooks/rules-of-hooks": "error",
        "react-hooks/exhaustive-deps": "warn",
        "react/jsx-filename-extension": [
          1,
          {
            "extensions": [
              ".tsx"
            ]
          }
        ],
        "import/prefer-default-export": "off",
        "import/extensions": [
          "error",
          "ignorePackages",
          {
            "ts": "never",
            "tsx": "never"
          }
        ]
      },
    "settings": {
        "import/resolver": {
            "typescript": {}
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

... represents the code already in the file.

Prettier

  • Add Prettier to the project on the development mode: 
yarn add prettier eslint-config-prettier eslint-plugin-prettier -D
Enter fullscreen mode Exit fullscreen mode
  • Integrate the prettier with eslint by adding a few more settings to the file eslintrc.json.

eslintrc.json :

{
  ...
  "extends": [
    ...
    "plugin:prettier/recommended"
  ],
  ...
  "plugins": [
    ...
    "prettier"
  ],
  "rules": {
    ...
    "prettier/prettier": "error",
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "react/jsx-one-expression-per-line": "off",
    "no-use-before-define":"off"

   },
  ...
}
Enter fullscreen mode Exit fullscreen mode
  • Create a file prettier.config.js in the root of the project.

prettier.config.js :

module.exports = {
    singleQuote: true,
    trailingComma: 'all',
    allowParens: 'avoid',
}
Enter fullscreen mode Exit fullscreen mode

  • Go to the .src/index.tsx and ./src/reportWebVitals.ts files and save the files for them to be formatted by Prettier.

  • Start the project in the development mode:

yarn start
Enter fullscreen mode Exit fullscreen mode

Both configuration files for Prettier and ESLint can be adjusted to your needs. If you need to add rules, you can do it with both files.

That's it for today, guys, I hope you enjoyed the article and that it can help you and your team in some way.

Enjoy!

Follow me on Twitter

Top comments (3)

Collapse
 
je12emy profile image
Jeremy •

Just what I was looking for, thank you! Time to fix +100 errors XD

Collapse
 
abelagoi profile image
Agoi Abel Adeyemi •

There is no eslintrc.json when I followed these instructions.

Collapse
 
viniciusmdias profile image
Vinicius Dias •

Hi Agoi, thanks for feedback!
The file is called '.eslintrc.json.' because he has the dot in the front it could be a hidden file, it depends on your folder settings, try changing the settings to show the hidden files

Read next

m1dnightdev profile image

Creating Theme Systems in React with SCSS and Redux

M1dnightGMR -

tymzap profile image

🍯 Honeypot field: an easy to implement React security technique

Tymek Zapała -

johnretsas profile image

Getting Started with a Node.js TypeScript Boilerplate

johnretsas -

chintanonweb profile image

Top Angular Performance Killers You Must Avoid Solve Like a Pro

chintanonweb -