How to setup your next react project(typescript + eslint + prettier + husky + lint-staged,cz-cli)

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • WorkOS - The modern identity platform for B2B SaaS
  • javascript

    JavaScript Style Guide

  • Q. Which style guide do you want to follow? Ans. Airbnb: https://github.com/airbnb/javascript

  • eslint-plugin-react

    React-specific linting rules for ESLint

  • JSX not allowed in files with extension '.tsx'eslintreact/jsx-filename-extension

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

    SurveyJS logo
  • eslint-plugin-import

    ESLint plugin with rules that help validate proper imports.

  • For typescript project, you'll get import/no-unresolved error. We can disable this error in the rules. But a better way to solve this is to use eslint-plugin-import.

  • lint-staged

    🚫💩 — Run linters on git staged files

  • We'll be using int-staged to run eslint and prettier on our staged files. Add .lintstagedrc.json in the project root repository. populate the file with your commands

  • cz-cli

    The commitizen command line utility. #BlackLivesMatter

  • Commit messages are very important for maintaining a project. It can get difficult to maintain a similar commit convention when you are working in a larger team. cz-cli is here to help , we can enforce committing format by using the amazing tool. We'll be using conventional-changelog. configuration to follow AngularJS's commit message convention.

  • conventional-changelog

    Discontinued Generate changelogs and release notes from a project's commit messages and metadata. [Moved to: https://github.com/conventional-changelog/conventional-changelog] (by ajoslin)

  • Commit messages are very important for maintaining a project. It can get difficult to maintain a similar commit convention when you are working in a larger team. cz-cli is here to help , we can enforce committing format by using the amazing tool. We'll be using conventional-changelog. configuration to follow AngularJS's commit message convention.

  • react-setup-ts

  • You can find all the code in this repo

  • InfluxDB

    Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

    InfluxDB logo
NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts