├── .env ├── .eslintrc ├── .gitignore ├── .vscode └── settings.json ├── README.md ├── package.json ├── public ├── favicon.ico ├── index.html └── working.gif └── src ├── App.css ├── App.jsx └── index.jsx /.env: -------------------------------------------------------------------------------- 1 | SKIP_PREFLIGHT_CHECK=true -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "airbnb", 4 | "airbnb/hooks", 5 | "eslint:recommended", 6 | "prettier", 7 | "plugin:jsx-a11y/recommended" 8 | ], 9 | "parser": "babel-eslint", 10 | "parserOptions": { 11 | "ecmaVersion": 8 12 | }, 13 | "env": { 14 | "browser": true, 15 | "node": true, 16 | "es6": true, 17 | "jest": true 18 | }, 19 | "rules": { 20 | "react/react-in-jsx-scope": 0, 21 | "react-hooks/rules-of-hooks": "error", 22 | "no-console": 0, 23 | "react/state-in-constructor": 0, 24 | "indent": 0, 25 | "linebreak-style": 0, 26 | "react/prop-types": 0, 27 | "jsx-a11y/click-events-have-key-events": 0, 28 | "react/jsx-filename-extension": [ 29 | 1, 30 | { 31 | "extensions": [".js", ".jsx"] 32 | } 33 | ], 34 | "prettier/prettier": [ 35 | "error", 36 | { 37 | "trailingComma": "es5", 38 | "singleQuote": true, 39 | "printWidth": 100, 40 | "tabWidth": 4, 41 | "semi": true, 42 | "endOfLine": "auto" 43 | } 44 | ] 45 | }, 46 | "plugins": ["prettier", "react", "react-hooks"] 47 | } 48 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | yarn.lock -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.defaultFormatter": "esbenp.prettier-vscode", 3 | "editor.formatOnSave": true, 4 | "editor.formatOnPaste": true, 5 | "editor.formatOnType": true, 6 | "[javascript]": { 7 | "editor.formatOnSave": false, 8 | "editor.defaultFormatter": null 9 | }, 10 | "[javascriptreact]": { 11 | "editor.formatOnSave": false, 12 | "editor.defaultFormatter": null 13 | }, 14 | "javascript.validate.enable": false, //disable all built-in syntax checking 15 | "editor.codeActionsOnSave": { 16 | "source.fixAll.eslint": true, 17 | "source.fixAll.tslint": true, 18 | "source.organizeImports": true 19 | }, 20 | "eslint.alwaysShowStatus": true, 21 | // emmet 22 | "emmet.triggerExpansionOnTab": true, 23 | "emmet.includeLanguages": { 24 | "javascript": "javascriptreact" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Ultimate Linting & Formatting Setup for VSCode React Projects 🔥 2 | 3 | ### **_---inspired form ![YouTube Channel Subscribers](https://img.shields.io/youtube/channel/subscribers/UCFM3gG5IHfogarxlKcIHCAg?label=Learn%20with%20Sumit&style=social)_** 4 | 5 | so, you may watch the video. [Check Now](https://youtu.be/ii8GaRjRoNI) 6 | 7 | or 8 | 9 | You can use my modified boilerplate 10 | 11 | ## Requirements 12 | 13 | - Visual Studio Code Editor & 14 | - Its two extensions : `EsLint` , `Prettier` 15 | 16 | ## Just follow all steps: 17 | 18 | - Just keep a empty directory 19 | - Clone/Download this repo 20 | - Copy and paste the files in your directory 21 | - I have use yarn in this repo. so you have to use yarn for this. so if you don't have yarn installed, install it by using this command: `npm i -g yarn` 22 | - then use this command: `yarn update` to make your dependency packages version updated 23 | - Now run command `yarn` or `yarn install` to install all dependency 24 | - Now use this command: `yarn start` & you are ready to go 25 | 26 | ### If it's working and worthy, please give a star💫 on this repo 27 | 28 | ### if you are still facing error, let me know [Moinul Moin](https://moinulmoin.com) 29 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "your-project-name", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^17.0.2", 7 | "react-dom": "^17.0.2", 8 | "react-scripts": "^4.0.3" 9 | }, 10 | "scripts": { 11 | "start": "react-scripts start", 12 | "build": "react-scripts build", 13 | "update": "yarn global add npm-check-updates && ncu -u" 14 | }, 15 | "eslintConfig": { 16 | "extends": [ 17 | "react-app" 18 | ] 19 | }, 20 | "browserslist": { 21 | "production": [ 22 | ">0.2%", 23 | "not dead", 24 | "not op_mini all" 25 | ], 26 | "development": [ 27 | "last 1 chrome version", 28 | "last 1 firefox version", 29 | "last 1 safari version" 30 | ] 31 | }, 32 | "devDependencies": { 33 | "babel-eslint": "^10.1.0", 34 | "eslint": "7.2.0", 35 | "eslint-config-airbnb": "18.2.1", 36 | "eslint-config-prettier": "^8.3.0", 37 | "eslint-plugin-import": "2.22.1", 38 | "eslint-plugin-jsx-a11y": "6.4.1", 39 | "eslint-plugin-prettier": "^3.4.0", 40 | "eslint-plugin-react": "7.21.5", 41 | "eslint-plugin-react-hooks": "1.7.0", 42 | "prettier": "^2.3.2" 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moinulmoin/boilerplate-for-react-projects/2a7910ebbc601610370ad72ebb430f3efc6d4911/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | React App BoilerPlate 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /public/working.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/moinulmoin/boilerplate-for-react-projects/2a7910ebbc601610370ad72ebb430f3efc6d4911/public/working.gif -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | padding: 0; 5 | text-decoration: none; 6 | } 7 | 8 | html { 9 | font-size: 62.5%; 10 | } 11 | 12 | .container { 13 | align-items: center; 14 | display: flex; 15 | flex-direction: column; 16 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, 17 | Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; 18 | padding: 3.5em 5em; 19 | text-align: center; 20 | } 21 | 22 | h1 { 23 | font-size: 3.5rem; 24 | } 25 | 26 | p { 27 | font-size: 2.5rem; 28 | } 29 | 30 | small { 31 | align-self: flex-end; 32 | font-size: 1.5rem; 33 | } 34 | 35 | img { 36 | height: auto; 37 | max-width: 100%; 38 | animation: blink 1s infinite; 39 | opacity: 0; 40 | } 41 | 42 | @keyframes blink { 43 | from { 44 | opacity: 0.5; 45 | } 46 | to { 47 | opacity: 1; 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './App.css'; 3 | 4 | function App() { 5 | return ( 6 |
7 |

Congrats! It's working, Bro

8 | working 9 |

Happy coding

10 | 11 | Made with ❤ by Moinul Moin 12 | 13 |
14 | ); 15 | } 16 | 17 | export default App; 18 | -------------------------------------------------------------------------------- /src/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | ReactDOM.render( 6 | 7 | 8 | , 9 | document.getElementById('root') 10 | ); 11 | --------------------------------------------------------------------------------