A react-typescript boilerplate including

• prettier
• eslint
• lint-staged
• husky

Docs

• TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.
• Also a powerful compiler tool which converts typescript to javascript
• It also adds feature of idetifying errors at compile time rather than scratching our head at runtime?

Docs

• An Code formatter
• Supports many languages
• Generate prettier rules here

Docs

• Find and fix problems in your JavaScript code making code more consistent.

• We already have eslint as an inner-dependency from react-scripts

• To init eslint config run & choose options accordingly

  npx eslint --init
  

Docs

• Linting makes more sense when run before committing your code. By doing so you can ensure no errors go into the repository and enforce code style.

Docs

• Whenever we inti Git in our project, it automatically comes with features called hooks.
• hooks ex: pre-commit, pre-push, etc.
• If we want to ensure before we actually create a commit using the git commit, that our code was properly linted and formatted, we could write a pre-commit Git hook.

1. Clone / Download this repo.

2. Inside the project open a terminal and run:

   yarn install
   

   This will install all the project dependencies.

3. To start the development server run:

   yarn start
   

4. Prettier commands

   • Run the below command to get a list of all unformatted code in the project.

     yarn run format:check
     

   • Run the below command to fix the unformatted code!

     yarn run format:fix
     

5. Eslint commands

   • We can run the below script present in package.json

     yarn run lint
     

6. Run parallel commands at once using concurrently

• Syntax

   concurrently \"yarn 1st-cmd\" \"yarn run  2st-cmd\" \"yarn run nth-cmd\""
  

7. Another great thing about lint-staged is that it automatically does the git add on the modified files. So, if we are doing prettier — write or eslint — fix, we don’t have to stage the changes manually.

• We do format:fix & run our validate script on the staged files

• After git add . and git commit -m "message"

  the lint-staged kicks in and runs?

GitHub

View Github