Last active
February 23, 2023 18:38
-
-
Save barinascode/23ca546746fed1be56a81c34ee33fa83 to your computer and use it in GitHub Desktop.
react-frontend-setup-commands
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| Creacte react.js app with npx OR yarn | |
| npx create-react-app <my-app> | |
| -OR | |
| npx create-react-app <my-app> --template typescript | |
| -OR | |
| yarn create react-app my-app --template typescript | |
| -OR Create React workspace with NX | |
| npx create-nx-workspace@latest | |
| -Add react support | |
| npm i --save-dev @nrwl/react | |
| -Create react project | |
| npx nx g @nrwl/react:app <app-name> | |
| -Add Scss support | |
| yarn add sass | |
| -Add eslint support | |
| yarn eslint --init | |
| // Configure Eslint | |
| √ How would you like to use ESLint? · style | |
| √ What type of modules does your project use? · esm | |
| √ Which framework does your project use? · react | |
| √ Does your project use TypeScript? · No / Yes | |
| √ Where does your code run? · browser | |
| √ How would you like to define a style for your project? · prompt | |
| √ What format do you want your config file to be in? · JSON | |
| √ What style of indentation do you use? · 4 | |
| √ What quotes do you use for strings? · single | |
| √ What line endings do you use? · unix | |
| √ Do you require semicolons? · No / Yes | |
| "scripts": { | |
| "lint": "eslint \"**/*.{ts,tsx}\" --quiet --fix" // <---- add this line on package.json | |
| } | |
| // Add eslint-plugin-autofix | |
| yarn add -D eslint-plugin-autofix | |
| // After that, you can add it as ESLint plugin. | |
| { | |
| "plugins": ["react", "@typescript-eslint", "autofix"], | |
| "rules": { | |
| ... | |
| } | |
| } | |
| Add this property to estlint.json | |
| "settings": { | |
| "react": { | |
| "version": "detect" | |
| } | |
| } | |
| // Add autofix pulgin for eslint | |
| "plugins": [ | |
| "react", | |
| "@typescript-eslint", | |
| "autofix" | |
| ] | |
| // Add these slint rules for clean code | |
| "rules": { | |
| "arrow-body-style": [ | |
| "error", | |
| "as-needed" | |
| ], | |
| "react/self-closing-comp": [ | |
| "error", { | |
| "component": true, | |
| "html": true | |
| } | |
| ], | |
| "autofix/no-unused-vars": [ | |
| "error", | |
| { | |
| "argsIgnorePattern": "^_", | |
| "ignoreRestSiblings": true, | |
| "destructuredArrayIgnorePattern": "^_" | |
| } | |
| ], | |
| "@typescript-eslint/consistent-type-imports": [ | |
| "error", | |
| { | |
| "prefer": "type-imports" | |
| } | |
| ], | |
| "no-restricted-imports": [ | |
| "error", | |
| { | |
| "patterns": ["../"] | |
| } | |
| ], | |
| */ | |
| /* | |
| Creacte React Native app with npx OR yarn | |
| npx create-expo-app --template | |
| */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment