Welcome and feel free to use!

💻 Project

Well, since I have to create a lot of new projects with pretty much the same configs, I decided to save a bit of my time.

If you are starting and don't know how to create a project on your own and config eslint, prettier, editorconfig I highly recommend you to give a try. But don't forget, look it up to know what's going on here. 😉

The project was initialised using Create React App.

🤔 Benefits of using Prettier and ESLint

If you have set up Prettier, you can configure it to format your file on saving it. That way, you never need to worry about your code formatting anymore. Since Prettier is highly opinionated, you can do only minor configurations.

🚀 Technologies

The project was mainly developed with the following technologies:

"dependencies": {
  "normalize.css": "^8.0.1",
  "react": "^17.0.1",
  "react-icons": "^4.1.0",
  "styled-components": "^5.2.1",
  "typescript": "^4.0.3",
},

"devDependencies": {
  "@types/styled-components": "^5.1.7",
  "@typescript-eslint/eslint-plugin": "^4.10.0",
  "@typescript-eslint/parser": "^4.10.0",
  "eslint": "^7.15.0",
  "eslint-config-airbnb": "^18.2.1",
  "eslint-config-prettier": "^7.0.0",
  "eslint-import-resolver-typescript": "^2.3.0",
  "eslint-plugin-import": "^2.22.1",
  "eslint-plugin-jsx-a11y": "^6.4.1",
  "eslint-plugin-prettier": "^3.3.0",
  "eslint-plugin-react": "^7.21.5",
  "eslint-plugin-react-hooks": "^4",
  "prettier": "^2.2.1"
}

VS Code with EditorConfig and ESLint

🗂 Folders

├── public
│   ├── ...
├── src
│   ├── App.tsx
│   ├── components
│   ├── index.tsx
│   ├── pages
│   │   └── Home
│   │       ├── index.tsx
│   │       └── styles.ts
│   ├── react-app-env.d.ts
│   ├── reportWebVitals.ts
│   ├── setupTests.ts
│   └── styles
│       ├── GlobalStyles.ts
│       └── theme
│           ├── defaultTheme.ts
│           └── styled.d.ts
├── .editorconfig
├── .eslintcache
├── .eslintignore
├── .eslintrc.json
├── .gitignore
├── LICENSE
├── README.md
├── package.json
├── prettier.config.js
├── tsconfig.json
└── yarn.lock

🧩 You will need

• Prettier - Code formatter.
• ESLint.
• EditorConfig for VS Code.

📚 Creating a repository from a template

• On GitHub, navigate to the main page of the repository.
• Above the file list, click Use this template.
• Use the Owner drop-down menu, and select the account you want to own the repository.
• Type a name for your repository, and an optional description.
• Choose a repository visibility.

📚 How to clone and use

To clone and run this application, we will need NodeJS + Yarn (or NPM) installed on computer.

After this clone the repository, from our command line:

# Clone this repository
$ git clone https://github.com/LucasReinaldo/react-typescript-eslint-prettier-boilerplate.git

# Go into the repository
$ cd react-typescript-eslint-prettier-boilerplate

# Install dependencies
$ yarn install

# Run the app
$ yarn start

🧠 Need an upgrade?

Check it out: Yarn Upgrade.

Upgrades packages to their latest version based on the specified range.

$ yarn upgrade

📖 License

This project is under MIT license LICENSE to know more.