#PackageControl | Explore Tumblr posts and blogs

klvst3r · 8 years ago

Text

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

#Sublime #Plugins #PackageControl

0 notes

melodramatic--blog · 5 years ago

Text

Getting Started with SublimeText

vimeo

In this video Alan and Miquel get you started with their personal favourite code editor, SublimeText! https://ift.tt/WHJ6my

Grab a coffee and sit down with us as we go through some of its great features. 🙂

————–

NOTES:

Package Control can be installed from here: https://ift.tt/HkWHea

To install a Sublime “package” with PackageControl: 1. Ctrl+Shift+P 2. Start typing “pack inst”, and from the list choose “Package Control: Install Package”. 3. Wait a moment and it will list non-installed packages. Select the one you want, press Enter and wait a few seconds. (Press Esc or click away to cancel.)

————————————————————————-

Alan’s favorite packages in alphabetic order: [links provided to read more but you should install them from PackageControl.]

– ALIGNMENT: https://ift.tt/niTmWy Aligns your text so your multi-cursors form a straight line. Good if you have alignment OCD.

– BRACKETHIGHLIGHTER: https://ift.tt/xfyudu Highlights brackets while you’re typing between them. Super useful!

– CHANGEQUOTES: https://ift.tt/z2jxc4 Easy, quick way to change single quotes to double quotes and vice-versa.

– CODE FOO: https://ift.tt/33INdXq Type a question, highlight it, Ctrl+Alt+R and it will search Stackoverflow, take the first match, find the best rated response’s code snippet and paste that back into where you typed the question. Pure magic!! :p

– FILEDIFFS: https://ift.tt/1fDQOaK Fantastic diff’ing tools, all accessible from the rightclick menu and command panel. (Ctrl+Shift+P)

– FILESYSTEM AUTOCOMPLETION: https://ift.tt/ROR0rp If you’re typing text to a real path and press Tab, it will autocomplete it. Handy sometimes.

– GIT: https://ift.tt/pf9y0s There are many git packages; this one works for me. You may need to install Git beforehand.

– GITGUTTER: https://ift.tt/ZstCay Shows markers to show changes against the git HEAD state, in realtime! Best invention since sliced bread. I love this thing.

– INDENT XML: https://ift.tt/2dPZY8V Indents XML nicely, so us humans can read it better.

– PRETTY JSON: https://ift.tt/1gvAxnW Indents JSON nicely. Accessible from command panel. (Ctrl+Shift+P)

– SNAKE: https://ift.tt/1csdAyT Teach your code a lesson by playing a round of Snake all over it. (Don’t worry, your actual code won’t be ruined.)

– SUBLIME-TWEET: https://ift.tt/wVHm4c Twitter from Sublime.

– SUBLIMELINTER: https://ift.tt/UR7vX2 Nice self-contained “linter”, to point out syntactic errors and style suggestions next to the line numbers.

– SUPER CALCULATOR: https://ift.tt/2x3WQl1 Type some math in your code and type Alt+c to select it and again to calculate it.

– TRAILINGSPACES: https://ift.tt/Yb2uZ9 Highlights and can also delete trailing empty space.

————————————————————————-

*** USEFUL HOTKEYS:

Ctrl + ` = open Sublime’s own Python console Ctrl + Shift + P = command panel Ctrl + G = go to line Ctrl + R = go to function Ctrl + P = go to anything

Ctrl + L = select line Ctrl + Shift + L = expand the selected lines to multiple cursors Ctrl + Shift + D = duplicate line(s) Ctrl + / = comment line(s) Ctrl + D = select next substring Ctrl + Shift + J = select by indentation level

Ctrl + up/down arrow = scroll line up/down Ctrl + K followed by Ctrl + C = center at cursor Ctrl + [ or ] = move tab level in/out

Ctrl + J = join lines Ctrl + K followed by Ctrl + U or L = upper/lower-case selected text Ctrl + K twice = delete from cursor until end of line

F9 = sort selected lines F6 = spell check ON/OFF F11 = fullscreen Shift + F11 = fullscreen “zen” mode

Alt + numbers(1, 2, 3…) = change to specific tab Ctrl + pgUp/Down = go to next/previous tab

————————————————————————- ————————————————————————-

Got any comments or Sublime tips? Let us know! 🙂 Likes: 67 Viewed:

The post Getting Started with SublimeText appeared first on Good Info.

0 notes

whiter4bbitt · 6 years ago

Photo

Just some sampling(testing?l going on. Getting ready to finally have a 'User' whatever that means.. .. Got GraphQL setup currently using AppSync hooked into DynamoDB (testing the #amazon (#aws)) tools. Project being built on Nuxt.js (Vue.js Framework). That's all for now. Just seemed time to throw up a post. I'm just learning how to 'Full Stack' better with this personal project. #develop #developer #vue #vuejs #nuxt #nuxtjs #graphql #appsync #dynamodb #porject #project #web #html #javascript #js #es6 #node #nodejs #expressjs #git #packagecontrol #vscodium #code #vs #vscode #locust https://www.instagram.com/p/ByA8qeYgWLH/?igshid=1jfgjwi6e9wge

0 notes

laravelvuejs · 8 years ago

Photo

Mi duda es… Como prepar SublimeText para Laravel Framework PackageControl: source

#laravel

0 notes

putsomestuffhere · 10 years ago

Text

Sublime Text Package Control installation

https://packagecontrol.io/installation

#sublime #sublimetext #packagecontrol

0 notes

melodramatic--blog · 6 years ago

Text

Getting Started with SublimeText