Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Sublime Text
Webdesign

Améliorations Visuelles Simples Pour Mieux Développer Avec Sublime Text

by
Length:ShortLanguages:

French (Français) translation by Michael Chiche (you can also view the original English article)

Sublime Text offre des milliers d'extensions et de configuration pour que chacun puisse le personnaliser. Maintenant, je vais vous montrer certains thèmes, plugins, réglages et schémas de couleur pour rendre votre environnement de développement plus attrayant visuellement. Cela ne fera pas que rendre votre écran joli, cela vous fera aussi mieux développer!

Configuration

Sublime Text est disponible avec quelques options intégrées, pour améliorer votre environnement de développement, cependant, certaines de ces options ne sont pas activées par défaut. Voici certaines, sans lesquelles je ne pourrais vivre.

Note: Pour éditer le fichier de configuration de Sublime Text, ouvrez le en faisant Sublime Text 2 > Preferences > Settings - Default Et ensuite, selectionnez les éléments appropriés

sublime-settings

Chercher les réglages que vous voulez modifier, et ensuite ajoutez les à votre User Settings pour que ces nouveaux réglages ne soient pas écrasés lors d'une mise à jour de Sublime Text.

sublime-settings-2

Regarder Installation and Base Settings pour en savoir plus sur les réglages disponibles dans Sublime Text.

Polices et espacements

Choisir la bonne police et le bon espacement est l'une des manières les plus intimes de personnaliser son code. D'abord, choisissez une police qui vous convient, de préférence, une police monospaced . Voici certaines que vous pouvez regarder:

Une fois que vous avez choisi une police, verifiez qu'elle est installée sur votre ordinateur, ajoutez la à votre fichier de configuration, ajustez la taille et l'espacement avec les réglages suivants:

“font_face”: “Inconsolata";
"font_size": 18;
"line_padding_bottom": 1,
"line_padding_top": 1,

highlight_line

Ces réglages mettent en valeur la ligne ou est situé le curseur en la mettant d'une couleur différente (dépendant de votre schéma de couleur). Voir votre ligne en cours permet de se concentrer sur la tâche pendant que vous taper, facilite la navigation de ligne en ligne, permet de repérer rapidement là ou vous étiez resté quand vous revenez d'un autre programme.

"highlight_line": true,

highlight_modified_tabs

Pour mettre davantage l'accent sur les fichiers non enregistrés dans le projet en cours, ces réglages vont vous permettre de surligner les onglets des fichiers modifier dans une fenêtre.

"highlight_modified_tabs": true,

fade_fold_buttons

Saviez-vous Sublime Text peut plier et déplier des morceaux de code? Je le sais, et pourtant j'oublie toujours que cette fonction est disponible. Si vous activez ce paramètre, il laissera la balise plier à droite au lieu de la cacher

"fade_fold_buttons": false,

word_wrap

Le défilement horizontal peut être agaçant. Avec l'option retour à la ligne d'activée, votre texte s'adapte à la taille de votre écran pour que vous n'ayez plus besoin de défiler horizontalement.

"word_wrap": true,

bold_folder_labels

Certaines options disponibles permettent d'accenter certains éléments visuels dans la barre latérale, les voila:

"bold_folder_labels": true,

Afficher les fichier ouverts dans la barre latérale

Bizarrement, cette option n'est pas configurée dans le fichier de configuration. Pour montrer les fichiers ouverts au dessus de votre barre latérale, aller sur:

View → Side Bar → Show Open Files

Aligner la barre latérale

Ce n'est pas rééllement un réglage mais plutot une astuce. Tout comme dans une feuille de calcul, vous pouvez double cliquer sur la limite entre la barre latérale et la fenetre avec le contenu pour que la barre latérale s'adapte à la largeur de son contenu

sublime-visual-sidebar

Plugins

Les plugins sont très utiles pour apporter des fonctionnalités supplémentaires à Sublime Text, je conseille fortement d'utiliser Package Control pour gérer vos plugins.

BracketHighlighter

Bracket highlighter est un plugin qui surligne les balises et les parenthèses (Sans rire!) Plus sérieusement, c'est un outil très puissant qui vous montre ou démarre et termine les sections de code dans lesquelles vous êtes. Les types de parenthèses sont exposés dans la barre latérale et ont une icone différente pour chaque type de caractère et d'élément

sublime-visual-brackethighlighter-2

Git Gutter

Celui ci est un de mes plugins préférés. Git gutter affiche une icône dans la zone de gouttière pour indiquer les lignes insérées, modifiées ou supprimées en comparant à votre projet git.

sublime-visual-gitgutter-2

SublimeLinter

Ce plugin affiche un surlignage des erreurs dans le code. Avec à satrès bonne documentation et une longue liste de linters, ce plugin est une excellente solution pour être sur que votre code ne contient pas d'erreur.

sublime-visual-sublimelinter-2

Thèmes et schéma de couleur

Une des principales manières de personnaliser Sublime Text et de le rendre propre à soi est de créer ses propres thèmes et schémas de couleur. Il existe actuellement des centaines d'options disponibles et beaucoup sont rajoutées chaque semaine. Voici quelques thèmes et schémas de couleur qui valent le coup d'être connus.

Theme: Soda

Soda est devenu le thème le plus populaire, est le meilleur exemple d'un thême personnalisé dans la communauté Sublime Text. De nombreux thêmes ont été créés en bifurquant depuis ce projet. Soda offre des réglages supplémentaires, support du rétina et des interfaces claires ou sombres

sublime-visual-soda-2

Theme: Flatland

Si vous êtes un amateur de flat design, alors Flatland est un bon choix. Il simplifie tous les éléments visuels et vous permet de nombreuses autres options, tel que le style des onglets et la barre latérale.

Theme: Spacegray

Mon thême préféré pour le moment, et très populaire sur Github, Spacegray a une palette de couleur unique et une interface graphique réduite au stricte minimum.

sublime-visual-spacegray

Schéma de couleur: Solarized

Le très connu Solarized project est disponible pour Sublime Text. C'est un projet de schéma de couleur dont le slogan est "des couleurs précises pour les machines et les humains" avec une théorie unique de couleur à laquelle on doit sa création.

Schéma de couleur: Base16

Base16 est un autre schéma de couleur avec beaucoup d'options (Celui que j'utilise actuellement).

Conclusion

Il y énormément de choses qui ne sont pas décrites ici! N'oubliez pas qu'il est très important d'évaluer tout les éléments différents de Sublime Text quand vous le personnaliser. Ne me croyez pas au mot, allez chercher sur Github ou dans Package Control, essayez de nouveaux réglages et vérifiez s'ils vous conviennent. Et retournez voir vos paramètrages de temps en temps et vérifiez si de nouvelles fonctionnalités peuvent améliorer votre environnement de développement.

Quels réglages, polices, plugins, thêmes, schémas de couleur avez vous trouvé pour améliorer votre environnement de développement? Faites nous en part avec un commentaire, et partagez avec quelqu'un à qui cela pourrait être utile!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.