IronWoods.es

Desarrollo web

Blog / Editores / SublimeText - Plugins fundamentales

Esta entrada contiene un listado de plugins o extensiones al editor, que uso habitualmente, y me parecen fundamentales para mejorar el flujo de trabajo.

PHP


CodeFormatter

Permite adaptar el código de un fichero a estándares automáticamente cuando se guarda y permite formatear ficheros en otros lenguages.

Video sobre su uso


Laravel Blade Highlighter

Resalta la sintaxis de Blade en los templates de Laravel.


PhpCodeGen
Generar código PHP escribiendo "gemas".

Como hay que aprender las combinaciones, sólo es interesante si vamos a escribir mucho PHP.


PHP CS Fixer
Reformatear código PHP adaptándolo a estándares / recomendaciones.

Requiere tener instalado PHP CS Fixer en el sistema (instrucciones detalladas en la documentación de instalación).

Configuración

Tras instalar el plugin, la configuración mínima sería añadir el atajo de teclado necesario para su uso.

Menú: Preferences / Package Settings / PHP CS Fixer / Key Bindings - User

{ "keys": ["ctrl+alt+f"], "command": "sublime_PHP_cs_fix"}

Uso

Para corregir el fichero actual: ctrl + alt + f


phpunitkit
Permite ejecutar test unitarios dentro del editor.


PHP Companion
Ayuda al escribir código PHP, por ejemplo, en la inserción de los namespaces de las clases.

Otros


SublimeCodeIntel
Proporciona las siguientes características:

  • Saltar a la definición de símbolo - Saltar al archivo y a la línea de la definición de un símbolo.
  • Importa autocompletar - Muestra autocompletar con los módulos/símbolos disponibles en tiempo real.
  • Llamada de función de consejos de herramientas - Muestra información en la barra de estado sobre la función de trabajo.

From: Komodo Editor, CodeIntel supports all the languages: ActionScript, Django, Docker, EJS, epMojo, HTML, KomodoSnippet, LaravelBlade, Mason, Mustache, MXML, PHP, R, reStructuredText, RHTML, Smarty, TracWiki,TemplateToolkit, Twig, XBL, XML, XSLT, XUL, Python, Python3, Ruby, Perl, Go, ECMAScript, JavaScript, Node.js, CSS, SCSS, Sass, Less, HTML5, Tcl, C/C++, Objective-C.

Control de versiones


GitGutter
Ayuda a trabajar código versionado bajo Git, con indicaciones visuales en los ficheros abiertos y acceso a los cambios efectuados, entre otras funciones.

Generales


PackageControl
Plugin para el manejo de paquetes: instalar, listar, eliminar, etc. En el sitio web de esta utilidad se pueden buscar los paquetes disponibles para el editor.


DocBlockr
Ayuda a escribir comentarios en el código, creando bloques automáticamente.

HTML / CSS


LiveReload
Recarga automática de la ventana del navegador cuando se guardan cambios en el fichero.


Color Highlighter
Subraya con el color real el tag de color hexadecimal en los estilos CSS.

Varias configuraciones posibles como: subrayado en color, color de fondo, bloque de color debajo, al lado, etc., a seleccionar en: Tools / Color Highlighter


ColorPicker
Abre un selector de color para poder obtener un código de color hexadecimal para un selector CSS.

Uso: ctrl+shift+c (Linux & Windows) y cmd+shift+c (OS X).


Emmet
Plugin fundamental al escribir HTML / CSS. Permite crear código a partir de combinaciones escritas.


Ejemplos (editando un fichero .html)

  • Crear la estructura de un documento HTML5: html:5 + tab
  • Crear cinco bloques div uno debajo de otro: div*5 + tab
  • Crear un bloque de tipo párrafo: p + tab
  • Crear un bloque de tipo párrafo, con la clase "test": p.test + tab
  • Crear un bloque de tipo párrafo, con la clase "test" y el id: "alfa": p.test#alfa + tab

Para consultar combinaciones: Emmet cheat sheet.


HighlightWords
Plugin para el resaltar palabras concretas, por ejemplo, las conocidas como TODO words.

Configuración

Ir a Preferences / Package Settings / HighlightWords para añadir las palabras que se quieran resaltar. La configuración de colores es algo engorrosa, tenemos disponibles los siguientes:

keywords y colores en la configuración de HighlightWords
Lista de palabras con los colores disponibles

NOTA: el color de "XXX" es el que toman las palabras incluidas cuando se define un color no aceptado por el plugin, en este caso red. Sería lo mismo si indicáramos un código de color.

Notas

Sobre PHP CS Fixer. Yo uso la herramienta instalada fuera del editor para la corrección de proyectos completos. Como plugin es más interesante CodeFormatter, que corrige el fichero durante el guardado, y permite mejorar el formato en ficheros de otros lenguages.

Plugins compatibles con SublimeText3.

Actualización del post anterior: Plugins fundamentales de Sublime Text


24-08-2018

Entradas relacionadas:

Sitio libre de scripts. Solo efectos HTML / CSS