npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

create-o-vite

v0.3.1

Published

Installer rapidement un environnement de développement pré-configuré avec Vite

Downloads

8

Readme

O'vite

Seul, ce projet ne sert pas à grand chose : il permet de créer un projet dans un environnement fiable (Vite) et pré-configuré.

Préambule

Pourquoi ne pas utiliser directement Vite alors ?

Cet outil répond à 2 objectifs principaux :

  1. on peut installer Vite sur un dépôt Git existant, avec des dossiers et fichiers pré-existants
  2. on peut facilement utiliser les règles Airbnb pour ESLint

Fonctionnalités

Projet

Comme dit plus haut, il est possible de créer un projet depuis un dépôt Git existant ou de partir de zéro.

Templates

Plusieurs templates sont disponibles :

  • Vanilla JS ou React
  • JavaScript ou TypeScript
  • ESlint (Airbnb) ou non

voir le dossier templates

Autres

Il est aussi possible de :

  • sourcer son code avec Git (init, commit, push)
  • d'ouvrir le projet dans VS Code et dans votre navigateur

Utilisation

Pour gagner en performance et en poids de fichiers, nous vous invitons à utiliser PNPM ; son installation vous sera proposer dans le script. Vous pouvez, bien entendu, préférer NPM.

Depuis NPM

Nous vous recommandons de l'utiliser depuis NPM directement, pour être sûr d'avoir la dernière version :

pnpm create o-vite@latest [-- [options] [nom|SSH]]
# ou
npm create o-vite@latest [-- [options] [nom|SSH]]

Notez le -- qui permet de séparer les paramètres passés à la commande pnpm et ceux passés au script

Exemples :

pnpm create o-vite@latest -- my-project
pnpm create o-vite@latest -- -t my-project

Voir les options disponibles et le dossier de destination ci-dessous

En global

Installer cet outil globalement avec NPM :

npm install -g o-vite

Puis le lancer :

o-vite [options] [nom|SSH]

Commun

Dans les deux cas, il suffit ensuite de suivre les instructions dans le terminal !

Vous pouvez aussi spécifier le template à utiliser et les autres fonctionnalités depuis les options de la ligne de commandes.
Exemple : pour un projet React + ESLint + TypeScript et la génération d'un premier commit et l'ouverture dans VS Code et le navigateur

pnpm create o-vite@latest -- -react

ATTENTION ici -react ne signifie pas « je veux React », mais :

  • r → React
  • e → ESlint (Airbnb)
  • a → ouvrir VS Code et le navigateur (access ? action ? à toi de jouer ?)
  • c → génère le premier commit
  • t → TypeScript

donc -trace et -carte fonctionnent aussi… mais c'est moins marrant !

Destination

Par défaut, le template est copié dans le dossier où le script est appelé.
Il est possible de spécifier :

  • un nom de projet, pour en créer un nouveau
  • une adresse Git (SSH), pour partir sur un dossier avec ressources

Nouveau projet

Le dossier de destination peut être personnalisé. Il faut ajouter un second argument à la commande de base :

pnpm create o-vite@latest -- my-project
pnpm create o-vite@latest -- /dev/projects/my-app

Comme vous le voyez, vous pouvez renseigner un chemin ; le dossier de destination sera automatiquement créé.

ATTENTION si le dossier de destination renseigné existe déjà, une erreur sera levée !

Depuis une adresse Git

Seules les adresses SSH sont acceptées, un sous-dossier est crée d'après le nom du dépôt distant dans le dossier où vous appeler l'outil.

Exemple :

user@DESKTOP:/var/www/html/S01$ pnpm create o-vite@latest -- my-ssh-address.git

créera un dossier /var/www/html/S01/my-ssh-address

Options

| Flag | Alias | Défaut | Option | |--------------|-------|---------|----------------------------------------------------------| | --yes | -y | | Conserve les options par défaut (passe le formulaire) | | | | | | | --react | -r | false | Faut-il installer React ? | | --typescript | -t | false | Faut-il installer TypeScript ? | | --eslint | -e | false | Faut-il installer ESLint (Airbnb) ? | | --commit | -c | false | Faut-il commit l'installation de Vite ? | | --access | -a | false | Faut-il ouvrir le projet dans VS Code et le navigateur ? | | | | | | | --debug | | | Affiche des informations pour faciliter le débogage |

si aucune option est passée, le formulaire s'affiche
si au moins une option est passée, les autres prennent leur valeur par défaut

Mettre à jour les dépendances

Avec PNPM :

# https://pnpm.io/fr/cli/update
pnpm up [-i]

Avec NPM :

# Lister avec npm-check-updates
# https://www.npmjs.com/package/npm-check-updates
npm run update
# Installer
npm run update:do

Bonus

L'outil installe automatiquement des recommandations d'extensions VS Code.
vous trouverez la liste dans le fichier extensions.js.
Dans ce dossier, vous trouverez aussi quelques recommandations de configuration de VS Code.

ESLint

Linter pour le JavaScript : vous permet de trouver et de corriger (quelquefois automatiquement) des erreurs dans votre code.

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

ext install dbaeumer.vscode-eslint

Prettier

Code formatter : impose un style cohérent en analysant votre code et en le réimprimant avec des règles configurées.

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

ext install esbenp.prettier-vscode

Error Lens

En combinaison avec EsLint et Prettier, renforce leur diagnostic et améliore la lisibilité des erreurs et avertissements.

https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens

ext install usernamehw.errorlens

Auto Rename Tag

Renomme automatiquement les balises HTML/JSX jumelées.

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

ext install formulahendry.auto-rename-tag

Material Icon Theme

Fournit des icônes pour vos fichiers et dossier.

https://marketplace.visualstudio.com/items?itemName=pkief.material-icon-theme

ext install pkief.material-icon-theme