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

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

# 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

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

"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

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.

• 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, },

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

• 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": { } } ]

• 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 }], }