Easy-Micro

LOGICIEL Editeur HTML
Brackets

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

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

JSLint avec l'éditeur Brackets

JSLint est un outil d'analyse statique du code source JavaScript développé par Douglas Crockford. Lorsque vous enregistrez un fichier javascript dans Brackets, le correcteur JSLINT 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 à JSLint.

Voici un exemple de fichier "mesfonctions.js" avec une syntaxe JSLint 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 erreurs sur les fonctions non 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 erreurs sur les fonctions non utilisées dans ce document javascript
  • 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 JSLint 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 JSLint. Il faut du code propre!
  • Remarquez enfin qu'à la place de new Array(), on utilise la syntaxe littérale []. Douglas Crockford, qui a écrit JSLint, préfère éliminer le mot clé new lorsque cela est possible.

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...

Flux RSS Easy-Micro - Abonnez-vous Easy-Micro [ François Bisch ]