React + TypeScript + ESLint + Prettier Boilerplate with CI/CD (2023)
Last week I wanted to include ESLint + Prettier in a personal project. Knowing that I may end up developing this project with other developers from the open source community, I wanted to set a baseline in terms of the configurations we use, the formatter we use, and the type of Lint we use. This will ensure we will use the same code style to improve readability and maintenance.
Then, I searched for some boilerplates which are the most starred repositories in GitHub and I did some research on Google and Medium too to put things together.
I will share the boilerplate at the end of this article, the boilerplate includes the latest versions of React, React-DOM, TypeScript, ESLint, and Prettier. Also, the boilerplate includes CI/CD to deploy your app to AWS S3 (S3 Static Website Hosting) via GitHub Actions.
Now, I want to share the configurations I use in 2023.
I use VSCode as IDE. So I can start presenting from the .vscode folder in the root folder of the project which contains the configurations for VSCode.
Also, I use the VSCode — Insiders version of the VSCode because I have access to the GitHub Copilot Chat, which requires me to install this version of the VSCode.
The difference between the Insiders version and the Normal version of the VSCode is, the Insiders version is a beta version that gets updates more (almost every day) than the Normal version. And you can sync your settings/extensions with the Normal version if you want.
Let’s get started.
To whom, who may not know about the “.vscode” folder: This folder has configurations related to the VSCode only for this project, the settings and the configurations you’ll add to this folder will affect every user of this project who uses VSCode and they will override the VSCode’s default “settings.json” that users already have. I strongly suggest you include this folder, so you can work in sync with your team.
extensions.json
You can add the suggested extensions for your project to this file, so you can make sure that other members have the same extensions. The extensions listed here will be shown as a popup when users pulled the repository, or if users search for “@recommended” in the extensions tab of the VSCode, they can see the extensions listed below too.
I use the extensions listed above every day, so I suggest you use these ones, they are really helpful and I believe they will improve your code-writing skills.
settings.json
You can add the settings that you want to override the pre-defined settings in VSCode based on this project.
The most important thing here is to make sure the default formatter is set to: esbenp.prettier-vscode
“editor.codeActionsOnSave” object makes VSCode default editor not to format the files, because we want to format the files with ESLint and Prettier.
And also you shouldn’t remove the “eslint.validate” object too.
The “cSpell.words” array, ignores the words listed in the codes, it's about the extension which checks for typos and shows warnings. If you won’t use the extension, you can remove this array.
react.code-snippets
This file allows you to add shortcuts for your editor.
As you see in the “prefix” section. If I write “icon” in a .tsx file, it returns the “body” when I select it and allows me to import icons from ant-design fastly.
.eslintrc.json
You can add or remove the rules from the “rules” object according to your needs.
.prettierrc.json
You can customize the rules here according to your needs.
tsconfig.json
Thanks for reading!
Here’s the URL of the boilerplate: https://github.com/keremnalbant/react-typescript-eslint-prettier-boilerplate feel free to give it a star!
Also, feel free to ask questions, or if you see some issues, please let me know.
