Easy-Micro

LOGICIEL Editeur HTML
Brackets

Éditeur de code gratuit orienté développement Web Front End (HTML, CSS, Javascript...) mais aussi Back End (PHP, Javascript)

⚠ Adobe annonce la fin de Brackets pour le 1er septembre 2021

Suite à la concurrence des autres éditeurs, Adobe à annoncé le 1er Mars 2021 la fin du support de Brackets pour le 1er septembre de cette même année. Au travers de son partenariat avec Microsoft, Adobe encourage les utilisateurs de Brackets à migrer vers Visual Studio Code un éditeur de code lui aussi gratuit et extensible créé par Microsoft.

Premier pas dans l'éditeur de code Brackets

> Télécharger Brackets
  • Dans la barre latérale de gauche, sélectionnez votre dossier de travail via le menu "Premier pas". Ce dernier s'ouvrira à chaque ouverture de Brackets et le menu Premier pas disparaîtra.
  • Le codage des caractères est visible en bas à droite de l'écran de Brackets
  • Augmenter/Diminuer la taille de police: Ctrl++/Ctrl--
  • Changer la couleur de fond de Brackets : menu Affichage / Thèmes...
  • Ouvrir plusieurs écran : menu Affichage / Fractionnement
  • Surlignement dans l'aperçu en direct : menu affichage / Surligner la ligne active
  • Modifier/Créer une règle CSS : clic droit sur la class ou l'id : Edition rapide (bouton nouvelle règle)
  • Editeur chromatique : Ctrl + E sur un code couleur
  • Lier son serveur local à Brackets : menu fichier > Paramètre du projet
  • L'extensions Emmet ajoute des raccourcis clavier : tapez des bout de mots, puis tabulation (Emmet, c'est la vie :-)
  • Le raccourci clavier CTRL + / pour insérer un commentaire ou mettre une ligne en commentaire

Raccourcis-claviers utiles

Voici quelques-uns des raccourcis les plus pratiques dans Brackets, en version Windows (l'équivalent existe bien sûr sur les autres systèmes) :
  • Ctrl + E : édition rapide de codes CSS, JS, fonctions, etc (mini-fenêtre ouverte directement dans le document)
  • Ctrl + B : sélection de l'occurrence suivante (comme Ctrl + D de SublimeText)
  • Ctrl + D : duplication d'une ligne
  • Alt + F3 : sélection de toutes les occurrences dans le document
  • Ctrl + T : navigation entre les occurrences
  • Ctrl + K : documentation rapide (bien fichue !)
  • Ctrl + F : rechercher
  • Ctrl + H : rechercher/remplacer
Source des raccourcis-claviers : Alsacreations

Le framework Bootstrap avec l'éditeur Brackets

Pour installer des extensions Bootstrap dans Brackets, menu Fichier > Gestionnaire d'extensions (ou via le petit bouton à droite de l'écran). Cliquer le bouton "Disponibles" et faite une recherche sur le mot Bootstrap

Brakets Extension Bootstrap starter Template

Propose un modèle (gabarit) de page web responsive prête à l'emploi avec un menu prè-inclus (incontournable). Pour utiliser cette extension, menu Fichier > New Bootstrap Templates

Brakets Extension Bootstrap 4 Snippets for Brackets

Petit bout de code (Snippets) pour afficher des boutons cliquable de toute les formes. Pour utiliser cette extension, cochez l'option "Enable RCH Bootstrap Snippets" visible en bas du menu Modifier.Dans le code, saisissez "bs4" et vous verrez apparaître la liste des bouton. Sélectionner un bouton et faîtes Entrer.

Si vous voulez modifier Bootstrap pour l'adapter à vos besoins, il vous faudra connaître LESS

ESLint avec l'éditeur Brackets

ESLint est un linter, soit un outil d'analyse statique du code source JavaScript créé par Nicholas C. Zakas en 2013. Lorsque vous enregistrez un fichier javascript dans Brackets, le correcteur ESLINT se met automatiquement en marche et vous affiche dans un panneau en bas de votre écran (le panneau des rapports), nombre d'erreur qui bloque votre code. Ce sont surtout les erreurs accompagnées d'un symbole croix blanche sur rond rouge qui gênent car elles vous empêche d'exécuter votre code javascript. Afin d'éviter ces désagréments, il faut rajouter au dessus - et parfois à l'intérieur - du code javascript, des instructions spécifique à ESLint.

Voici un exemple de fichier "mesfonctions.js" avec une syntaxe ESLint compatible. Ce code javascript affiche une liste de produit. Cette liste apparaît à partir d'un clic sur un simple lien hypertexte qui ce trouve dans la page Html

/* eslint no-unused-vars: 0*/
/* global window */

// Les 2 instructions ci-dessus permettent d'éviter les messages d'erreurs des variables déclarées mais pas utilisées et déclare l'objet window comme variable globale 

var mesproduits = []; 

// Remarquez qu'à la place de new Array(), on utilise la syntaxe littérale []

mesproduits[0] = "Pommes";
mesproduits[1] = "Poires";
mesproduits[2] = "Bananes";
mesproduits[3] = "Oranges";
mesproduits[4] = "Cerises";

// Toutes les variables sont déclarées
var i;
var madiv;
var liste;

function affichetout() {
"use strict"; // obligatoire pour être compatible JSLint
var madiv = window.document.createElement( "div" );

 madiv.innerHTML += "<ul>";
   
for (i = 0; i < mesproduits.length; i = i + 1) {
        
    madiv.innerHTML += "<li>" + mesproduits[i] + "</li>";
 }

 madiv.innerHTML += "</ul>";
    
window.document.getElementById( "liste" ).appendChild( madiv );

// autre syntaxe compatible :
// window.document.body.appendChild( madiv );

// autre syntaxe compatible :
// window.document.getElementById( "liste" ).
// insertBefore( madiv, liste.firstChild);

}

L'exemple ci-dessus fait apparaître dans le code html, une liste appelée depuis un simple lien hypertexte que voici :
<div id="liste">
<a href = "javascript: affichetout();">Afficher la liste</a>
</div>

Étapes pour que votre syntaxe javascript dans Brackets soit compatible JSLint

  • L'instruction "eslint no-unused-vars: 0" dans un commentaire permet d'éviter les messages d'erreurs des variables déclarées mais pas utilisées dans ce document
  • L'instruction "global window" dans un commentaire déclare l'objet window comme variable globale avant qu'il ne soit utilisé dans le code (idem pour l'objet document). Cela évite donc les messages d'erreurs de ESLint dans Brackets
  • L'instruction obligatoire "use strict" dans une fonction javascript oblige la déclaration des variables avant leur affectation
  • Toute les variables javascript doivent donc être préalablement déclarées avant utilisation
  • Les mauvaises tabulations, les espaces devant et derrière le signe égal et les espaces de trop sont aussi très important pour ESLint. Il faut du code propre!
  • Remarquez enfin qu'à la place de new Array(), on utilise la syntaxe littérale []. Nicholas C. Zakas, qui a écrit ESLint, préfère éliminer le mot clé new lorsque cela est possible.

Aperçu en direct

Notez que l'Aperçu en direct de Brackets (le petit "éclair" en haut à droite) ne fonctionne pas tout seul sur des fichiers PHP ou ASP. Il a besoin d'un serveur Apache et de son décodeur PHP.

Allez dans Fichier > "Paramètres du projet" et indiquer dans la boite qui s'ouvre, l'adresse de votre Localhost. L'avantage c'est qu'on peut laisser Chrome ouvert et voir en temps réel toute modification du fichier ouvert dans Brackets sans actualiser la page... idem dans l'inspecteur de Chrome (F12) !

Brackets et WAMP (ou EasyPHP)

Pour faire tourner Brackets avec un serveur WAMP ou EasyPHP, vous devez indiquer la bonne version de php à Windows :
  1. Copier l'adresse de votre dossier de travail
  2. Recherchez dans votre PC : Panneau de configuration > Système
  3. Cliquez sur le lien de gauche : Paramètres système avancés
  4. Dans l'onglet "Paramètres système avancés", cliquez sur le bouton "Variables d'environnement"
  5. Dans la section Variables système, recherchez la variable d'environnement PATH et sélectionnez-la. Cliquez sur Modifier
  6. Coller votre adresse comme par exemple C:\WAMP\wamp64\bin\php\php7.3.5

Pour aller plus loin...


< Page précédente EDITEUR HTML Page suivante >