setup-react-pwa-app

#!/bin/bash

# Create new create react app pwa with eslint, prettier, jsconfig, and editorconfig
# Second argument is set to true if you want to open vscode
# Third argument is set to true if you to test with jest

echo "Create new create react app pwa with eslint, prettier, jsconfig, and editorconfig"
echo "Second argument is set to true if you want to open vscode"
echo "Third argument is set to true if you to test with jest"

if [ -z "$1" ]
then
    echo "No project name provided"

	echo "Usage: ./setup-react-app <project name> <open vscode optional> <test with jest optional>"
	
	exit 1
fi

echo "Creating new project"

npx create-react-app "$1" --template cra-template-pwa

echo "Done installing create react app"

cd "$1"

#region install dev dependencies
echo "Installing dev dependencies"

echo "Installing eslint"
npm i -D eslint

echo "Installing prettier"
npm i -D prettier

echo "Installing eslint-config-prettier"
npm i -D eslint-config-prettier

echo "Installing eslint-plugin-prettier"
npm i -D eslint-plugin-prettier

echo "Installing eslint-plugin-react"
npm i -D eslint-plugin-react

echo "Installing eslint-plugin-react-hooks"
npm i -D eslint-plugin-react-hooks

#region Install eslint-plugin-jest
if [ -n "$3" ]
then
    if ("$3" = 'true')
    then
        echo "Installing eslint-plugin-jest"

        npm i -D eslint-plugin-jest
    fi
fi
#endregion
#endregion

#region npm scripts
echo "Setting up npm scripts"

echo "Add lint:fix script"
npm set-script "lint:fix" "eslint --fix src/**/*.{js,jsx}"

echo "Add lint:check script"
npm set-script "lint:check" "eslint src/**/*.{js,jsx}"

echo "Add prettier:fix script"
npm set-script "prettier:fix" "prettier -w \"src/**/*.{js,jsx}\""

echo "Add prettier:check script"
npm set-script "prettier:check" "prettier -c \"src/**/*.{js,jsx}\""
#endregion

echo "Creating config files"

#region .eslintrc
echo "Creating .eslintrc"
touch ".eslintrc"

if [ -n "$3" ]
then
    if ("$3" = 'true')
    then
		echo '{
	"env": {
		"browser": true,
		"es2021": true,
		"node": true,
		"jest/globals": true
	},
	"extends": [
		"eslint:recommended",
		"plugin:react/recommended",
		"plugin:jest/all",
		"plugin:react-hooks/recommended"
	],
	"parserOptions": {
		"ecmaFeatures": {
			"jsx": true
		},
		"ecmaVersion": "latest",
		"sourceType": "module"
	},
	"settings": {
		"react": {
			"version": "detect"
		},
		"jest": { "version": "detect" }
	},
	"plugins": ["react", "prettier", "jest"],
	"rules": {
		"prettier/prettier": [
			"warn",
			{
				"endOfLine": "lf"
			}
		],
		"import/prefer-default-export": "off",
		"linebreak-style": ["error", "unix"],
		"quotes": ["off"],
		"semi": ["error", "never"],
		"react/prop-types": "off",
		"no-case-declarations": "off",
		"react/jsx-curly-brace-presence": "warn",
		"react/jsx-no-useless-fragment": "warn",
		"react-hooks/rules-of-hooks": "error",
		"react-hooks/exhaustive-deps": "warn"
	}
}
' >> ".eslintrc"
    fi
else
	echo '{
	"env": {
		"browser": true,
		"node": true,
		"es2021": true
	},
	"extends": [
		"eslint:recommended",
		"plugin:react/recommended",
		"plugin:react-hooks/recommended"
	],
	"parserOptions": {
		"ecmaFeatures": {
			"jsx": true
		},
		"ecmaVersion": "latest",
		"sourceType": "module"
	},
	"settings": {
		"react": {
			"version": "detect"
		},
		"jest": { "version": "detect" }
	},
	"plugins": ["react", "prettier"],
	"rules": {
		"prettier/prettier": [
			"warn",
			{
				"endOfLine": "lf"
			}
		],
		"import/prefer-default-export": "off",
		"linebreak-style": ["error", "unix"],
		"quotes": ["off"],
		"semi": ["error", "never"],
		"react/prop-types": "off",
		"no-case-declarations": "off",
		"react/jsx-curly-brace-presence": "warn",
		"react/jsx-no-useless-fragment": "warn",
		"react-hooks/rules-of-hooks": "error",
		"react-hooks/exhaustive-deps": "warn"
	}
}
' >> ".eslintrc"
fi
#endregion

#region .prettierrc
echo "Creating .prettierrc"
touch ".prettierrc"

echo '{
	"tabWidth": 4,
	"singleQuote": true,
	"useTabs": true,
	"jsxSingleQuote": true,
	"semi": false,
	"arrowParens": "avoid",
	"endOfLine": "lf"
}
' >> ".prettierrc"
#endregion

#region .editorconfig
echo "Creating .editorconfig"
touch ".editorconfig"

echo 'root = true

# Unix-style newlines with a newline ending every file
[*]
end_of_line = lf
insert_final_newline = false

# Matches multiple files with brace expansion notation
# Set default charset
# 4 tabs indentation
[*]
charset = utf-8
indent_style = tab
indent_size = 4

# 4 space indentation
[*.yml]
indent_style = space
indent_size = 4' >> ".editorconfig"
#endregion

#region jsconfig.json
echo "Creating jsconfig.json"
touch "jsconfig.json"

echo '{
	"compilerOptions": {
		"baseUrl": "src"
	},
	"include": ["src"]
}
' >> "jsconfig.json"
#endregion

#region format package.json
echo "Formatting package.json"

npx prettier --write package.json jsconfig.json .eslintrc .prettierrc .editorconfig
npm run prettier:fix
#endregion

#region commit changes
echo "Committing changes"
git add .
git commit -m "Initial setup"
#endregion

if [ -n "$2" ]
then
    if ("$2" = 'true')
    then
        code .
    fi
fi