DEV Community

Cover image for CRA: Powerful React Project Setup
Camilo Martinez
Camilo Martinez

Posted on • Updated on

CRA: Powerful React Project Setup

#react #vscode #productivity #testing

Actually, you can create a bootstrap React project with tools like CRA: Create React App

npx create-react-app <project-name> [--template typescript] --use-npm 
cd <project-name>
Enter fullscreen mode Exit fullscreen mode

A shiny clean project was created. But it will need some extra tools to automate tasks that can make your 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.includeLanguages": {
        "markdown": "html",
        "javascript": "javascriptreact",
        "typescript": "typescriptreact"
    },
    "emmet.showSuggestionsAsSnippets": true,
    "emmet.triggerExpansionOnTab": true,
    "files.exclude": {
        "**/*.js.map": {
            "when": "$(basename)"
        },
        "**/node_modules": true,
    },
    "html.autoClosingTags": true,
    "javascript.autoClosingTags": true,
    "javascript.suggest.completeFunctionCalls": true,
    "typescript.suggest.completeFunctionCalls": true,
    "javascript.inlayHints.functionLikeReturnTypes.enabled": true,
    "typescript.inlayHints.functionLikeReturnTypes.enabled": true,
    "javascript.inlayHints.parameterNames.enabled": "all",
    "typescript.inlayHints.parameterNames.enabled": "all",
    "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 configurations 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.

JS 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 install -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 #or Yes if the project uses it
Run: Browser #and Node if use Next.js
Style guide: Popular -> Standard #JS without semi-colon ;
Format: JavaScript
Enter fullscreen mode Exit fullscreen mode

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

Semi-colon exception

Because the standard style guide does not use semi-colons (;) take this in mind. If the next statement right after the line without a semicolon starts with one of the following special operators [, (, +, \*, /, -, ,, ., it will be recognized as an expression to the previous statement. Then you are going to need to start the line with ;.

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

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

build
coverage
dist
Enter fullscreen mode Exit fullscreen mode

There is no need to add node_modules because it was ignored by default.

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 --ext .js,.jsx,.ts,.tsx"
  }
}
Enter fullscreen mode Exit fullscreen mode
package.json

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 to use Hooks or other exports that React provides.

To avoid ESLint warns about import React, add a plugin:

{
  extends: {
+    'plugin:react/jsx-runtime',
  }
}
Enter fullscreen mode Exit fullscreen mode
.eslintrc.js

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

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.

 JS Format 

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

Install Prettier and ESLint for prettier:

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

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

build
coverage
dist
package-lock.json
Enter fullscreen mode Exit fullscreen mode

There is no need to add node_modules because it was ignored by default.

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 the 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

HTML Linter 

npm install --global htmlhint
Enter fullscreen mode Exit fullscreen mode

If you also want to lint HTML with ESLint install this additional plugin:

npm install -D eslint-plugin-html
Enter fullscreen mode Exit fullscreen mode

And add html to the list of plugins

{
  plugins: [
    'react',
+    'html'
  ],
}
Enter fullscreen mode Exit fullscreen mode
.eslintrc.js

CSS Linter

Install and config on the project folder:

npm install -D stylelint stylelint-config-standard
Enter fullscreen mode Exit fullscreen mode

Create a configuration file named .stylelintrc.json in the top level of your repository.

{
  "extends": "stylelint-config-standard",
  "rules": {
    "declaration-colon-newline-after": "always-multi-line",
    "property-no-unknown": [ true, {
      "ingnoreProperties": ["content-visibility"] 
    }]
  },
  "ignoreFiles": [
    "build/**",
    "coverage/**",
    "dist/**",
    "**/*.js",
    "**/*.jsx", 
    "**/*.ts",
    "**/*.tsx" 
  ] 
}
Enter fullscreen mode Exit fullscreen mode

To prevent both VS Code's built-in linters and Stylelint from reporting the same errors, you can disable the built-in linters.

{ 
+    "stylelint.enable": true,
+    "css.validate": false,
+    "less.validate": false,
+    "scss.validate": false,
+    "[css][scss]": {
+        "editor.defaultFormatter": "stylelint.vscode-stylelint"
+    }
}
Enter fullscreen mode Exit fullscreen mode
/.vscode/settings.json

Stylelint has more than 170ish rules. Sometimes it will show you an error that will literally cause a problem.

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

Auto update threshold

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

npm install -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": [
+      "text",
+      "html",
+      "lcov"
+    ],
+    "coverageThreshold": {
+      "global": {
+        "statements": 0,
+        "branches": 0,
+        "functions": 0,
+        "lines": 0
+      }
+    }
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx}": [
+      "eslint --cache --fix"
+    ],
+    "*.{css,scss}": [
+      "stylelint --fix"
+    ],
+    "*.{js,jsx,ts,tsx,css,md}": "prettier --write"
+  }
}
Enter fullscreen mode Exit fullscreen mode
package.json

Debug

It's not an extension. It is an npm package to install on your project that helps with debugging process.

npm install -S click-to-react-component
Enter fullscreen mode Exit fullscreen mode

Even though click-to-react-component is added to dependencies, tree-shaking will remove click-to-react-component from production builds.

beam me up

With a combination of keys and clicking over the component in the browser, it will transport you to the source component in your editor.

clic-to-component

Works with CRA, vite, and Next adding these configurations on your project:

+import { ClickToComponent } from "click-to-react-component";
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
+   <ClickToComponent />
    <App />
  </React.StrictMode>
);
Enter fullscreen mode Exit fullscreen mode

Styles

If you want still to use Sass. CRA has SCSS built support. Install this package:

npm install -D sass
Enter fullscreen mode Exit fullscreen mode

Take care of using sass and not node-sass package because is deprecated.

If you decided to use Stylelint. Add this package:

npm remove stylelint-config-standard stylelint-config-prettier
npm install --D stylelint-config-standard-scss stylelint-config-prettier-scss
Enter fullscreen mode Exit fullscreen mode

Add it as extends on .stylelintrc.json file

{
  "extends": [
    ..., 
-    "stylelint-config-standard",
+    "stylelint-config-standard-scss",
-    "stylelint-config-prettier",
+    "stylelint-config-prettier-scss",
  ]
}
Enter fullscreen mode Exit fullscreen mode

Now rename manually all .css files to .scss and update src/App.js to import src/App.scss. This file and any other file will be automatically compiled if imported with the extension .scss.

That’s All Folks!
Happy Coding 🖖

beer

Top comments (0)

Read next

itrabbi profile image

Why should we learn the MERN stack?

Rabbi Hassan -

amatisse profile image

Crafting Your VSCode Workspace: Effective Customization Tips 🎨

AMatisse -

phuocng profile image

Lazy load a Google Map

Phuoc Nguyen -

abhilaksharora profile image

A Powerful Password Generator NPM Package

abhilaksh-arora -