Advertisement
  1. Web Design
  2. Sublime Text

Sencillas mejoras visuales para una mejor programación con Sublime Text

Scroll to top
Read Time: 5 min

() translation by (you can also view the original English article)

Sublime Text ofrece miles de extensiones y configuraciones para hacer un editor de código personalizado para cualquier persona. En este tutorial, voy a mostrarte algunas configuraciones, plugins, temas y esquemas de color para ayudarte a hacer la experiencia de programar visualmente más apetecible. Esto no hará que tu pantalla sea más hermosa, pero ¡te hará un mejor programador!

Configuración

Sublime Text incluye algunas grandes características para mejorar visualmente tu experiencia programando, sin embargo, algunas de estas configuraciones no están activadas por defecto. Aquí mostraré algunas sin las que no puedo vivir.

Nota: Para editar tu archivo de configuración de Sublime Text, ábrelo dirigiéndote a Sublime Text 2 > Preferences > Settings - Default y luego selecciona la opción apropiada.

sublime-settingssublime-settingssublime-settings

Encuentra las características que te gustarían cambiar, luego añádelas a tu User Settings para prevenir que dichas características sean sobreescritas cuando actualices Sublime Text.

sublime-settings-2sublime-settings-2sublime-settings-2

Para obtener más información acerca de cómo manejar las opciones de configuración de Sublime Text, puedes visitar Instalación y configuración básica.

Fuentes y espaciado

Elegir la fuente correcta y el espaciado adecuado es uno de las maneras más particulares de personalizar tu código. Primero, elige una tipografía adecuada para programar, preferiblemente un tipo de letra monoespaciado. Aquí encontrarás algunas:

Una vez te hayas decidido por una fuente, asegúrate de que está instalada en tu sistema, añádelas a tú configuración, y ajusta el tamaño y espaciado siguiendo las siguientes instrucciones:

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

highlight_line

Ésta opción colorea la línea que rodea el cursor en un color diferente (dependiendo del esquema de color seleccionado). Mirar la línea actual dónde te encuentras te ayuda a concentrarte en la tarea actual mientras escribes, navegas fácilmente de una línea a otra, y encuentras de manera rápida el sitio dónde te encontrabas cuando vuelves de un programa diferente.

"highlight_line": true,

highlight_modified_tabs

Para identifcar aquellos ficheros del proyecto actual que aún no han sido salvados, ésta opción resaltará aquellas pestañas de los archivos modificados dentro del programa.

"highlight_modified_tabs": true,

fade_fold_buttons

¿Sabías que Sublime Text te permite plegar y desplegar trozos de código? Yo sí, pero siempre se me olvida que esta característica está disponible. Si activas esta opción, siempre se mostrará el plegado de etiquetas, en lugar de ocultarlo.

"fade_fold_buttons": false,

word_wrap

El scroll horizontal puede ser un dolor de cabeza. Con la opción word wrap activada, el texto flotará hasta el tamaño de tu pantalla e impedirá que tengas que hacer scroll horizontal.

"word_wrap": true,

bold_folder_labels

Existen algunas opciones disponibles para añadir algunos elementos visuales extra a la barra lateral, cómo por ejemplo:

"bold_folder_labels": true,

Mostrar ficheros abiertos en la barra lateral

Curiosamente, esta opción no se activa en el archivo de preferencias. Para mostrar los archivos abiertos al principio de la barra lateral, debes dirigirte a:

View → Side Bar → Show Open Files

Alinear la barra lateral

En realidad esto es más un consejo que una opción de configuración. Tal y cómo ocurre en una hoja de cálculo, puedes hacer doble click en el límite entre la barra lateral y el contenido, para ampliar el ancho de la barra lateral hasta la anchura de su contenido.

sublime-visual-sidebarsublime-visual-sidebarsublime-visual-sidebar

Plugins

Los plugins son extremadamente útiles añadiendo características extras a Sublime Text. Recomiendo encarecidamente usar Package Control para manejar plugins.

BracketHighlighter

Bracket highlighter es un plugin que subraya etiquetas y signos de apertura/cierre (¡ver figura!) Pero en realidad, es una herramienta poderosa que te muestra el principio y el final de cada sección de código en la que te encuentras. El tipo de signo de apertura/cierre es mostrado en la barra lateral y tiene un diferente icono para los tipos diferentes de caracteres y elementos.

sublime-visual-brackethighlighter-2sublime-visual-brackethighlighter-2sublime-visual-brackethighlighter-2

Git Gutter

Éste es uno de mis favoritos. Git gutter es un plugin simple que muestra un icono en el área izquierda contigua a los números de línea para indicar líneas insertadas, modificadas o eliminadas en comparación con tu proyecto de git.

sublime-visual-gitgutter-2sublime-visual-gitgutter-2sublime-visual-gitgutter-2

SublimeLinter

Este plugin muestra resaltado de líneas potencialmente incorrectas. Con su extensa documentación y larga lista de linters, este plugin es una gran solución para asegurarte que tú código esté libre de errores.

sublime-visual-sublimelinter-2sublime-visual-sublimelinter-2sublime-visual-sublimelinter-2

Temas y esquemas de color

Una de las mayores posibilidades para personalizar Sublime Text y adecuarlo a tu gusto es mediante temas y esquemas de colores. Actualmente existen ciento de opciones disponibles y muchas más son introducidas cada semana. A continuación te mostraré unos pocos temas que merecen la pena analizar.

Theme: Soda

Soda se ha convertido en el tema más popular y el mejor ejemplo de tema personalizado en la comunidad Sublime Text. Muchos temas han sido creados bifurcando este proyecto. Soda ofrece características extras, gráficos preparados para pantalla retina e interfaces de usuario oscuras y claras

sublime-visual-soda-2sublime-visual-soda-2sublime-visual-soda-2

Theme: Flatland

Si tú eres un fan de la moda del diseño plano, entonces Flatland es una buena elección. Este tema simplifica todos los elementos visuales.

Theme: Spacegray

En estos momentos mi favorito y actualmente tendencia en Github, Spacegray tiene una paleta única de color y una interfaz de usuario extremadamente minimalista.

sublime-visual-spacegraysublime-visual-spacegraysublime-visual-spacegray

Color Scheme: Solarized

El popular proyecto Solarized se encuentra disponible para Sublime Text. Es un proyecto colorido cuyo lema es “precisión de color para máquinas y persona" con una teoría única del color detrás de su creación.

Color Scheme: Base16

Base16 es otro esquema de color popular con muchas opciones (Actualmente es el que yo utilizo).

Conclusión

¡Hay mucho de lo que hablar sobre Sublime Text! No olvides, que lo importante es que cada uno evalúe por si mismo todos los elementos diferentes de Sublime Text. No te quedes con la información del post, busca en Github o mediante el Package Control, prueba nuevas configuraciones y observa si ellas son de utilidad para ti. Revisa tu configuración a menudo y analiza si hay algo nuevo que pueda ayudarte a mejorar tu experiencia programando.

¿Qué configuraciones, fuentes, plugins, temas, o esquemas de color has encontrado que te hagan mejorar tu experiencia cuando programas? Háznoslo saber en los comentarios, y ¡comparte este post con cualquiera que pienses que lo necesita!

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
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.