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>
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.
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
- ES Lint extension
Install and config on the project folder:
npm install -D eslint
npx eslint --init
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
You will be asked to install extra packages. Answer yes.
Semi-colon exception
Because thestandard
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
:
Create a .eslintignore
file on the root of the folder project:
build
coverage
dist
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
:
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:
Auto sort imports and properties
If you don't want to deal with sorting set this configuration.
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
- Prettier - Code formatter extension
Install Prettier and ESLint for prettier:
npm install -D prettier eslint-config-prettier
Create a .prettierignore
file on the root of the folder project:
build
coverage
dist
package-lock.json
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
}
Add extends prettier configuration at the end of extends
:
If you don't want to use prettier extensions, add check
and write
command at end of scripts
:
HTML Linter
npm install --global htmlhint
If you also want to lint HTML with ESLint install this additional plugin:
npm install -D eslint-plugin-html
And add html
to the list of plugins
CSS Linter
- Stylelint extension
Install and config on the project folder:
npm install -D stylelint stylelint-config-standard
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"
]
}
To prevent both VS Code's built-in linters and Stylelint from reporting the same errors, you can disable the built-in linters.
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
Testing
Add jest environment support at end of env
:
Auto update threshold
If you want to update automatically the coverage threshold use this package.
npm install -D jest-coverage-thresholds-bumper
Add test update at end of scripts
, create a jest
section and update the lint-staged
scripts:
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
Even though click-to-react-component
is added to dependencies
, tree-shaking will remove click-to-react-component
from production
builds.
With a combination of keys and clicking over the component in the browser, it will transport you to the source component in your editor.
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>
);
Styles
- Sass(https://sass-lang.com/)
If you want still to use Sass. CRA has SCSS
built support. Install this package:
npm install -D sass
Take care of using
sass
and notnode-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
Add it as extends on .stylelintrc.json
file
{
"extends": [
...,
- "stylelint-config-standard",
+ "stylelint-config-standard-scss",
- "stylelint-config-prettier",
+ "stylelint-config-prettier-scss",
]
}
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 🖖
Top comments (0)