Olu Amey
170 lines
4.1 KiB
Markdown
170 lines
4.1 KiB
Markdown
## Table of Contents
|
|
|
|
- [How to run](#how-to-run)
|
|
- [Editor Setup](#editor-setup)
|
|
- [Plugins](#plugins)
|
|
- [Settings](#settings)
|
|
- [Set Line Breaks](#set-line-breaks)
|
|
- [Linting Setup](#linting-setup)
|
|
- [Install Dev Dependencies](#install-dev-dependencies)
|
|
- [Create Linting Configuration file manually](#create-linting-configuration-file-manually)
|
|
- [Contact](#contact)
|
|
|
|
<!-- HOW TO RUN -->
|
|
|
|
## How to run
|
|
|
|
Please follow the below instructions to run this project in your computer:
|
|
|
|
1. Clone this repository
|
|
```sh
|
|
git clone https://github.com/meXuvo/reactjs_starter
|
|
```
|
|
2. Change directory
|
|
```sh
|
|
cd react
|
|
```
|
|
3. Run
|
|
```sh
|
|
yarn
|
|
```
|
|
4. yarn start
|
|
|
|
<!-- Editor Setup -->
|
|
|
|
## Editor Setup
|
|
|
|
You can use any editor but as I personally prefer VS Code. I will give some instructions about how I prefer VS code to be setup for React applications.
|
|
|
|
### Plugins
|
|
|
|
You need to install the below plugins:
|
|
|
|
- ESLint by Dirk Baeumer
|
|
- Prettier - Code formatter by Prettier
|
|
|
|
### Settings
|
|
|
|
Follow the below settings for VS Code -
|
|
|
|
1. Create a new folder called ".vscode" inside the project root folder
|
|
2. Create a new file called "settings.json" inside that folder.
|
|
3. Paste the below json in the newly created settings.json file and save the file.
|
|
|
|
```json
|
|
{
|
|
// Theme
|
|
"workbench.colorTheme": "Dracula", //anythig as your favorite
|
|
|
|
// config related to code formatting
|
|
"editor.defaultFormatter": "esbenp.prettier-vscode",
|
|
"editor.formatOnSave": true,
|
|
"[javascript]": {
|
|
"editor.formatOnSave": false,
|
|
"editor.defaultFormatter": null
|
|
},
|
|
"[javascriptreact]": {
|
|
"editor.formatOnSave": false,
|
|
"editor.defaultFormatter": null
|
|
},
|
|
"javascript.validate.enable": false, //disable all built-in syntax checking
|
|
"editor.codeActionsOnSave": {
|
|
"source.fixAll.eslint": true,
|
|
"source.fixAll.tslint": true,
|
|
"source.organizeImports": true
|
|
},
|
|
"eslint.alwaysShowStatus": true,
|
|
// emmet
|
|
"emmet.triggerExpansionOnTab": true,
|
|
"emmet.includeLanguages": {
|
|
"javascript": "javascriptreact"
|
|
}
|
|
}
|
|
```
|
|
|
|
If you followed all previous steps, the theme should change and your editor should be ready.
|
|
|
|
## Linting Setup
|
|
|
|
In order to lint and format your React project automatically according to popular airbnb style guide, I recommend you to follow the instructions below.
|
|
|
|
### Install Dev Dependencies
|
|
|
|
```sh
|
|
yarn add -D prettier
|
|
yarn add -D babel-eslint
|
|
npx install-peerdeps --dev eslint-config-airbnb
|
|
yarn add -D eslint-config-prettier eslint-plugin-prettier
|
|
```
|
|
|
|
or You can also add a new script in the scripts section like below to install everything with a single command:
|
|
|
|
```json
|
|
scripts: {
|
|
"lint": "yarn add -D prettier@2.4.1 && yarn add -D eslint@7.11.0 && yarn add -D babel-eslint@10.1.0 && npx install-peerdeps --dev eslint-config-airbnb@18.2.1 && yarn add -D eslint-config-prettier@8.3.0 eslint-plugin-prettier@4.0.0"
|
|
}
|
|
```
|
|
|
|
and then simply run the below command in the terminal -
|
|
|
|
```sh
|
|
yarn lint #or 'npm run lint'
|
|
```
|
|
|
|
### Create Linting Configuration file manually
|
|
|
|
Create a `.eslintrc` file in the project root and enter the below contents:
|
|
|
|
```json
|
|
{
|
|
"extends": [
|
|
"airbnb",
|
|
"airbnb/hooks",
|
|
"eslint:recommended",
|
|
"prettier",
|
|
"plugin:jsx-a11y/recommended"
|
|
],
|
|
"parser": "babel-eslint",
|
|
"parserOptions": {
|
|
"ecmaVersion": 8
|
|
},
|
|
"env": {
|
|
"browser": true,
|
|
"node": true,
|
|
"es6": true,
|
|
"jest": true
|
|
},
|
|
"rules": {
|
|
"react/react-in-jsx-scope": 0,
|
|
"react-hooks/rules-of-hooks": "error",
|
|
"no-console": 0,
|
|
"react/state-in-constructor": 0,
|
|
"indent": 0,
|
|
"linebreak-style": 0,
|
|
"react/prop-types": 0,
|
|
"jsx-a11y/click-events-have-key-events": 0,
|
|
"react/jsx-filename-extension": [
|
|
1,
|
|
{
|
|
"extensions": [".js", ".jsx"]
|
|
}
|
|
],
|
|
// "prettier/prettier": [
|
|
// "error",
|
|
// {
|
|
// "trailingComma": "es5",
|
|
// "singleQuote": true,
|
|
// "printWidth": 100,
|
|
// "tabWidth": 4,
|
|
// "semi": true,
|
|
// "endOfLine": "auto"
|
|
// }
|
|
// ]
|
|
},
|
|
"plugins": ["prettier", "react", "react-hooks"]
|
|
}
|
|
```
|
|
|
|
## Credits
|
|
|
|
Made by [meXuvo](http://mexuvo.com/) |