React.js environment for development

Taken from:
https://btholt.github.io/complete-intro-to-react-v5/

Possible can be interesting:
https://www.youtube.com/watch?v=SydnKbGc7W8

Possible can be helpful: https://glebbahmutov.com/blog/configure-prettier-in-vscode/


Prettier

$ npm install --save-dev prettier


package.json

"format": "prettier --write src/**/*.{js,html}",
"format:check": "prettier --list-different src/**/*.{js,html}"


Format on save document

VSCode –> Preverences –> Extensions –> install –> Prettier - Code formatter esbenp.prettier-vscode

VSCode –> Preverences –> Settings:

  • Format on Save (checked)
  • Prettier Require Config –> require a prettier configuration file to foramt (checked)


.prettierrc

{
  "singleQuote": true,
  "bracketSpacing": true
}


**If needed to always use brackets for function with single argument (x) **

"arrowParens": "always",


.prettierignore

node_modules
*.test.js
*.spec.js


ESLint

VSCode –> Preverences –> Extensions –> ESLint dbaeumer.vscode-eslint


$ npm install --save-dev eslint eslint-config-prettier 


.eslintrc

{
    "extends": [
    "eslint:recommended",
    "prettier"
  ],
  "plugins": [],
  "parserOptions": {
    "ecmaVersion" : 2018,
    "sourceType" : "module",
    "ecmaFeatures": {
      "jsx" : true
    }
  },
  "env": {
    "es6": true,
    "browser": true,
    "node": true
  }
}


package.json


"lint": "eslint src/**/*.{js,html} --quiet",
"lint:fix": "eslint --fix src/**/*.{js,html}",


.eslintignore


/node_modules/


React


$ npm install --save react react-dom


$ npm install --save-dev \
              babel-eslint \
              eslint-plugin-import \
              eslint-plugin-jsx-a11y \
              eslint-plugin-react


$ npm install --save-dev \
              eslint-plugin-react-hooks


.eslintrc

{
  "extends": [
    "eslint:recommended",
    "plugin:import/errors",
    "plugin:react/recommended",
    "plugin:jsx-a11y/recommended",
    "prettier",
    "prettier/react"
  ],
  "rules": {
    "react/prop-types": 0,
    "no-console": 1,
    "react-hooks/rules-of-hooks": 2,
    "react-hooks/exhaustive-deps": 1
  },
  "plugins": ["react", "import", "jsx-a11y", "react-hooks"],
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "es6": true,
    "browser": true,
    "node": true
  },
  "settings": {
    "react": {
      "version":"detect"
    }
  }
}


** .ENV file (for absolute path) **

.env

NODE_PATH=src/


Resolve src/

.eslintrc

{
  "settings": {
    "import/resolver": {
      "node": {
        "paths": ["src"]
      }
    }
  }
}


Run checks before commit (lint-staged husky)

$ npm install --save-dev lint-staged husky

package.json


  "scripts": {
    ******
    "precommit": "lint-staged"
  },
  "devDependencies": {
    ********
  },
  "lint-staged": {
    "*.{js, jsx}": ["node_modules/.bin/eslint --max-warnings=0", "prettier --write", "git add"]
  }
}


Babel

$ npm install --save-dev babel-eslint


.eslintrc

"parser": "babel-eslint",