Skip to content
Search Create account

DEV Community

DEV Community is a community of 870,143 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Twitter Facebook Github Instagram Twitch
Cover image for Vite: Powerful React Project Setup
Camilo Martinez
Camilo Martinez

Posted on • Updated on

Vite: Powerful React Project Setup

#react #vscode #vite #testing

Language: [🇪🇸] Español - [🇺🇸] English

Vite is by far the best alternative for creating React projects today.

npm create vite@latest <project-name> -- --template <react|react-ts>
# npm 7+, extra double-dash is needed

cd <project-name>
npm install
npm run dev
Enter fullscreen mode Exit fullscreen mode

With these commands, we create a very basic and clean project to serve as a starting point, but it will gonna need some extra tools to automate tasks that can make your life and the life of your development team easier.

VSCode

It's recommended to make these configurations on project settings and not in the global settings.

We will start creating a .vscode folder with a settings.json file inside.

{
    "emmet.excludeLanguages": [],
    "emmet.includeLanguages": {
        "markdown": "html",
        "javascript": "javascriptreact",
        "typescript": "typescriptreact"
    },
    "emmet.showSuggestionsAsSnippets": true,
    "emmet.triggerExpansionOnTab": true,
    "files.exclude": {
        "**/*.js.map": {
            "when": "$(basename)"
        },
        "**/node_modules": true,
    },
    "html.autoClosingTags": true,
    "javascript.autoClosingTags": true,
    "javascript.suggest.completeFunctionCalls": true,
    "typescript.suggest.completeFunctionCalls": true,
    "javascript.inlayHints.functionLikeReturnTypes.enabled": true,
    "typescript.inlayHints.functionLikeReturnTypes.enabled": true,
    "javascript.inlayHints.parameterNames.enabled": "all",
    "typescript.inlayHints.parameterNames.enabled": "all",
    "javascript.suggest.autoImports": true,
    "search.exclude": {
        "**/coverage": true,
        "**/node_modules": true
    },
    "typescript.autoClosingTags": true,
    "typescript.suggest.autoImports": true,
}
Enter fullscreen mode Exit fullscreen mode
/.vscode/settings.json

There are a lot of VSCode extensions and configurations out there. If you are hungry for more check VSCode - Essentials and VSCode - React Flavored.

JS Linter 

{ 
+    "editor.formatOnSave": true,
+    "javascript.format.enable": false,
+    "javascript.validate.enable": true,
+    "typescript.format.enable": false,
+    "typescript.validate.enable": true,
}
Enter fullscreen mode Exit fullscreen mode
/.vscode/settings.json

Install and config on the project folder:

npm install -D eslint
npx eslint --init
Enter fullscreen mode Exit fullscreen mode

You can choose the better for you, but my opinionated configurations are:

Use: To check syntax, find problems, and enforce code style
Type of modules: JavaScript modules (import/export)
Framework: React
Typescript: No #or Yes if the project uses it
Run: Browser #and Node if use Next.js
Style guide: Popular -> Standard #JS without semi-colon ;
Format: JavaScript
Enter fullscreen mode Exit fullscreen mode

Semi-colon exception

Because the standard style guide does not use semi-colons (;) take this in mind. If the next statement right after the line without a semicolon starts with one of the following special operators [, (, +, \*, /, -, ,, ., it will be recognized as an expression to the previous statement. Then you are going to need to start the line with ;.

You will be asked to install extra packages. Answer yes. When finish update configurations rules:

{
  rules: {
+    'no-console': 'warn',
+    'react/prop-types': "off",
+    'react/self-closing-comp': 'warn',
+    'padding-line-between-statements': [
+      'error',
+      {'blankLine': 'always', 'prev': '*', 'next': 'return'},
+      {'blankLine': 'always', 'prev': ['const', 'let', 'var'], 'next': '*'},
+      {'blankLine': 'any', 'prev': ['const', 'let', 'var'], 'next': ['const', 'let', 'var']}
+    ]
  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
}
Enter fullscreen mode Exit fullscreen mode
.eslintrc.js

Create a .eslintignore file on the root of the folder project:

build
coverage
dist
Enter fullscreen mode Exit fullscreen mode

There is no need to add node_modules because it was ignored by default.

If you don't want to use ES Lint extensions, add list and fix command at end of scripts:

{
  "scripts": {
+    "lint:l": "eslint .",
+    "lint:f": "eslint . --fix --ext .js,.jsx,.ts,.tsx"
  }
}
Enter fullscreen mode Exit fullscreen mode
package.json

Avoid import React error

Since React 17, you don't need to import React to use JSX anymore. But we would still need to import React to use Hooks or other exports that React provides.

To avoid ES Lint warns about import React, add a plugin:

{
  extends: {
+    'plugin:react/jsx-runtime',
  }
}
Enter fullscreen mode Exit fullscreen mode
.eslintrc.js

Auto sort

If you don't want to deal with sorting imports and properties set this configuration.

{
  rules: {
+    "import/order": ["warn", {
+      "pathGroups": [{
+        "pattern": "~/**",
+        "group": "external",
+        "position": "after"
+      }],
+      "newlines-between": "always-and-inside-groups"
+    }],
+    "react/jsx-sort-props": [
+      "warn",
+      {
+        "callbacksLast": true,
+        "shorthandFirst": true,
+        "noSortAlphabetically": false,
+        "reservedFirst": true
+      }
+    ],
  },
}
Enter fullscreen mode Exit fullscreen mode
.eslintrc.js

 JS Format

ES Lint can be enough, and Prettier it's optional because have a little better performance formatting than ES Lint. If you want to use it go ahead. But there is a problem, they fight to try both to format code, so you have to know how to configure them to work together.

If you want to use it go ahead.

{ 
+    "[javascript][typescript]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    }
}
Enter fullscreen mode Exit fullscreen mode
/.vscode/settings.json

Install Prettier and ESLint for prettier:

npm install -D prettier eslint-config-prettier
Enter fullscreen mode Exit fullscreen mode

Create a .prettierignore file on the root of the folder project:

build
coverage
dist
package-lock.json
Enter fullscreen mode Exit fullscreen mode

There is no need to add node_modules because it was ignored by default.

Create a .prettierrc.json file on the root of the folder project:

{
    "semi": false,
    "singleQuote": true
}
Enter fullscreen mode Exit fullscreen mode

Add extends prettier configuration at the end of extends:

{
  extends: [
+    'prettier'
  ]
}
Enter fullscreen mode Exit fullscreen mode
.eslintrc.js

If you don't want to use prettier extensions, add check and write command at end of scripts:

{
  "scripts": {
+    "prettier:c": "prettier . --check",
+    "prettier:w": "prettier . --write"
  }
}
Enter fullscreen mode Exit fullscreen mode
package.json

HTML Linter 

npm install -D htmlhint
Enter fullscreen mode Exit fullscreen mode

If you also want to lint HTML with ESLint install this additional plugin:

npm install -D eslint-plugin-html
Enter fullscreen mode Exit fullscreen mode

And add html to the list of plugins

{
  plugins: [
    'react',
+    'html'
  ],
}
Enter fullscreen mode Exit fullscreen mode
.eslintrc.js

CSS Linter

Install and config on the project folder:

npm install -D stylelint stylelint-config-standard
Enter fullscreen mode Exit fullscreen mode

Create a configuration file named .stylelintrc.json in the top level of your repository.

{
  "extends": "stylelint-config-standard",
  "rules": {
    "declaration-colon-newline-after": "always-multi-line",
    "property-no-unknown": [ true, {
      "ingnoreProperties": ["content-visibility"] 
    }]
  },
  "ignoreFiles": [
    "build/**",
    "coverage/**",
    "dist/**",
    "**/*.js",
    "**/*.jsx", 
    "**/*.ts",
    "**/*.tsx" 
  ] 
}
Enter fullscreen mode Exit fullscreen mode

To prevent both VS Code's built-in linters and Stylelint from reporting the same errors, you can disable the built-in linters.

{ 
+    "stylelint.enable": true,
+    "css.validate": false,
+    "less.validate": false,
+    "scss.validate": false,
+    "[css][scss]": {
+        "editor.defaultFormatter": "stylelint.vscode-stylelint"
+    }
}
Enter fullscreen mode Exit fullscreen mode
/.vscode/settings.json

Stylelint has more than 170ish rules. Sometimes it will show you an error that will literally cause a problem.

If you use a pretty printer alongside Stylelint, you should turn off any conflicting rules.

npm install -D stylelint-config-prettier
Enter fullscreen mode Exit fullscreen mode

Add it as extends on .stylelintrc.json file

{
  "extends": 
+  [
    "stylelint-config-standard",
+    "stylelint-config-prettier"
+  ]
}
Enter fullscreen mode Exit fullscreen mode

Git Linter

If the project doesn't have a git repository. First, run:

git init
Enter fullscreen mode Exit fullscreen mode

It works over Husky and only runs linters against staged git files. By doing so you can ensure no errors go into the repository and enforce code style.

Install and config on the project folder:

npx mrm@3 lint-staged
Enter fullscreen mode Exit fullscreen mode

Testing

Use Vitest. It's compatible with Jest language API so you don't need to relearn the syntax.

npm install -D vitest
Enter fullscreen mode Exit fullscreen mode

With the global flag you don't need to import de dependencies on each file adding automatic support to Jest.

import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    globals: true,
  },
})
Enter fullscreen mode Exit fullscreen mode
vitest.config.ts

If you are using typescript, also add this configuration.

{ 
+  "compilerOptions": {
+    "types": ["vitest/globals"],
+  }
}
Enter fullscreen mode Exit fullscreen mode
tsconfig.json

The next step, it's not required. But, if you want to take advantage of the IntelliSense it's recommended to start the test files with:

import { it, expect, describe } from "vitest";
Enter fullscreen mode Exit fullscreen mode

Update run test scripts like this:

{
  "scripts": {
+    "test":    "vitest --run --reporter verbose",
+    "test:w":  "vitest",
  }
}
Enter fullscreen mode Exit fullscreen mode
package.json

Coverage

For coverage reports, we need to install c8

npm install -D c8
Enter fullscreen mode Exit fullscreen mode

Update run test scripts like this:

{
  "scripts": {
+    "test:c":  "vitest run --coverage",
+    "test:cw": "vitest watch --coverage"
  }
}
Enter fullscreen mode Exit fullscreen mode
package.json

Add the c8 configuration.

import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
+    reporters: [
+      "verbose"
+    ],
+    coverage: {
+      "all": true,
+      "reporter": [
+        "text",
+        "html",
+        "lcov",
+      ],
+      "statements": 0,
+      "branches": 0,
+      "functions": 0,
+      "lines": 0
+    }
  },
})
Enter fullscreen mode Exit fullscreen mode
vitest.config.ts

Debug

For visual debugging tests.

Debug

It's not an extension. It is an npm package to install on your project that helps with debugging process.

npm install -S click-to-react-component
Enter fullscreen mode Exit fullscreen mode

Even though click-to-react-component is added to dependencies, tree-shaking will remove click-to-react-component from production builds.

beam me up

With a combination of keys and clicking over the component in the browser, it will transport you to the source component in your editor.

clic-to-component

Works with vite adding these configurations on your project:

import React from "react"
import ReactDOM from "react-dom/client"
+import { ClickToComponent } from "click-to-react-component"

import App from "./App"
import "./index.css"

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <App />
+   <ClickToComponent />
  </React.StrictMode>
)
Enter fullscreen mode Exit fullscreen mode
/src/main.jsx

Styles

I actually prefer the PostCSS approach instead of Sass because it is fast, is closer to the CSS standard, and no need for the file extension rename. So in the future, you can get rid of PostCSS and your project will continue working without needing a major migration.

npm install -D postcss
Enter fullscreen mode Exit fullscreen mode

For me these are the essentials plugins to install:

npm install -D postcss-nesting
npm install -D autoprefixer
Enter fullscreen mode Exit fullscreen mode

Install Autoprefixer only if you need old browser support. There are a lot of PostCSS plugins, try to not install too many or very rare plugins that are not closer to CSS standards (or proposal).

Create a postcss.config.js file on the root of the folder project:

module.exports = {
  plugins: {
    "postcss-nesting": true,
    "autoprefixer": true
  }
};
Enter fullscreen mode Exit fullscreen mode

Plugin order is important because we need that nesting runs before autoprefixer

If you decided to use Stylelint. Add this package:

npm install --D postcss-lit
Enter fullscreen mode Exit fullscreen mode

Add it as customSyntax on .stylelintrc.json file

{
  "extends": "stylelint-config-standard",
+  "customSyntax": "postcss-lit"
}
Enter fullscreen mode Exit fullscreen mode

If instead of PostCSS you want still to use Sass. Vite has SCSS built support. Install this package:

npm install -D sass
Enter fullscreen mode Exit fullscreen mode

Take care of using sass and not node-sass package because is deprecated.

If you decided to use Stylelint. Replace these packages:

npm remove stylelint-config-standard stylelint-config-prettier
npm install --D stylelint-config-standard-scss stylelint-config-prettier-scss
Enter fullscreen mode Exit fullscreen mode

Replace it as extends on .stylelintrc.json file

{
  "extends": [
-    "stylelint-config-standard",
+    "stylelint-config-standard-scss",
-    "stylelint-config-prettier",
+    "stylelint-config-prettier-scss",
  ]
}
Enter fullscreen mode Exit fullscreen mode

Now rename manually all .css files to .scss and update src/App.js to import src/App.scss.

That’s All Folks!
Happy Coding 🖖

ko-fi

Discussion (0)

Read next

robole profile image

Migrating from VS Code to VS Codium on Linux painlessly

Rob OLeary -

tigt profile image

So what?

Taylor Hunt -

horsemaker profile image

Implementing Dark Mode in React

Yash Ghodekar -

paul_emechebe profile image

Is Virtual DOM overhyped?

Paul-Simon Emechebe -