Configure Eslint, Prettier and show eslint warning into running console vite react typescript project
Tags: eslint, prettier, gorupimport, showeslintwarningintoconsole
Published: 2024-06-06 19:14:23

Creating a React application with Vite has become the preferred way over using create-react-app due to its faster and simpler development environment.Although vite projects by default offer eslint support but it is very simple setup which is not very helpful so far.

In this guide this i will go through config eslint with prettier groups import ad show eslint warning into console in react + typescript which is create by vite.

Assuming you already have your React Vite project set up (using npm create vite@latest), the first step is to install Vitest:

## Setting up Vite eslint with yarn install:
`yarn add  eslint-import-resolver-typescript eslint-plugin-import eslint-plugin-prettier eslint-plugin-react-refresh prettier typescript-eslint`

## For showing eslint and typescript error and warning into console we need to add another library below:
`yarn add vite-plugin-checker`


Now time to update **tsconfig.json** file:

```
{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "baseUrl": "src",
    "paths": {
      "*": ["*"]
    },
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src", "vite.config.ts"],
  "exclude": [
    "node_modules",
    "./node_modules",
    "./node_modules/*",
    "./node_modules/@types/node/index.d.ts"
  ],
  "references": [{"path": "./tsconfig.node.json"}]
}
```

Note: Here, i added basurl as src and and path accept whatever i have set in vite.config.ts. For example, I have a folder name component and @Core folder now i want to import it as same group during that time it will be helpful.

Enough talk let's configure **vite.config.ts**:

```

import {defineConfig} from 'vite'
import react from '@vitejs/plugin-react'
import checker from 'vite-plugin-checker'

export default defineConfig({
  plugins: [
    react(),
    checker({
      typescript: true,
      eslint: {
        lintCommand: 'eslint "./src/**/*.{ts,tsx}"',
      },
    }),
  ],
  resolve: {
    alias: {
      images: '/src/images',
      component: '/src/component',
      '@core': '/src/@core',
    },
  },
})
```


now we need to update **.eslintrc.cjs** file:

```
module.exports = {
  root: true,
  env: {browser: true, es2020: true},
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react-hooks/recommended',
  ],
  parserOptions: {
    project: './tsconfig.json',
    tsconfigRootDir: __dirname,
  },
  ignorePatterns: ['dist', '.eslintrc.cjs'],
  parser: '@typescript-eslint/parser',
  plugins: ['react-refresh', 'import', 'prettier', 'react', '@typescript-eslint'],
  rules: {
    'react-refresh/only-export-components': ['warn', {allowConstantExport: true}],
    'no-console': 'warn',
    'arrow-body-style': ['warn', 'as-needed'],
    'no-empty-function': 'error',
    quotes: ['warn', 'single', {avoidEscape: true}],
    'prefer-const': 'off',
    'no-dupe-keys': 'warn',
    'react/react-in-jsx-scope': ['off'],
    'no-duplicate-imports': ['warn'],
    '@typescript-eslint/no-unused-vars': ['warn'],
    '@typescript-eslint/no-explicit-any': ['error'],
    'valid-typeof': ['error', {requireStringLiterals: true}],
    'prettier/prettier': ['warn'],
    'import/order': [
      'warn',
      {
        groups: ['builtin', 'external', 'internal', ['parent', 'sibling', 'index']],
        'newlines-between': 'always',
        pathGroups: [
          {
            pattern: '@core/**',
            group: 'internal',
            position: 'after',
          },
        ],
        pathGroupsExcludedImportTypes: ['internal'],
      },
    ],
    'import/no-named-as-default-member': ['off'],
    'import/no-anonymous-default-export': [
      'error',
      {
        allowArray: false,
        allowArrowFunction: false,
        allowAnonymousClass: false,
        allowAnonymousFunction: false,
        allowCallExpression: true,
        allowNew: false,
        allowLiteral: false,
        allowObject: false,
      },
    ],
  },
  settings: {
    react: {
      version: 'detect',
    },
    'import/resolver': {
      typescript: {
        // @alwaysTryTypes always try to resolve types under `<root>@types`
        // directory even it doesn't contain any source code, like `@types/unist`
        alwaysTryTypes: true,
        project: './tsconfig.json',
        extensions: ['.ts', '.tsx'],
      },
    },
  },
}

```


We need to update **.prettier.cjs** file as well:

```
module.exports = {
  semi: false,
  singleQuote: true,
  jsxSingleQuote: true,
  bracketSpacing: false,
  jsxBracketSameLine: false,
  arrowParens: 'avoid',
  useTabs: false,
  tabWidth: 2,
  printWidth: 100,
  trailingCommas: {
    array: true,
    object: true,
    function: false,
  },
}
```

##Import as a group is responsible for the below eslint rules:

`'import/order': [
      'warn',
      {
        groups: ['builtin', 'external', 'internal', ['parent', 'sibling', 'index']],
        'newlines-between': 'always',
        pathGroups: [
          {
            pattern: '@core/**',
            group: 'internal',
            position: 'after',
          },
        ],
        pathGroupsExcludedImportTypes: ['internal'],
      },
 ],`

here we need to specifics the group here which group i want. if your import group is not setup correctly this will show you warning into your console.

We may check this reference from github: **https://github.com/khalid7487/study/tree/master/React/vites-config-eslint**