DEV Community

loading...
Cover image for Powerful React Project Setup

Powerful React Project Setup

Camilo Martinez
['Family Man', 'Engineer', 'Software Developer', 'Metalhead', 'English Student' ]
Updated on ・4 min read

Actually you can create a bootstrap React project with tools like CRA: Create React App, Vite and so on, but they have a lack of complementary tools to automate tasks that can make your the life and the life of your development team easier.

Project Settings

We will start with the vscode configurations. Creating a .vscode folder with a settings.json file inside.

{
    "emmet.excludeLanguages": [],
    "emmet.triggerExpansionOnTab": true,
    "emmet.includeLanguages": {
        "markdown": "html",
        "javascript": "javascriptreact",
        "typescript": "typescriptreact"
    },
    "files.exclude": {
        "**/*.js.map": {
            "when": "$(basename)"
        },
        "**/node_modules": true,
    },
    "html.autoClosingTags": true,
    "javascript.autoClosingTags": true,
    "javascript.suggest.autoImports": true,
    "search.exclude": {
        "**/coverage": true,
        "**/node_modules": true
    },
    "typescript.autoClosingTags": true,
    "typescript.suggest.autoImports": true,
}
Enter fullscreen mode Exit fullscreen mode
/.vscode/settings.json

There are a lot of VSCode extensions and configuration out there. If you are hungry for more check VSCode - Essentials and VSCode - React Flavored.


It's recommended to make these configurations on project settings and not in the global settings.

Linter

{
    "editor.formatOnSave": true,
    "javascript.format.enable": false,
    "javascript.validate.enable": true
    "typescript.format.enable": false,
    "typescript.validate.enable": true,
}
Enter fullscreen mode Exit fullscreen mode
/.vscode/settings.json

Install and config on the project folder:

npm i -D eslint
npx eslint --init
Enter fullscreen mode Exit fullscreen mode

You can choose the better for you, but my opinionated configurations are:

Use: To check syntax, find problems, and enforce code style
Type of modules: JavaScript modules (import/export)
Framework: React
Typescript: No
Run: Browser and Node
Style guide: Popular -> Standard (without ;)
Format: JavaScript

You will be asked to install extra packages. Answer yes.

When finish update configurations rules:

{
  rules: {
    'no-console': 'warn',
    'react/prop-types': "off",
    'react/self-closing-comp': 'warn',
    'padding-line-between-statements': [
      'error',
      {'blankLine': 'always', 'prev': '*', 'next': 'return'},
      {'blankLine': 'always', 'prev': ['const', 'let', 'var'], 'next': '*'},
      {'blankLine': 'any', 'prev': ['const', 'let', 'var'], 'next': ['const', 'let', 'var']}
    ]
  },
  settings: {
    react: {
      version: 'detect',
    },
  },
}
Enter fullscreen mode Exit fullscreen mode
.eslintrc.js

If you don't want to use eslint extensions, add list and fix command at end of scripts:

{
  "scripts": {
    ...,
    "lint:l": "eslint .",
    "lint:f": "eslint . --fix"
  }
}
Enter fullscreen mode Exit fullscreen mode
package.json

With ESLint can be enough, and Prettier it's optional because have a little better performance formatting than ESLint. If you want to use it go ahead.

Avoid import React error

Since React 17, you don't need to import React to use JSX anymore. But we would still need to import React in order to use Hooks or other exports that React provides.

To avoid eslint warns about import React, add these other rules:

{
  rules: {
    'react/jsx-uses-react': 'off',
    'react/react-in-jsx-scope': 'off',
  }
}
Enter fullscreen mode Exit fullscreen mode
.eslintrc.js

Add SKIP_PREFLIGHT_CHECK=true to an .env file in your project. That would permanently disable the preflight check.

Auto sort imports and properties

If you don't want to deal with sorting set this configuration.

{
  rules: {
    ...,
    "import/order": ["warn", {
      "pathGroups": [{
        "pattern": "~/**",
        "group": "external",
        "position": "after"
      }],
      "newlines-between": "always-and-inside-groups"
    }],
    "react/jsx-sort-props": [
      "warn",
      {
        "callbacksLast": true,
        "shorthandFirst": true,
        "noSortAlphabetically": false,
        "reservedFirst": true
      }
    ],
  },
}
Enter fullscreen mode Exit fullscreen mode
.eslintrc.js

 Format

{
    "[css]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}
Enter fullscreen mode Exit fullscreen mode
/.vscode/settings.json

Install Prettier and ESLint for prettier:

npm i -D prettier eslint-config-prettier
Enter fullscreen mode Exit fullscreen mode

Create a .prettierignore file on the root of the folder project:

build
coverage
node_modules
dist
Enter fullscreen mode Exit fullscreen mode

Create a .prettierrc.json file on the root of the folder project:

{
    "semi": false,
    "singleQuote": true
}
Enter fullscreen mode Exit fullscreen mode

Add extends prettier configuration at end of extends:

{
  extends: [
    ...,
    'prettier'
  ]
}
Enter fullscreen mode Exit fullscreen mode
.eslintrc.js

If you don't want to use prettier extensions, add check and write command at end of scripts:

{
  "scripts": {
    ...,
    "prettier:c": "prettier . --check",
    "prettier:w": "prettier . --write"
  }
}
Enter fullscreen mode Exit fullscreen mode
package.json

Git Linter

It works over Husky and only runs linters against staged git files. By doing so you can ensure no errors go into the repository and enforce code style.

Install and config on the project folder:

npx mrm@3 lint-staged
Enter fullscreen mode Exit fullscreen mode

Testing

Add jest environment support at end of env:

{
  env: {
    ...,
    jest: true,
  },
}
Enter fullscreen mode Exit fullscreen mode
.eslintrc.js

Debug test

Add this launch configuration.

{
    "version": "0.2.0",
    "configurations": [
        ...,
        {
            "type": "node",
            "name": "vscode-jest-tests",
            "request": "launch",
            "args": [
                "test",
                "--runInBand",
                "--no-cache"
            ],
            "cwd": "${workspaceFolder}",
            "console": "internalConsole",
            "internalConsoleOptions": "openOnSessionStart",
            "disableOptimisticBPs": true,
            "runtimeExecutable":
                "${workspaceFolder}/node_modules/.bin/react-scripts",
            "protocol": "inspector"
        }
    ]
}
Enter fullscreen mode Exit fullscreen mode
/.vscode/launch.json

Setup this options according to your needs.

Parameter Explanation
-runInBand Alias -i. Run all tests serially in the current process, rather than creating a worker pool of child processes that run tests. This is used for debugging environment.
-no-cache Disable cache. This is optional. On average, disabling the cache makes Jest at least two times slower.
runtimeExecutable This is a launch configuration for Create React App. Therefore, runtimeExecutable is set to react-scripts.

Auto update threshold

If you want to update automatically the coverage threshold use this package.

npm i -D jest-coverage-thresholds-bumper
Enter fullscreen mode Exit fullscreen mode

Add test update at end of scripts, create a jest section and update the lint-staged scripts:

{
  "scripts": {
    ...,
    "test:c": "react-scripts test --coverage --watchAll=false --ci",
    "test:cw": "react-scripts test --coverage --watchAll",
    "test:r": "open ./coverage/lcov-report/index.html",
    "coverage:tb": "jest-coverage-thresholds-bumper --margin 1"
  },
  "jest": {
    "coverageReporters": [
      "json",
      "json-summary",
      "lcov",
      "clover",
      "text",
      "text-summary"
    ],
    "coverageThreshold": {
      "global": {
        "statements": 0,
        "branches": 0,
        "functions": 0,
        "lines": 0
      }
    }
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --cache --fix",
      "npm run test:c",
      "npm run coverage:tb",
      "git add package.json"
    ],
    "*.{js,jsx,ts,tsx,css,md}": "prettier --write"
  }
}
Enter fullscreen mode Exit fullscreen mode
package.json

That’s All Folks!
Happy Coding
🖖

Buy me a coffee

Discussion (0)