Windows,Tutoriels, Informatique

Les Infos du Geek - Windows, tutoriels, Informatique

Translate website
E-mail-logo

Le GEEK.fr


Brackets

Publié le Publié dans Articles, Logiciels, Outils

Brackets

 

brackets-logo

 

 

Brackets-index

 

 

Brackets est un éditeur de code open source Type HTML WYSIWYG – What you see is what you get – (ce que vous voyez, vous obtenez.)
Les éditeurs HTML WYSIWYG sont des logiciels disposant d’une interface qui donne à l’utilisateur de voir son document tel qu’il sera publié.
Brackets créé par Adobe, est un éditeur écrit en HTML, CSS et Javascript avec la particularité d’intégrer des outils visuels directement dans son interface.
Brackets est spécialement pour le développement web et plus particulièrement le Front-End.
Brackets est un éditeur de code HTML léger, rapide et complet.
Il est open-source pour le webdesign, le développement sur des technologies Web telles que HTML, CSS et JavaScript.
Grâce à ses plugins, il vous apportera une facilité de création digne des meilleurs payants comme sublime texte.
Avec Brackets vous avez accès à l’auto-complétion, la fermeture des balises automatiques, l’écriture rapide avec Emmet et bien d’autres extensions.

 

Télécharger Brackets

 

Télécharger Brackets

 

brackets-setup-1.12

 

 

Brackets-install

 

Brackets-installer

 

Pour changer de langue
Cliquer sur Debug >> switch language
Choisir la langue voulue

 

brackets-langue

 

brackets-langue-fr

 

Brackets

 

 

Brackets plusieurs fonctionnalités:

Quick edit
Quick docs
Live preview
JSLint
Support de LESS
Intégration d’un débuggeur JavaScript
Open source
Extensibilité

Édition rapide : Brackets permet d’éditer les styles directement dans le fichier HTML, évitant ainsi d’ouvrir plusieurs fichiers liés et de passer continuellement des uns aux autres.
Aperçu en direct : cette fonctionnalité ouvre un aperçu du fichier HTML dans le navigateur puis le met à jour instantanément dès que l’on modifie le code (HTML ou CSS).
Les fichiers JS par contre sont en revanche automatiquement chargés après enregistrement.
Aide sur les attributs CSS avec la proposition des différentes valeurs possibles
Support des préprocesseurs Less et Sass
Intégration native de JSHint : A l’ouverture d’un fichier JS, un petit panneau s’affiche juste en-dessous avec les erreurs Javascript associées.
Grande sélection de thèmes et de plugins
Prévisualiseur natif d’images et de couleurs
Colorpicker natif
Éditeur de courbes de Bézier pour configurer une animation
Intégration d’Adobe Extract (outil permettant d’ouvrir un PSD en ligne)
API bien documentée
Multiple choix de langues

 

Voici une sélection d’extensions indispensables

Emmet : raccourcis clavier ++ (Anciennement Zencoding)
W3C Validation : affiche les erreurs de validation
HTMLhint : linting HTML
Projects : Pour gérer le multi-projets
Brackets file tabs : affiche les fichiers sous forme de tabulation plutôt qu’à gauche dans la sidebar
Indent guides: ajoute des lignes verticales pour visualiser en un coup d’oeil l’indentation.
Brackets snippets: permet de créer des raccourcis permettant d’écrire du code automatiquement : des snippets.
Brackets-Icons: permet d’ajouter des icônes selon le type de fichier dans le gestionnaire des fichiers de l’interface
Beautify : ré-indentation, ré-agencement, etc. Augmente sensiblement la lisibilité du document en dev (pour JS, HTML et CSS)
Autoprefixer : ajout de préfixes automatiques (configurable à la sauvegarde)
Minifier : Minifie CSS et Js via YUIcompressor dans un fichier *.min.css (configurable à la sauvegarde)
LESS autocompile : compilation LESS automatique à la sauvegarde (voir la page de l’extension pour configurer les chemins et la parenté)
PageSuck récupère le contenu html d’une page dont vous aurez renseigné l’URL en faisant Alt + G et vous crée une copie sur votre machine

CSSlint : affiche les erreurs de CSS et les conseils “OOCSS”
Epic Linter : complément de CSSlint, affiche des indications visuelles en live
ColorHints : affiche la liste des dernières couleurs utilisées dès que l’on commence à taper une couleur (#)
CSScomb : réordonne les propriétés CSS dans leur ordre d’importance, très pratique pour la lisibilité du code
Image Dimension Extractor : affiche la largeur et la hauteur des images CSS via clic droit
JSHint : JShint (vérification syntaxe moins poussée que jslint) dans Brackets
JSLint : JSlint dans Brackets. Voir la page officielle pour la configuration des options dans le fichier des préférences de Brackets.
JSLint Configurator : pour insérer dans le document les options jslint avec une GUI pour les cocher

CodeOverview : aperçu du code en petit
Brackets New Project Creator : crée un nouveau dossier de projet-type
Quick Search : highlight du mot sélectionné (et de toutes les autres occurences)
Brackets File Icons : affichage de pictos devant les noms des fichiers, favorise la lisibilité
Indentator : ré-indente tout le fichier selon ses préférences d’espacements (Ctrl+Alt+I)
Show Whitespace : affiche le type des espaces (tabulations ou espaces)
Reopener : Réouvrir un onglet fermé (par le menu ou ctrl+shift+w)
PHP Code Quality Tools : Linter pour PHP, nécessite un binaire php et codesniffer sur la machine
Brackets Git : interface Git
Gist Manager : permet de créer, voir, modifier des Gists publics ou privés
Autosave Files on Window Blur : ça fait ce que l’on attend de lui.

Les mises à jour et l’ajout de nouvelles extensions se font réguliérement.

 

Quelques raccourcis pratiques:

Ctrl + E : édition rapide de codes CSS, JS, fonctions, etc (mini-fenêtre ouverte directement dans le document)
Ctrl + B : sélection de l’occurence suivante
Ctrl + D : duplication d’une ligne
Alt + F3 : sélection de toutes les occurences dans le document
Ctrl + T : navigation entre les occurences
Ctrl + K : documentation rapide
Ctrl + F : rechercher
Ctrl + H : rechercher/remplacer

 

Site Officiel: Brackets Site

Soutien: Github.com-brackets

 

Mis à jour le 31-01-2018