Quel logiciel pour coder ?

Beaucoup pensent qu'il faut un logiciel spécial de hacker pour coder un site. Que nenni, un simple éditeur de texte, comme TextEdit ou Bloc-notes peut faire l'affaire.

Coder se résume en une chose : taper des lignes de code sur un clavier dans un fichier. Pour cela, un simple éditeur de texte fait l'affaire :

du code ouvert avec textEdit

Seulement, un éditeur de texte n'interprête pas le code. C'est à dire qu'il est affiché en brut, noir sur blanc.
Il devient vite illisible et c'est pourquoi des logiciels existent pour faciliter la lecture.

Voilà par exemple le même code ouvert avec SublimText 3, qui est l'éditeur de code que j'utilise.

du code ouvert avec SublimText 3

Vous pouvez voir que le code est en couleur, et que celle-ci diffèrent pour vous faciliter la lecture.
Mais ça n'est pas le seul interêt de ce logiciel. Grâce à un plugin nommé Emmet, nous allons pouvoir coder beaucoup plus rapidement grace à pleins de raccourcis :)

Pour en savoir plus sur les raccourcis disponibles avec Emmet, voilà la page dédiée : https://docs.emmet.io/.

Comment installer SublimText 3 et Emmet ?

Pour installer SublimText 3, il suffit d'aller sur cette page et de le télécharger : https://www.sublimetext.com/3.

Nous allons ensuite installer le plugin Emmet.
Pour celà, la premère étape est d'intaller un Package Controller qui nous permettra d'ajouter des plugins à SublimText.
Allez dans View > Show Console et collez le code suivant dans la console qui vient de s'ouvrir en bas de votre application : 

				
					import urllib.request,os,hashlib; h = '6f4c264a24d933ce70df5dedcf1dcaee' + 'ebe013ee18cced0ef93d5f746d80ef60'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

Maintenant que le Package Controller est installé, vous pouvez masquer la console en utilisant le raccourci Ctrl + `.
Ensuite :

  1. Ouvrez la Command Palette avec le raccourci Ctrl + Shift + P.
  2. Tapez install et sélectionnez Package Control: Install Package.
  3. Tapez emmet et sélectionnez le plugin Emmet dans la liste déroulante.
  4. Enjoy :)

Vous êtes maintenant équipé pour coder en HTML et CSS !