Plugins de Sublime Text 3

Introdución

Este artigo detalla algúns plugins de Sublime Text 3. Para saber máis sobre a ferramenta pódese acceder o seu artigo.

Plugin Emmet

Este plugin nos ayudará a generar código de forma rápida

Para instalarlo:

• CTRL+ Shift + P y tecleamos install y seleccionamos Package Control: Install Package.
• Escribimos emmet y en los resultados que aparezcan pulsamos en Emmet.
• Una vez instalado creamos un fichero html y podemos probar combinaciones como las siguientes:
  •  ! [TAB] -> Escribe la cabecera de un documento HTML5
  • div>ul>li -> Genera un div que contiene un ul y un li
  • Para más información y ejemplos visitar: http://docs.emmet.io/

Plugin Bootstrap 3 Snippets

Este plugin nos permitirá autocompletar código de Bootstrap:

Para instalarlo:

• CTRL+ Shift + P y tecleamos install y seleccionamos Package Control: Install Package.
• Escribimos bootstrap y en los resultados que aparezcan pulsamos en Bootstrap 3 Snippets.
• Para probar su funcionamiento abrimos un fichero nuevo y probamos a teclear alguna combinación de las disponibles en:

https://github.com/JasonMortonNZ/bs3-sublime-plugin

// Para generar un formulario en bootstrap:
bs3-form + [TAB]

// Para escribir un campo de tipo input text:
bs3-input:text + [TAB]

// Para escribir un campo de tipo input date:
bs3-input:date + [TAB]

// Más ejemplos en: https://github.com/JasonMortonNZ/bs3-sublime-plugin

Plugin BracketHighlighter

Este plugin nos ayudará a localizar más fácilmente la apertura y cierre de etiquetas, funciones, etc..

Para instalarlo:

• CTRL+ Shift + P y tecleamos install y seleccionamos Package Control: Install Package.
• Escribimos bracket y en los resultados que aparezcan pulsamos en BracketHighlighter.
• Una vez instalado abrimos un fichero y probamos en un fichero con código a ver si marca las aperturas y cierres correctamente.
• A veces dependiendo de la combinación de colores podrá destacarlo más o menos.

Plugin ColorPicker

Este plugin nos permitirá seleccionar colores desde el código fuente:

Para instalarlo:

• CTRL+ Shift + P y tecleamos install y seleccionamos Package Control: Install Package.
• Escribimos colorpi y en los resultados que aparezcan pulsamos en ColorPicker.
• Para probar su funcionamiento teclearemos CTRL+Shift+C

Plugin DocBlockr

Este plugin nos permitirá crear documentación sobre el código fuente:

Para instalarlo:

• CTRL+ Shift + P y tecleamos install y seleccionamos Package Control: Install Package.
• Escribimos docbl y en los resultados que aparezcan pulsamos en DocBlockr.
• Para probar su funcionamiento simplemente tendremos que escribir /** y pulsar TAB encima de una función.

Ejemplo:

/**[TAB]
function sumar(a,b)
{
	return a+b;
}

// Y obtendremos algo como:
/**
 * [sumar description]
 * @param  {[type]} a
 * @param  {[type]} b
 * @return {[type]}
 */
function sumar(a,b)
{
	return a+b;
}


// Tendremos que completar la documentación cubriendo cada apartado y pulsando [TAB] para pasar al siguiente.
// Y generaremos un código similar al ejemplo siguiente:
/**
 * Función que devuelve la suma de dos números pasados como parámetro.
 * @param  {number} a
 * @param  {number} b
 * @return {number}
 */
function sumar(a,b)
{
	return a+b;
}

Plugin HTML-CSS-JS Prettify

• CTRL+ Shift + P y tecleamos install y seleccionamos Package Control: Install Package.
• Escribimos html css y en los resultados que aparezcan pulsamos en HTML-CSS-JS Prettify.
• Para probar su funcionamiento simplemente tendremos que hacer click con el botón derecho en el código y seleccionar HTML/CSS/JS Prettify -> Prettify Code

Plugin Typescript para trabajar con Angular2

• CTRL+ Shift + P y tecleamos install y seleccionamos Package Control: Install Package.
• Escribimos TypeScript y en los resultados que aparezcan pulsamos en TypeScript.
• Reiniciamos Sublime y ya podremos ver con colores el código de TypeScript.

• Si queremos configurar el tamaño del tabulador en espacios y alguna que otra opción iremos a:
• Preferences > Settings > Syntax Specific (User) y pegaremos el siguiente código:

{
  "tab_size": 3,
  "translate_tabs_to_spaces": false
}

Plugin Laravel Blade Highlighter

Este plugin nos permitirá poner de diferente color las plantillas Blade de Laravel:

Para instalarlo:

• CTRL+ Shift + P y tecleamos install y seleccionamos Package Control: Install Package.
• Escribimos laravel y en los resultados que aparezcan pulsamos en Laravel Blade Highlighter.

Plugin Laravel Color Scheme en

Este plugin nos permitirá poner de diferente color código generado en Laravel:

Para instalarlo:

• CTRL+ Shift + P y tecleamos install y seleccionamos Package Control: Install Package.
• Escribimos laravel y en los resultados que aparezcan pulsamos en Laravel Color Scheme.

Plugin PHP Getters and Setters

Este plugin nos permitirá crear los getters and setters en PHP a la hora de hacer una clase.:

Para instalarlo:

• CTRL+ Shift + P y tecleamos install y seleccionamos Package Control: Install Package.
• Escribimos PHP Getters y en los resultados que aparezcan pulsamos en PHP Getters and Setters.
• Para probar su funcionamiento simplemente tendremos que pulsar con el botón derecho Getters and Setters en el código PHP dónde tenemos la clase y seleccionar la opción deseada.

Plugin PHPcs

Da soporte a PHP_CodeSniffer ST2. Chequea si el código sigue el stándard. Se puede seleccionar Zend, PEAR,etc.. Para más configuración: http://pear.php.net/package/PHP_CodeSniffer/redirected

Para instalarlo:

• CTRL+ Shift + P y tecleamos install y seleccionamos Package Control: Install Package.
• Escribimos PHP Construc y en los resultados que aparezcan pulsamos en PHPcs.

Plugin PHP Constructors

Este plugin nos permitirá crear los constructores de una clase en PHP.:

Para instalarlo:

• CTRL+ Shift + P y tecleamos install y seleccionamos Package Control: Install Package.
• Escribimos PHP Construc y en los resultados que aparezcan pulsamos en PHP Constructors.
• Para probar su funcionamiento simplemente tendremos que pulsar con el botón derecho PHP Constructor y seleccionar Generate PHP Constructor for Class.

Plugin Pretty JSON

Este plugin nos permitirá validar, formatear y minimizar un JSON:

Para instalarlo:

• CTRL+ Shift + P y tecleamos install y seleccionamos Package Control: Install Package.
• Escribimos pretty y en los resultados que aparezcan pulsamos en Pretty JSON.
• Para configurar la combinación de teclas iremos a Preferences -> Package Settings -> PretyJSON-> Settings - User
• Y añadimos lo siguiente:

{ "keys": [ "ctrl+alt+m" ], "command": "un_pretty_json" }

• Para usarlo seleccionaremos el texto JSON y pulsaremos CTRL+ALT+M
• También podremos validar y formatear. Pulsamos CTRL + Shift + P, tecleamos JSON y veremos las opciones posibles y combinaciones de teclas correspondientes.
• Para formatear usaremos CTRL + Alt + J

Plugin EJS V2

• Para que reconozca las plantillas con extensión .ejs, instalar el plugin EJS 2.
• CTRL+ Shift + P y tecleamos install y seleccionamos Package Control: Install Package.
• Escribimos EJS 2 y en los resultados que aparezcan pulsamos en EJS 2.

Plugin SublimeCodeIntel

Este plugin nos permitirá autocompletar código en diferentes lenguajes:

Para instalarlo:

• CTRL+ Shift + P y tecleamos install y seleccionamos Package Control: Install Package.
• Escribimos codeIntel y en los resultados que aparezcan pulsamos en SublimeCodeIntel.
• Para probar su funcionamiento simplemente tendremos que escribir código de algún lenguaje y esperar a que nos muestre las opciones de autocompletado.

Más información sobre el plugin SublimeCodeIntel

Teclas rápidas con el plugin SublimeCodeIntel:

• ALT+Click (en una variable, nos lleva a la sección del código dónde se creó dicha variable.
• Shift+Control+Espacio (para mostrar las opciones de autocompletado para un texto determinado).

Para PHP tendremos que activar la opción de autocompletado en:

• Abrimos el siguiente fichero: Preferences -> Package Settings -> SublimeCodeIntel -> Settings - Default
• Copiamos todo su contenido.
• Lo pegamos en el siguiente fichero: Preferences -> Package Settings -> SublimeCodeIntel -> Settings - User
• Modificamos esta línea para que quede así, 'añadiendo PHP en la última posición:

 "codeintel_selected_catalogs": [
        "PHP", "jQuery", "HTML5"
    ],

• Grabamos el archivo con nuestros ajustes y reiniciamos Sublime.

Plugin SublimeLinter

Chequea constantemente si nos hemos olvidado de llaves, punto y coma, etc..

Para instalarlo:

• CTRL+ Shift + P y tecleamos install y seleccionamos Package Control: Install Package.
• Escribimos Sublime Linter y en los resultados que aparezcan pulsamos en Sublimelinter.

Hay que instalar módulos adicionales para cada lenguaje:

Plugin Terminal

• CTRL+ Shift + P y tecleamos install y seleccionamos Package Control: Install Package.
• Escribimos terminal y en los resultados que aparezcan pulsamos en Terminal.
• Para probar su funcionamiento simplemente tendremos que hacer click con el botón derecho en alguna carpeta y seleccionar Open Terminal Here...

Plugin TrailingSpaces

Se encarga de eliminar los espacios al final que tengamos en el código.

• CTRL+ Shift + P y tecleamos install y seleccionamos Package Control: Install Package.
• Escribimos terminal y en los resultados que aparezcan pulsamos en TrailingSpaces.
• Le asignaremos una combinación de teclas en Preferences -> Key Bindings -> User (delete_trailing_spaces):

[{
    "keys": ["shift+f6"],
    "command": "side_bar_open_in_browser",
    "args": {
        "paths": [],
        "type": "production",
        "browser": ""
    }
}, {
    "keys": ["ctrl+shift+r"],
    "command": "reindent",
    "args": {
        "single_line": false
    }
}, {
  	"keys": ["ctrl+shift+s"],
	"command": "delete_trailing_spaces"
}
]

• Para probar su funcionamiento simplemente tendremos que pulsar CTRL+Shift+S y se eliminarán automáticamente todos esos espacios al final.

Referencias

• Sublime Text
• Sublime Text
• Tutorial sobre editor Sublime Text 3 - IES San Clemente