This content originally appeared on DEV Community and was authored by Camilo Martinez
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,
}
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
- ES Lint extension
{
"editor.formatOnSave": true,
"javascript.format.enable": false,
"javascript.validate.enable": true
"typescript.format.enable": false,
"typescript.validate.enable": true,
}
Install and config on the project folder:
npm i -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
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',
},
},
}
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"
}
}
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 Reactto 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',
}
}
Add
SKIP_PREFLIGHT_CHECK=trueto an.envfile 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
}
],
},
}
Format
- Prettier - Code formatter extension
{
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
Install Prettier and ESLint for prettier:
npm i -D prettier eslint-config-prettier
Create a .prettierignore file on the root of the folder project:
build
coverage
node_modules
dist
Create a .prettierrc.json file on the root of the folder project:
{
"semi": false,
"singleQuote": true
}
Add extends prettier configuration at end of extends:
{
extends: [
...,
'prettier'
]
}
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"
}
}
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:
{
env: {
...,
jest: true,
},
}
Auto update threshold
If you want to update automatically the coverage threshold use this package.
npm i -D jest-coverage-thresholds-bumper
Add test update at end of scripts, create a jest section and update the lint-staged scripts:
{
"scripts": {
...,
"test:tb": "jest-coverage-thresholds-bumper",
},
"jest": {
"coverageReporters": [
"json",
"json-summary",
"lcov",
"clover",
"text",
"text-summary"
],
"coverageThreshold": {
"global": {
"statements": 0,
"branches": 0,
"functions": 0,
"lines": 0
}
}
},
"lint-staged": {
"*.{js,ts}": [
"eslint --cache --fix",
"npm run test:c",
"npm run test:tb"
],
"*.{js,ts,css,scss,md}": "prettier --write"
}
}
That’s All Folks!
Happy Coding ?
This content originally appeared on DEV Community and was authored by Camilo Martinez
Camilo Martinez | Sciencx (2021-06-09T17:03:04+00:00) Powerful React Project Setup. Retrieved from https://www.scien.cx/2021/06/09/powerful-react-project-setup/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.