DEV Community

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

Posted on • Updated on

Easy start of a Typescript/React project (w/ Yarn, ESlint and 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

Discussion (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 Author

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