Comment j'ai créé un beautificateur de code en deux jours

Récemment, j'ai conçu un diagramme filaire d'un outil d'embellissement de code. Le lendemain, j'ai décidé de le transformer en un vrai outil. L'ensemble du projet a été achevé en moins de deux jours.

J'ai pensé à construire un nouvel outil d'embellissement de code. L'idée n'est pas unique, mais chaque fois que j'utilise l'outil de quelqu'un d'autre, je me retrouve à réappliquer les mêmes paramètres encore et encore et à éviter les publicités à chaque fois . ?? ‍

Je voulais un outil simple et facile à utiliser sans tracas, alors la semaine dernière, j'ai pris du papier et j'ai commencé à esquisser un fil de fil. J'aime vraiment dessiner des wireframes à la main. Conçu avec un crayon et du papier, mon cerveau fonctionne mieux que de regarder l'écran.

J'ai été immédiatement inspiré après avoir dessiné le wireframe. Le lendemain, j'ai pris du temps de mon travail quotidien et en ai transformé la réalité. ??‍?

Afficher les résultats

conception

Je sais que je veux que l'éditeur de code soit au centre de l'outil, j'ai donc créé une barre de menu mince en haut pour les modes de contrôle (par exemple HTML, CSS, JavaScript) et les paramètres. J'ai également ajouté un bouton "À propos".

L'éditeur lui-même occupe la majeure partie de l'écran, mais il se mélange bien avec l'arrière-plan, vous le remarquez donc à peine. Au lieu d'utiliser des instructions pour gaspiller de l'espace, j'ai utilisé un espace réservé qui disparaît lorsque vous commencez à taper.

En bas, j'ai créé une barre d'état qui affiche des statistiques en temps réel sur le code, y compris le mode actuel, les paramètres d'indentation, le nombre de lignes, le nombre de caractères et la taille du document en octets. Il y a des boutons clairs et propres et copys sur le côté droit de la barre d'état. Au milieu se trouve le logo qui montre mon propre service.

Je ne pense pas que de nombreux développeurs écrit du code sur leurs téléphones, mais je veux toujours que cet outil s'exécute sur des appareils mobiles. En plus des techniques réactives couramment utilisées, j'ai également dû surveiller la taille de la fenêtre et ajuster la position de l'onglet lorsque l'écran est devenu trop étroit.

J'utilise des unités Flexbox et de la fenêtre pour le redimensionnement vertical. C'est en fait facile à faire, à l'exception d'un petit problème iOS. Voici un stylo montrant le wireframe de base. Notez comment la zone de texte s'étire pour remplir l'espace inutilisé entre le titre et le pied de page.

Si vous regardez l'onglet JavaScript, vous verrez des problèmes et des solutions iOS. Je ne sais pas comment détecter une telle fonctionnalité, donc maintenant c'est juste un simple contrôle d'appareil.

Réglage du traitement

Je veux que les paramètres les plus couramment utilisés soient faciles à accéder, mais exposent également les paramètres avancés pour chaque mode. Pour ce faire, j'ai transformé le bouton Paramètres en pop-up avec des liens vers des paramètres plus avancés. Après avoir modifié les paramètres, l'interface utilisateur sera mise à jour immédiatement et les paramètres seront enregistrés sur LocalStorage pendant longtemps.

J'utilise Vue.js ici. Chaque paramètre est mappé sur une propriété de données, et lorsque l'un d'eux change, les mises à jour de l'interface utilisateur (si nécessaire) et j'appelle SaveSettings (). C'est à peu près comme ça.

 fonction SaveSettings () {
  const Settings = {};

  // SettingStostore est un tableau de noms d'attributs qui seront persistés // "Ce" fait référence au modèle Vue actuel settingstostore.map (key => paramètres [key] = this [key]);
  localStorage.SetItem («Paramètres», JSON.StRINGIFY (paramètres));
}

Chaque paramètre est une propriété de données synchronisée avec LocalStorage. Il s'agit d'un moyen de stockage d'État plutôt primitif, je peux donc mettre à jour l'application plus tard pour utiliser des bibliothèques de gestion d'État telles que Vuex.

Pour restaurer les paramètres, j'ai une fonction de restauration () qui s'exécute lorsque l'application démarre.

 Fonction RestroreSettings () {
  const JSON = localStorage.getItem («Paramètres»);

  if (json) {
    essayer {
      const Settings = JSON.Parse (JSON);

      Object.keys (paramètres) .ForEach (key => {
        if (settingstostore.cluds (key)) {
          this [key] = paramètres [key];
        }
      });
    } catch (err) {
      Window.Alert ('Erreur Chargement des paramètres précédents');
    }
  }
}

Cette fonction obtient des paramètres de LocalStorage et les applique un par un, en s'assurant que seuls les paramètres valides dans SettingStostore sont importés.

Le lien des paramètres avancés ouvre une boîte de dialogue avec chaque onglet de mode. Malgré plus de 30 paramètres au total, tout est organisé et accessible afin que les utilisateurs ne se sentent pas dépassés.

Appliquer le thème

Le mode sombre est très populaire de nos jours, il est donc activé par défaut. Pour ceux qui l'aiment, il y a aussi un thème de couleur vive. L'interface utilisateur entière changera à l'exception des fenêtres contextuelles et des dialogues.

J'ai envisagé d'utiliser prefers-color-scheme , qui se trouvaient dans Firefox 67 récemment, mais j'ai décidé de changer les boutons pourrait être meilleur. La prise en charge du navigateur pour les requêtes de préférence de thème de couleur n'est pas très bonne, et les développeurs sont bizarres. (Par exemple, j'utilise des macos avec un thème brillant, mais mon éditeur de texte est sombre.)

Définir les fonctions

Il est facile de trouver un point de fonctionnalité. Il est difficile de limiter les fonctionnalités de la version initiale. Voici les fonctionnalités les plus pertinentes que j'ai publiées tout de suite:

• Embellir le code HTML, CSS et JavaScript
• Syntaxe Soulignation avec correspondance d'étiquette / support
• Coller ou faire glisser et déposer un fichier pour charger le code
• Détecter automatiquement les préférences d'indentation en fonction du code collé ou des fichiers glisser-déposer
• Thèmes brillants et sombres
• Nettoyage et copie en un clic
• Raccourcis clavier
• La plupart des options d'embellissement JS sont configurables
• Les paramètres sont stockés indéfiniment dans localstorage
• UI minimal, pas de publicités (juste une publicité discret pour mon propre service)?

J'ai également ajouté des œufs de Pâques pour le plaisir. Essayez de rafraîchir la page, d'explorer les raccourcis et de le partager sur Facebook ou Twitter pour les trouver. ?

Outils et bibliothèques que j'utilise

J'aime vraiment Vue.js. Cela peut être un peu trop pour ce projet, mais la Vue CLI me permet de commencer à construire avec tous les derniers outils avec une commande simple.

 Vue créer un beau code

Je n'ai pas eu à perdre de temps à construire un échafaudage, ce qui m'a aidé à construire cet outil rapidement. De plus, Vue est très pratique dans les statistiques en temps réel, la modification des thèmes, les paramètres de commutation, etc. J'ai utilisé divers composants d'interface utilisateur d'élément tels que les boutons, les éléments de formulaire, les fenêtres contextuelles et les boîtes de dialogue.

L'éditeur est alimenté par Codemirror et utilise des styles personnalisés. Il s'agit d'un projet bien soutenu et excellent que je recommande fortement pour l'édition de code dans le navigateur.

La bibliothèque qui fait toute l'embellissement s'appelle JS Embeltify, qui gère JavaScript, HTML et CSS. JS Embeltify fonctionne du côté du client, donc cette application n'a pas réellement de backend - votre navigateur fait tout le travail!

JS Embeltify est très facile à utiliser. Installez-le à l'aide npm install js-beautify et exécutez votre code via la fonction correspondante.

 importer la beauté de «js-beautify»;

const code = 'votre code ici';
Paramètres const = {
  // vos paramètres ici
};

// html
const html = belle.html (code, paramètres)

// CSS
const CSS = belle.css (code, paramètres)

// javascript
const js = belle.js (code, paramètres)

Chaque fonction renvoie une chaîne contenant le code embelli. Vous pouvez modifier la méthode de sortie de chaque langue en passant dans vos propres paramètres.

On m'a demandé à plusieurs reprises de plus jolis, ce qui est un outil similaire, il convient donc de mentionner que j'ai choisi JS Embellir parce qu'il n'est pas trop arbitraire et plus configurable. Si la demande est suffisamment grande, j'envisagerais d'ajouter une option pour basculer entre JS Embeltify et plus jolie.

J'ai déjà utilisé ces bibliothèques, donc l'intégration est en fait très facile. ?

Ce projet est grâce à mon application surréaliste CMS. Si vous recherchez un excellent CMS pour les sites Web statiques, consultez-le - il est gratuit pour les sites personnels, éducatifs et à but non lucratif!

Oh, si vous voulez savoir quel éditeur j'utilise ... c'est le code Visual Studio. ??‍?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!