React Template using Vite.Js

React Boilerplate using Vite , Prettier, Eslint, Stylelint, SASS and SVGO

Table of Contents

Official Resources

• Vite Documentation
• React
• Prettier
• Eslint
• Stylelint
• SASS

Get Started

# clone the official repository
git clone https://github.com/frontendfixer/vite_react_boilerplate.git
cd vite_react_boilerplate

# install all packages using your favorites node installer
pnpm install
# if you wish to use yarn then delete 'pnpm-lock.yaml' and
yarn install

Features

1. SASS as css preprocessor
2. Terser to minify JS
3. SVGO for svg minification
4. ESLint for JS/JSX linting

Scripts

"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"lint:eslint": "eslint . --ext .js,.jsx",
"fix:eslint": "eslint --fix  . --ext .js,.jsx",
"lint:stylelint": "stylelint ./src/**/*.{css,scss,jsx}",
"fix:stylelint": "stylelint --fix  ./src/**/*.{css,scss,jsx}"

• you can run those scripts by terminal command
  • start dev server

    pnpm run dev

  • start preview build

    pnpm run preview

  • eslint

    # start eslint
    pnpm run lint:eslint
    # fix all fixable problems
    pnpm run fix:eslint

  • stylelint

    # start stylelint
    pnpm run lint:stylelint
    # fix all fixable problems
    pnpm run fix:stylelint

Settings

If you'd like to overwrite vite or prettier or eslint or stylelint settings, you can add the rules in vite.config.js , .prettierrc.json , .eslintrc.json , .stylelintrc.json respectively.

vite config

• plugins

  import { ViteImageOptimizer } from 'vite-plugin-image-optimizer';
  import svgr from 'vite-plugin-svgr';
  
  // add those plugins
  plugins: [ViteImageOptimizer(), svgr()];

  • vite-plugin-image-optimizer is useful for svg minification
  • vite-plugin-svgr is used to create ReactComponent for any images/logo

  import { ReactComponent as Logo } from './logo.svg';

• settings

  • By default server and preview port are 5555 and 8888 you can change it here

    server: {
      port: 5555,
    }
    preview: {
      port: 8080,
    },

  • sourcemap and code split is enable for css and js

    build: {
    cssCodeSplit: true,
    sourcemap: true,
    },

prettier config

{
  "trailingComma": "es5",
  "arrowParens": "avoid",
  "printWidth": 80,
  "quoteProps": "as-needed",
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "bracketSameLine": false,
  "bracketSpacing": true,
  "jsxSingleQuote": false
}

eslint config

• plugins

  • Airbnb JavaScript Style Guide

  "extends": [,
    "airbnb",
    "airbnb/hooks",
    "prettier",
    "plugin:prettier/recommended"
  ],
  "plugins": [
    "jsx-a11y",
    "prettier",
    "unused-imports"
  ]

• rules you can change any rule define here

  "rules": {
  
  },
  
  // some default reules is overwritten you can take a look at here or completely remove it
  "overrides": [
    {
      "files": ["src/**/*.{js,jsx}"],
      "rules": {
  
      }
    }
  ]

stylelint config

• plugins

  "plugins": [
    // change all color format to either hsl or rgb
    "stylelint-color-format",
    // convert all px value to rem(base 16)
    "stylelint-rem-over-px"
  ]

  more details here
  • stylelint-color-format
  • stylelint-rem-over-px
    • I have disabled it for SCSS function rem() I had created. You can enable it here

    "rules": {
      "rem-over-px/rem-over-px": false,
      // "rem-over-px/rem-over-px": [true, { "ignore": "1px", "ignoreFunctions": ["url"] , "ignoreAtRules": ["media"], fontSize: 16 }],
    }