https://github.com/danielkhakbaz/next-eslint-prettier-husky-initialization

an Initialization of any project using: ESLint, Prettier, Husky and git.
https://github.com/danielkhakbaz/next-eslint-prettier-husky-initialization

eslint git husky next prettier typescript

Last synced: 3 days ago
JSON representation

an Initialization of any project using: ESLint, Prettier, Husky and git.

• Host: GitHub
• URL: https://github.com/danielkhakbaz/next-eslint-prettier-husky-initialization
• Owner: Danielkhakbaz
• Created: 2022-01-08T08:30:10.000Z (almost 3 years ago)
• Default Branch: master
• Last Pushed: 2024-03-21T18:05:23.000Z (9 months ago)
• Last Synced: 2024-11-05T13:12:50.398Z (about 2 months ago)
• Topics: eslint, git, husky, next, prettier, typescript
• Language: Shell
• Homepage:
• Size: 136 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# In order to setup a _Next.js_ app with _Typescript_, _ESLint_, _Prettier_, _Husky_ and also setting a _Git_ Repository, We have to follow these steps below

## Git

- At first, We should delete every Git file using: `rd .git /s/q`

- Then we must initialize our Git in our Project using: `git init`

- Add every single changed files to your Repository: `git add .`

- Commit your changes on your Repository with: `git commit -m ""`

- Create a new Repository on the Github website

- Set the existing Git Repository with your Project using: `git remote add origin GIT_REP_ADDRESS`

- Push all the changes with: `git push -u origin master`

- You can see the content of a proper .gitignore file in here 

## ESLint

- Add ESLint to your Project: `yarn add eslint`

- Start initializing ESLint for your Project: `yarn run eslint --init`

- This is the .eslintrc.json I used for my projects, I provide you the link so you can use it for your projects 

- You can see the content of a proper .eslintignore in here 

- Add the "next" and "prettier" in the end of all the extends in the .eslintrc.json file

## Prettier

- Add Prettier to your Project: `yarn add prettier`

- Then add "prettier" to your .eslintrc file as one of the extends

- Install this package for the solving the conflict between ESLint and Prettier using: `yarn add eslint-config-prettier && yarn add eslint-config-next`

- Create a .prettierrc file and start writing your rules as a json

- Suggested rules are:

  `{

  "printWidth": 80,

  "tabWidth": 2,

  "semi": true,

  "singleQuote": false,

  "bracketSpacing": true,

  "bracketSameLine": false,

  "trailingComma": "es5",

  "endOfLine": "lf"

}

`

- You can see the content of a proper .prettierignore in here 

## Next.js

- My go-to next.config.js is in here 

## Typescript

- My go-to tsconfig.json is in here 

## VSCode

- Set your default formatter on VSCode to Prettier - Code Formatter

- Then turn on the FormatOnSave and FormatOnPaste on your settings

- Create a new Folder named .vscode

- Inside that, Create a settings.json

- Start writing these codes as json in the settings.json file:

  `{"editor.formatOnPaste": true,

  "editor.formatOnSave": true,

  "editor.defaultFormatter": "esbenp.prettier-vscode",

  "editor.codeActionsOnSave": {

    "source.fixAll.eslint": "explicit",

    "source.fixAll.format": "explicit"

  }}`

## Husky

- Install husky on your Project: `npx husky-init && yarn`

- Add these lines of scripts to your package.json file:

  ` "dev": "next dev",

    "build": "next build",

    "start": "next start",

    "fix": "next lint --fix && prettier --write .",

    "lint": "next lint",

    "upgrade": "upgrade-interactive --latest",

    "knip": "npx knip",

    "analyze": "ANALYZE=true yarn build",

    "postinstall": "husky install && prisma generate"`

- Add these texts from  to pre-commit file inside .husky folder

- Just in case You're using yarn instead of npm, You should pay attention to the pre-commit file