https://github.com/shaifarfan/eslint-airbnb-setup-react-ts
Eslint Setup (React + ts)
https://github.com/shaifarfan/eslint-airbnb-setup-react-ts
eslint react ts typescript
Last synced: 7 months ago
JSON representation
Eslint Setup (React + ts)
- Host: GitHub
- URL: https://github.com/shaifarfan/eslint-airbnb-setup-react-ts
- Owner: ShaifArfan
- Created: 2023-12-22T15:08:23.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-12-22T15:19:52.000Z (almost 2 years ago)
- Last Synced: 2025-01-12T11:24:20.219Z (9 months ago)
- Topics: eslint, react, ts, typescript
- Homepage:
- Size: 8.79 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Eslint Airbnb Setup (React + ts)
## 01. Create project & setup initial Eslint
First create a project using react & ts.
I will be using next.js with ts. For that, you need to run this command.
```bash
yarn create next-app --typescript
```
This will already install `eslint` & create an `eslintrc.json` file. Which we will not use. We will set up the ESLint manually.
If you don’t have ESLint installed, first you need to install ESLint by:
```bash
npm i -D eslint
```
Once we have ESLint in our project, we can start ESLint setup by running this command:
```bash
npm init @eslint/config
```
This will ask some question, that you need to answer based on the project you are working on:
Here is the ans that I choose since right now I am on next JS app.
01-Q: How would you like to use ESLint?
▸ To check syntax and find problems
02-Q: What type of modules does your project use?
▸ JavaScript modules (import/export)
03-Q: Which framework does your project use?
▸ React
04-Q: Does your project use TypeScript?
▸ Yes
05-Q: Where does your code run?
▸ Browser
06-Q: What format do you want your config file to be in?
▸ JavaScript
After that based on your answers, It will ask you to install some packages now, for that you can choose yes and also choose which package manager you wanna use to install them.
Now you can see it will create a new `eslintrc` file for you. Since we choose the format of the config file `JavaScript`, the file name will be `.eslintrc.js`
## 02. Adding `Airbnb` ESLint Style Guide for Ts.
### Adding `eslint-config-airbnb`
```bash
npx install-peerdeps --dev eslint-config-airbnb
npx install-peerdeps --dev eslint-config-airbnb #for non react project
```
once we installed this, we need to extend our `.eslintrc.js` file.
```jsx
extends: ["airbnb", "airbnb/hooks"]
extends: ["airbnb-base"] //for non react project
```
### Adding **`eslint-config-airbnb-typescript`**
```bash
npm install eslint-config-airbnb-typescript \
@typescript-eslint/eslint-plugin \
@typescript-eslint/parser \
--save-dev
```
once we installed this, we can extend `airbnb-typscript` in our `.eslintrc.js` file.
```jsx
extends: [
'airbnb',
'airbnb-typescript', // 'airbnb-typescript/base' for non react
'airbnb/hooks'
]
```
Also, we need to Configure the ESLint TypeScript parser in `.eslntrc.js` file
```jsx
parser: "@typescript-eslint/parser",
parserOptions: {
project: "./tsconfig.json",
}
```
Also include the `eslintrc.js` file in our `tsconfig.json` file.
```json
"include": [
".eslintrc.js" //eslintrc js file
]
```
## 03. Adding `Prettier` to our project.
```bash
npm install -D prettier eslint-config-prettier eslint-plugin-prettier
```
After the installation, we need to extend it in our `eslintrc` file.
```jsx
extends: [
..., // all other extends,
"plugin:prettier/recommended" // this should be the last one
]
```
Now for our prettier configurations, we need to create a file called `.prettierrc.js` Now you can add your prettier rules in this file.
```jsx
// prettier.config.js or .prettierrc.js
module.exports = {
trailingComma: "es5",
tabWidth: 2,
semi: true,
singleQuote: true,
};
```
That’s it. Now you can add this two script to your package.json to find ESLint error and fix them.
```json
"lint": "eslint .",
"lint:fix": "eslint . --fix",
```
**Try to reload the code editor, if you face any unexpected issue.**
## 04. For VS Code.
For VS Code, you can install ESLint & prettier extensions to take more advantage.
Once you have these two extensions, you can add these settings in your VS Code `settings.json`
```json
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"eslint.alwaysShowStatus": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
```
Now you don’t need to run lint scripts to fix errors. Now, when you save files, it will automatically fix all the auto fixable errors for you.