Instalar plugins en Sublime Text
Sublime Text 2 es un editor ligero para desarrollar software, al principio deja muy buena impresión el editor.
Para este “how to” mostrara como instalar paquetes manuales. Esto resulto muy interesante si se es un desarrollador web donde trabajar codigo y hojas de estilos hara imprescindible el uso de un plugin para trabajar de una manera más rapida y precisa.
Package Control
Se trata, básicamente, del padre de todos los plugins, desde él podremos gestionar la instalación, desinstalación, edición y muchas cosas más del resto de plugins, de forma rápida y, sobre todo, muy intuitiva.
Por eso mismo, es el más complicado de instalar, puesto que el resto se hacen a través de él, pero este debemos hacerlo con la consola que incluye Sublime Text. Basta con aplicar los siguientes pasos:
Accede a la
página de instalación del plugin
.Escoge la versión del programa que tengas instalada y copia el código que aparece debajo.
Abre la consola de Sublime Text desde
View
->
Show console
, que se encuentra en la barra superior de menú.
Pega el código que acabas de copiar en la consola y pulsa enter.A continuación, reinicia Sublime Text (cerrar y abrir el programa) y tendrás el gestor de paquetes instalado.
¿Cómo utilizar este gestor de paquetes?
Antes de continuar, vamos a ver como funciona Package Manager, y luego siempre habrá que hacer lo mismo en el resto de plugins, todos se instalan de forma idéntica. Si queremos gestionar nuestros plugins solo tendremos que realizar los siguientes pasos:
Pulsar Ctrl + May + P para mostrar el desplegable de Package Manager.Escribir en ese desplegable la opción que queramos realizar, a escoger entre las siguientes:
Install package (Instalar)
Remove package (Desinstalar)
List package (Listar)
Enable package (Habilitar)
Disable package (Deshabilitar)
Posteriormente, pulsamos enter y nos permitirá introducir texto nuevamente.
Ahora es cuando debemos escribir el nombre del
plugin
, seleccionarlo y el gestor de paquetes hará la tarea que hayamos solicitado.Es conveniente reiniciar Sublime Text tras instalar cualquier
plugin
, pues aunque algunos no lo necesitan, dara mayor seguridad la carga de su instalación.
A continuación se mencionan los principales plugins, y en lo posterior listare los plugins que tengo por default para le desarrollo web.
Emmet
Se trata de un plugin que nos hará olvidar la sintaxis HTML para siempre, puesto que, con unas pocas palabras, podremos escribir complejas estructuras que, antes, nos hubieran llevado algo más de tiempo. Es cierto que al principio puede ser algo complejo, por el hecho de tener que aprender una nueva sintaxis, pero con un poco de práctica sale sola, pues es bastante simple.
Por ejemplo, si queremos crear la estructura básica completa de un documento HTML 5, bastará con escribir html:5 y pulsar tabulador.
Sidebar Enhancements
Otra de las maravillas que hacen que Sublime Text mejore notablemente. En esta ocasión se trata de una implementeación al sidebar del programa, que de normal es quizás demasiado básico. Gracias a este plugin podremos tener todas las opciones que un gestor de archivos necesita, y en un solo lugar, junto a nuestro código.
Sublime Linter
Este plugin recuerda mucho a los grandes IDE, pues su función es realizar tu código en tiempo real, detectando posibles errores y advirtiéndote de los mismos, para que puedas solucionarlos antes de probarlo en vivo. Funciona con varios lenguajes, entre otros PHP, Python, Java…
Es cierto que aún no detecta todos los errores al momento, pero si los más cometidos, como son dejarte algún paréntesis/llave abiertos, olvidarse algún fin de sentencia…y todos esos errores que pueden llegar a ser un quebradero de cabeza para el desarrollador en cuestión.
Search Stack Overflow
La idea es bastante sencilla, seleccionas el texto que deseas buscar en el foro y pulsas botón derecho, a continuación, Stack overflow Search. También podemos hacerlo de otra forma, pulsando Ctrl+May+P, y escribiendo search. Podremos elegir entre dos opciones, search input o search selection. La primera nos permitirá escribir lo que deseamos buscar, la segunda utilizará el texto que tengamos seleccionado.
Bracket Highlighter
Aunque es un plugin muy sencillo, es también muy útil. Por muy escrupulosos que seamos siempre podemos tener problemas al saber donde empieza o acaba alguna función, donde abre o cierra cierta llave en nuestro código. Para ayudarnos en esta compleja tarea llega este plugin que se encarga de resaltar todas estas marcas para que sepamos donde abre y cierra cada una.
Muestro a continuación los plugins instalados que tengo.
Alignment
AutoFileName
BracketHighLighter
Can I Use
Codekit
Color HighLighter
ColorPicker
DocBlockr
Emmet
FileDiffs
GitGutter
HTML-CSS-JS-Prettify
HTML5
HTML Beautyfy
Jade
jQuery
JsFormat
Package Control
PvV8
SublimeCodeIntel
Sublime Linter
Sublimerge Pro
Otros Plugins utiles
Sublime Lint
Verifica la sintáxis PHP en nuestros archivos mostrando en tiempo real los errores.
Sublime Codintel
Proporciona auto-completado de código y salto rápido a las definiciones de funciones.
Advanced New File
Este paquete hace posible crear nuevos ficheros increíblemente rápido. En lugar de explorar carpetas y utilizar miles de menús, simplemente tienes que abrir un prompt con super+alt+n y escribe la ruta de donde quieras localizar tu nuevo archivo. El plugin también creará cualquier directorio de la ruta indicada antes en el caso de no existir, e incluso autocompleta los nombres de los directorios a la hora de proporcionar la ruta.
Git
Una integración Git que funciona directamente desde la zona de comandos de Sublime Text. El plugin proporciona acceso rápido a una serie de comandos Git que se suelen utilizar bastante, permitiendo a los desarrolladores añadir archivos, realizar commits o abrir logs de Git, sin salir nunca de Sublime.
GitGutter
Extensión muy práctica que marca cada línea de tu código fuente, indicándote su estado de Git y dándole una visión general de los cambios que se han producido en ella. GitGutter se puede utilizar para comparar tus archivos con el git head, origin, un branch de tu elección, e incluso con ciertos commits.
Side Bar Enhancements
En Sublime Text, el proyecto en el que estás trabajando se muestra en el panel de la izquierda. Aunque ofrece ciertas opciones para trabajar con tus archivos, las acciones por defecto disponibles son bastante limitadas. Este plugin te agrega más de 20 opciones al menú contextual del botón derecho del ratón, incluyendo la opción de abrir en el navegador, duplicar y demás cosas útiles.
Colorpicker
Un selector de color muy simple y fácil de utilizar que es excelente para capturar rápidamente el valor hexadecimal de un color. El plugin se abre en una ventana aparte y te permite elegir un color de una paleta o utilizar el cuentagotas para extraer el color desde cualquier lugar de la pantalla.
Placeholders
Sublime Text 3 cuenta con un generador de Lorem Ipsum integrado que puedes utilizar para poner texto de ejemplo. El plugin Placeholders extiende dicha funcionalidad y permite generar contenido de ejemplo para imágenes, formularios, listas y tablas.
DocBlockr
Esto es una extensión para aquellos a los que les gusta documentar detalladamente sus funciones. DocBlockr te permite generar descripciones para tus funciones incluyendo los parámetros que contiene, lo que devuelve y los tipos de variable.
SFTP
Este plugin permite la conexión con el servidor FTP, así editar los archivos fuentes que están cargado en nuestro servidor. Para realizar la conexión se debe agregar el archivo JSON en nuestro proyecto y configurarlo los datos de la conexión.
PHPCS
PHP Code Sniffer (PHPCS) es un plugin indispensable que sin duda alguna debes tener funcionando con tu instalación de Sublime Text si trabajas con PHP. PHPCS te permite conocer los errores de sintaxis que tienes dentro de tus archivos de PHP, de tal forma que puedas corregirlos durante el desarrollo de una forma muy conveniente, manteniendo así un código muy limpio y verdaderamente profesional.
Existen algunos otros editores mas completos como PHPStorm que ofrecen muchas de estas funcionalidades sin necesidad de configuraciones adicionales o instalación de programas de terceros, pero muchos prefieren la simplicidad que ofrecen otras alternativas como Sublime Text, personalmente es mi caso.
Cuando te inicias como programador profesional, no puedes poner en duda tu trabajo, cometiendo errores simples como espacios en blanco, código mal indentado o algo por el estilo. Bien, si usas Sublime Text y sigues este tutorial te garantizo que no vas a volver a cometer este tipo de errores.
Instalación de PHPCS
La instalación puede realizarse desde el administrador de paquetes de sublime en menú > preferences > package-control y posteriormente buscando la opción “Install Package”.
Una vez allí busca el paquete llamado PHPCS, presionas “enter” y esperas a que termine la instalación.
Configuración de PHPCS
Lo primero que debes hacer es descargar los siguientes ejecutables que son requeridos por el plugin para su funcionamiento
PHP Code Sniffer: http://pear.php.net/package/PHP_CodeSniffer/redirected
PHP Mess Detector: http://phpmd.org/
PHP CS Fixer: https://github.com/FriendsOfPHP/PHP-CS-Fixer
PHP Code Beautifier: https://pear.php.net/package/PHP_Beautifier
Una vez descargados los almacenas en cualquier lugar dentro de tu equipo local. PHPCS hace uso de estos binarios para comprobar la sintaxis del código de los archivos de tu proyecto y así poder marcar o resaltar los errores que puedan tener.
Ingresa desde Sublime Text a menú > preferences > package settings > PHP Code Sniffer y vas a ver 2 opciones “Settings – Default” y “Settings -User”. Abre primero el archivo “Settings – Default” copia el contenido del archivo y posteriormente abre el archivo “Settings – User” y pega este contenido, guarda el archivo y de esta forma ya podrás cambiar la configuración por defecto y agregar tu configuración personalizada.
Los cambios mas importantes a realizar es agregar la dirección a cada ejecutable para que el plugin pueda funcionar. Toma en cuenta que en este caso estoy usando Windows por ello se utilizan los separadores “\\”, en Ubuntu o MAC debes usar “/”.
"phpcs_php_prefix_path": "C:\\xampp\\php\\php.exe", "phpcs_executable_path": "C:\\xampp\\php\\phpcs.bat", "php_cs_fixer_executable_path": "C:\\xampp\\php\\php-cs-fixer.phar", "phpcbf_executable_path": "C:\\xampp\\php\\phpcbf.bat", "phpcs_php_path": "C:\\xampp\\php\\php.exe", "phpmd_executable_path": "C:\\xampp\\php\\phpmd.phar", 123456 "phpcs_php_prefix_path": "C:\\xampp\\php\\php.exe","phpcs_executable_path": "C:\\xampp\\php\\phpcs.bat","php_cs_fixer_executable_path": "C:\\xampp\\php\\php-cs-fixer.phar","phpcbf_executable_path": "C:\\xampp\\php\\phpcbf.bat","phpcs_php_path": "C:\\xampp\\php\\php.exe","phpmd_executable_path": "C:\\xampp\\php\\phpmd.phar",
En mi caso tengo una instalación de xampp donde ya se encuentran algunos de estos binarios así como el ejecutable de PHP.
Puedes agregar configuraciones adicionales a cada ejecutable como por ejemplo
// Que tipo de archivos deseas incluir para su revisión. "extensions_to_execute": ["php"], // Extensiones a excluir de la revisión como por ejemplo ["twig.php"] "extensions_to_blacklist": [], // Deseas que se ejecute al guardar el archivo de forma automática ? "phpcs_execute_on_save": true, // Deseas ver la lista de errores una vez guardado el archivo ? "phpcs_show_errors_on_save": true, // Deseas resaltar los errores ? "phpcs_show_gutter_marks": true, // Deseas ver la lista de errores ? "phpcs_outline_for_errors": true, // Quieres ver los errores en la barra de status ? "phpcs_show_errors_in_status": true, // Quieres ver los errores en el panel de acceso rápido con atajos ? "phpcs_show_quick_panel": true, 1234567891011121314151617181920212223 // Que tipo de archivos deseas incluir para su revisión. "extensions_to_execute": ["php"], // Extensiones a excluir de la revisión como por ejemplo ["twig.php"] "extensions_to_blacklist": [], // Deseas que se ejecute al guardar el archivo de forma automática ? "phpcs_execute_on_save": true, // Deseas ver la lista de errores una vez guardado el archivo ? "phpcs_show_errors_on_save": true, // Deseas resaltar los errores ? "phpcs_show_gutter_marks": true, // Deseas ver la lista de errores ? "phpcs_outline_for_errors": true, // Quieres ver los errores en la barra de status ? "phpcs_show_errors_in_status": true, // Quieres ver los errores en el panel de acceso rápido con atajos ? "phpcs_show_quick_panel": true,
Este es un ejemplo de como funciona el plugin
Seti UI
Es un tema para mejorar la interfaz de la lista de los archivos , asocia icono a cada archivo, por defecto sublime tex3 tiene un tema que casi es aburrido. se debe pegar el siguiente código en –>Preferences ->Settings-User:
{ "caret_extra_bottom": 3, "caret_extra_top": 3, "caret_extra_width": 2, "font_size": 10, "highlight_line": true, "ignored_packages": [ "Vintage" ], "overlay_scroll_bars": "enabled", "theme": "Seti.sublime-theme"}
Dos Repositorios de Plugns Manual
https://github.com/titoBouzout/SideBarEnhancements
https://github.com/mrmartineau/SetiUI-Icons-Sublime
https://github.com/lunixbochs/sublimelint
https://github.com/Kronuz/SublimeCodeIntel
Problemas con los Plugins
En ciertas ocaciones y entre mas plugins sean instalados, es posible que existan más errores al momento de cargarse enviando una alerta como:
“A plugin (name_plugin) may be making Sublime Text unresponsive by taking too long (1.020662s) in its on_load callback.
This message can be disabled via the detect_slow_plugins global setting”
¿Donde se localiza esa configuración?
Preferences > Settings - User
Agregando lo siguiente:
"detect_slow_plugins": false
Referencias:
https://packagecontrol.io/installation
