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.
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.
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
├── 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
- 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.
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
Check it out: Yarn Upgrade.
Upgrades packages to their latest version based on the specified range.
$ yarn upgrade
This project is under MIT license LICENSE to know more.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent