Code Monkey home page Code Monkey logo

patrickjmeurer / viterc Goto Github PK

View Code? Open in Web Editor NEW
52.0 1.0 12.0 50 KB

A modern minimal Vite + React + TypeScript template with pre-configured ESLint (with Airbnb JS/React rules), Prettier, Testing with Jest and Git hooks with Husky out of the box 📦

Home Page: https://viterc.netlify.app/

HTML 3.92% CSS 19.85% TypeScript 61.24% Shell 1.61% JavaScript 13.37%
eslint prettier react template typescript vite vite-template vite-template-react vitejs

viterc's Introduction

ViteRC ❤️‍🔥

A modern minimal Vite 5 + React 18 + TypeScript template with pre-configured ESLint (with Airbnb JS/React rules), Prettier, Vitest and Git hooks with Husky out of the box 📦

Vite React TypeScript ESLint Prettier Vitest Testing Library Commitlint

Features

  • ⚡️ Vite 5 - Next Generation Frontend Tooling
  • ⚛️ React 18 - A JavaScript library for building user interfaces
  • 💎 TypeScript - Why not?!
  • 🔨 EsLint - Pluggable JavaScript linter
  • 🌀 Prettier - Opinionated Code Formatter
  • 🐺 Husky - Native Git hooks
  • ⚙️ Vitest - Testing library
  • 📑 Commitlint - Linting your commits based on commit convention
  • ⌨️ Absolute Imports

Why

This template arose out of a need to unite all the above libraries, which were not found in the existing Vite templates. This template has an active contributors that will update everything on this template as needed

Usage

If you are using either Yarn or NPM run the command bellow

npx degit potreco/viterc my-app

cd my-app

# Required if you want a repository and work with Git hooks
git init

yarn install

yarn dev

If you are using Bun

bun create potreco/viterc/bun my-app

cd my-app

# Required if you want a repository and work with Git hooks
git init

bun install

bun run dev

Available commands

In this project, you can run the following scripts:

Script Description
dev Runs the app in the development mode.
build Builds the app for production to the dist folder.
lint Runs the Eslint and show code problems
format Runs the Prettier and fix code style
preview Builds the app for production to the dist folder, and run locally server.
test Run the app tests.
test:watch Run the app tests in watch mode.

About the absolute imports

To correctly functioning (code and tests) of absolute imports, you should add some codes in some files, like:

  • vite.config.ts
  • tsconfig.json

We already writed some absolute imports on these files, so if you wanna more paths or edit some, feel free to do it. If your not safe about it or have some question, send us a thread on Github Discussions asking for, we were happy to help

License

MIT

viterc's People

Contributors

patrickjmeurer avatar

Stargazers

Raja avatar Ilya Zaytsev avatar  avatar  avatar CHIA-HONG CHANG avatar  avatar Aleksei Klimov avatar Linbin avatar Egor avatar Heaven avatar Janko Pejic avatar Ivanilton Bezerra avatar zzh avatar 沚水 avatar Yufan Sheng avatar ShellWen | 颉文 avatar Akhil avatar Marcin Kopański avatar Yongyuth "First" Chuankhuntod avatar Stephanie avatar Alban Marku avatar Ben Read avatar Max avatar mkdan8791 avatar Alexander Elgin avatar Tuan Duc Tran avatar Yan avatar Santiago Molina avatar  avatar Jeff P avatar Manuel Desole avatar Mirian Okradze avatar Dominik avatar Julian Orozco avatar Claudio Orlandi avatar Web Dev Ben avatar Matheus Rian avatar Diego Vizhnay avatar Guilherme Salomão avatar Danilo Alves avatar wang ziwan avatar Charlie avatar Charlike Mike Reagent avatar Denys Sukhobok avatar Asrorbek Mannonov avatar Marzuk Zarir avatar Ozby avatar Pingo avatar Camille HBP avatar Francisco Cândido avatar Martin avatar  avatar

Watchers

 avatar

viterc's Issues

Relative paths don't working with Jest

Some relative paths is not working with Jest.

Default Jest configuration on project:

module.exports = {
  testEnvironment: "jsdom",
  transform: {
    "^.+\\.tsx?$": "ts-jest"
  },
  moduleNameMapper: {
    '\\.(gif|ttf|eot|svg|png)$': '<rootDir>/test/__mocks__/fileMock.js',
    '\\.(css|less|sass|scss)$': 'identity-obj-proxy',
    "^@/(.*)$": "<rootDir>/src/$1"
  },
  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
}

This configuration is causing the error below:
image

Solutions:

  • Documentation orientation;
  • Pre send a file with @/Components/ relative path.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.