Joselv: /* Plugin Emmet */

2023-02-10T09:30:09Z

Plugin Emmet

Joselv en 18:46 25 ago 2022

2022-08-25T18:46:03Z

Joselv: Página creada con « = Plugin Emmet = Este plugin nos ayudará a '''generar código de forma rápida''' Para instalarlo: * '''CTRL+ Shift + P''' y tecleamos '''install''' y seleccionamos '''…»

2022-08-25T18:43:54Z

Página creada con « = Plugin Emmet = Este plugin nos ayudará a '''generar código de forma rápida''' Para instalarlo: * '''CTRL+ Shift + P''' y tecleamos '''install''' y seleccionamos '''…»

Página nueva

= 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

<source lang="javascript">
// 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

</source>

= 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:

<source lang="javascript">
/**[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;
}
</source>

= 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:

<source lang="javascript">
{
"tab_size": 3,
"translate_tabs_to_spaces": false
}
</source>

= 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:
<source lang="javascript">
{ "keys": [ "ctrl+alt+m" ], "command": "un_pretty_json" }
</source>
* 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.

[http://sublimecodeintel.github.io/SublimeCodeIntel/ 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'':
<source lang="javascript">
"codeintel_selected_catalogs": [
"PHP", "jQuery", "HTML5"
],
</source>
* '''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:
== SublimeLinter-php ==

== SublimeLinter-jshint ==

== SublimeLinter-json ==

== SublimeLinter-csslint ==

= 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):

<source lang="bash">
[{
"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"
}
]
</source>
* Para probar su funcionamiento simplemente tendremos que pulsar CTRL+Shift+S y se eliminarán automáticamente todos esos espacios al final.

@@ Línea 9: / Línea 9: @@
 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'''.
+* 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

@@ Línea 1: / Línea 1: @@
 = Plugin Emmet =
@@ Línea 265: / Línea 268: @@
 </source>
 * Para probar su funcionamiento simplemente tendremos que pulsar CTRL+Shift+S y se eliminarán automáticamente todos esos espacios al final.

Plugins de Sublime Text 3 - Historial de revisiones

Joselv: /* Plugin Emmet */

Joselv en 18:46 25 ago 2022

Joselv: Página creada con « = Plugin Emmet = Este plugin nos ayudará a '''generar código de forma rápida''' Para instalarlo: * '''CTRL+ Shift + P''' y tecleamos '''install''' y seleccionamos '''…»