Setting up a maintainable ecosystem is one of the first and essential steps in starting out a React Project. With tools like Eslint, Prettier and Typescript, we will be prepared enough to battle the runtime and type safety errors that can occur as the project codebase grows. In this article, we will learn how to create a ReactJS project with Vite template and how to set up tools like Eslint, Prettier and Typescript.

Setting Up New React Project:

Firstly, we will create a new folder.. After that, we can navigate to that folder either in terminal or open that folder using VS code editor. The following vite commands below will create the project using the react latest version. Since this is a react setup, so we will be choosing React and "variant" as Typescript to proceed since we will be using Typescript.

/*If we have already created the folder for our project*/
 cd myprojectfolder
 npm create vite@latest ./ 

By default, the typescript config file named tsconfig.json will be generated which will look the following code below except new added values by us.

Our Typescript Config:

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
     /* new added line*/
    "jsx": "react-jsx",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "baseUrl": ".",
      /* new added lines*/
    "paths": {
      "@components/*": ["/src/components/*"],
      "@pages/*": ["/src/pages/*"],
      "@constants/*": ["/src/constants/*"],
      "@services/*": ["/src/services/*"],
      "@hooks/*": ["/src/hooks/*"],
      "@/*": ["src/*"],
    }
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }],
  "exclude": ["node_modules"]
}

What we added:

• a new object value pair named "jsx" which will allow us to write "jsx" in our typescript (.tsx) files.

• the "paths" key and it's value for the relative import of our files. Instead of using absolute path like "./..../components" , we can use "@/components/mycomponent", which will also be suggested by Typescript.

Our modified Eslint Config File:

Likewise, we will also have the file named recommended ".eslintrc.cjs" config by default which will look the following configuration below:

We will modify this file slightly in order to fit our project needs.

module.exports = {
  root: true,
  env: { browser: true, es2020: true },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react-hooks/recommended',
    "plugin:import/errors",
    // new field added
    "prettier"
  ],
  ignorePatterns: ['dist', '.eslintrc.cjs'],
  parser: '@typescript-eslint/parser',
  /* new plugins add*/
  plugins: ['react-refresh', "import", "unused-imports"],
  rules: {
     /*new rule add*/"unused-imports/no-unused-imports": "error",
    "no-unused-vars": [
      "error",
      {
        "vars": "all",
        "args": "after-used",
        "ignoreRestSiblings": false,
        "argsIgnorePattern": "^_",
      },
    ],
    'react-refresh/only-export-components': [
      'warn',
      { allowConstantExport: true },
    ],
  },
}

//nw packages to add for above added new  plugins to work
 npm i eslint-plugin-import eslint-plugin-unused-imports eslint-config-prettier

What we added:

• new plugins named "import" and "unused imports" which will help us to identify the unused imports in our codebase and help to clean them up.

• We also want to add prettier to work in sync with our eslint config for consistent code format and styles, hence we added new field "prettier"

By default, our project initialization may not add ".eslintignore" file in our codebase. Make sure you create one at the root of our project and add following paths so that eslint will ignore these during linting and checking

 /* .eslintignore */
node_modules
.env
build

Installing and using "Prettier" with Config:

We will be using prettier as well for better code formatting. So, we will install the prettier package and add a file named ".prettierrc.json". We can define the following values as per the need of our project.

{
  //checks whether trailing comma needs to be added with arrays and objects.
  "trailingComma": "none",
  //number of spaces per intendation. Here we haved used 2.
  "tabWidth": 2,
  //whether we want to add semi colons at the end of code.
  "semi": false,
  //whether to use single quotes ' or double quotes " for string literals.
  "singleQuote": true,
}

By default, our project initialization may not add .".prettierignore" file in our codebase. So make sure you create one and add following paths so that prettier will skip those files and paths (same as .eslintignore)

Final script in our package json file:

The final steps are setting up the scripts in package.json file to run the eslint and prettier config. We will be using the scripts below for linting and formatting process. Inside scripts folder, we will add following code..

 "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
    "lint": "next lint",
     // will check for linting errors
    "lint:check": "eslint src/**/*.ts",
    // will check for errors as well as fix the errors as much as it can
    "lint:fix": "eslint src/**/*.ts --fix",
    // will check for out codebase formatting
    "prettier:check": "prettier --check 'src/**/*.{ts,json}'",
   // will try to fix our code style and formatting problems
    "prettier:fix": "prettier --write 'src/**/*.{ts,json}'",
  }

Command to run our script config:

With all these setups we are good to go. We will use the following commands as per our needs to check for the linting as well as format errors.

npm run lint:check
npm run lint:fix
npm run prettier:check
npm run prettier:fix

In conclusion:

There is no any perfect language. Javascript suffers from lots of pitfalls but setting up some toolchain like Typescript, Eslint and Prettier will definitely help us to minimize the errors we will encounter during development. Hence it is recommended to use Typescript along with all the given tools.