Tutorial sobre sublim text 3 editor | Beseit i una mica de xirigol

Show Open Files ->1.4

Aquest tutorial és una traducció de Tutorial sobre editor Sublime Text 3 que a mi m’ha resultat molt útil als meus petits treballs personal en html, JS, CSS i PHP els havia fet primer amb el llegendari FrontPage de Microsoft i més tard amb AptanaStudio. Tots dos han mort així que me hagut d’espavilar i he descobert Sublime Text 3, que té molt bona pinta. Espero que aquesta traducció al català pugui ser útil a algú.

Sumari

o 1 Editor sublime Text 3 (ST3)

o 1.1 Instal·lació de Sublim Text 3

o 1.2 Combinacions de tecles i funcions bàsiques en Sublim Text 3

o 1.3 Configuració de l’ instal.lador de paquets en Sublim Text 3

o 1.4 Configuració de client FTP en Sublime Text 3

o 1.5 Instal·lació de plugin SideBarEnhancements en Sublime Text 3

o 1.6 Configuració predeterminada del navegador en sublim text 3

o 1.7 Configuració de combinació de tecles per obrir navegador en Sublim Text 3

o 1.8 Reindentar codi amb CodeFormatter en Sublime Text 3

o 1.9 Comentar/descomentar codi en Sublime Text 3

o 1.10 Auto ajust de línies llargues (wrap) en Sublime Text 3

o 1.11 Connector Emmet en sublim text 3

o 1.12 Connector Bootstrap 3 Fragments en Sublime Text 3

o 1.13 Connector BracketHighlighter en sublim text 3

o Connector ColorPicker 1.14 en text sublim 3

o 1.15 Connector DocBlockr en text sublim 3

o 1.16 Plugin HTML-CSS-JS Prettify en Sublime Text 3

o 1.17 Plugin Typescript per treballar amb Angular2 a Sublime Text 3

o 1.18 Plugin Laravel Blade Highlighter en Sublime Text 3

o 1.19 Plugin Laravel Color Scheme en Sublime Text 3

o 1.20 Plugin PHP Getters and Setters en Sublime Text 3

o Connector 1.21 PHPcs en text sublim 3

o 1.22 Plugin PHP Constructors en Sublime Text 3

o 1.23 Plugin Pretty JSON en Sublime Text 3

o 1.24 Connector EJS V2 Sublim text 3

o 1.25 SublimeCodeIntel Plugin en text sublim 3

o 1.26 Connector SublimeLinter Sublime Text 3

 1.26.1 SublimeLinter-php

 1.26.2 SublimeLinter-jshint

 1.26.3 SublimeLinter-json

 1.26.4 SublimeLinter-csslint

o Connector de terminal 1.27 en sublim text 3

o Connector 1.28 Espais finals en text sublim 3

o 1.29 Combinació de tecles per gravar tots els arxius a Sublime Text 3

o 1.30 Creació d’ un snippet en Sublime Text 3

o 1.31 Configuració de Git en Sublime Text 3

o 1.32 Configuració de Sublim Text 3 per seguir els estàndards PSR-2

1 Editor Sublime Text 3 (ST3)

Sublim 3 és un editor de codi molt ràpid i sofisticat que ens permetrà executar un munt de tasques de forma molt ràpida i senzilla. Suport molts llenguatges de programació i disposa d’un sistema d’instal·lació de paquets que amplien les seves característiques de forma il·limitada.

Pàgina Oficial: http://www.sublimetext.com
Documentació Oficial: http://www.sublimetext.com/docs/3/

1.1 Instal·lació de Sublim Text 3

Per Instal·lar Sublime 3 haurem d’anar a la pàgina http://www.sublimetext.com
Descarregarem el paquet d’instal·lació per a la nostra versió de sistema operatiu (actualment Sublime Text està en versió Beta) http://www.sublimetext.com/3
Disposem de versions per a OSX, Windows(32 i 64 bits) i Ubuntu (32 i 64 bits).
Seguim els passos indicats en la instal·lació.

1.2 Combinacions de tecles i funcions bàsiques en Sublim Text 3

Selecció múltiple

Polsant Ctrl + D, seleccionem la pròxima ocurrència de la paraula/string que tenim seleccionada.
Polsant Ctrl + L, seleccionem la pròxima línia.
Polsant Ctrl i utilitzant el ratolí, podem seleccionar el que volem.

Línia de Comandos

Polsant Ctrl + Shift + P podem obrir la línia de comandos, des de la qual podem fer de tot.. des d’inserir snippets.. canviar configuracions a canviar de llenguatge.

Moverns pel codi

Polsant Ctrl + P, podem navegar pel source de l’arxiu obert, per altres arxius i etc..
Polsant Ctrl + R, pots trobar els metodos/funcions del teu document.
Si polsem Ctrl + G, i escrivim un número, ens portarà a la línia amb aquest número.
Si al polsar Ctrl + P escrivim #, ens mostrarà totes les etiquetes d’un document HTML.

Múltiples cursors

Polsant Ctrl i fent click sobre les línies, podem inserir múltiples cursors i canviar o afegir contingut alhora.

Mode anti-distracció

Per entrar en el mode anti-distracció, pots polsar Shift + F11. Això centrarà el codi i el posarà a “Full Screen”.

Per a més informació visitar les següents URL amb exemples de ST3:

1.4 Configuració de l’instal·lador de paquets en Sublime Text 3

Una vegada instal·lat Sublime Text 3 anem a configurar el sistema que ens permetrà instal·lar components addicionals. Aquest sistema és el package control.

Per instal·lar el package control farem el següent:

Obrim Sublime Text i veurem el següent aspecte:

Activem que es mostri la barra lateral en el menú View -> Side Bar -> Show Side Bar.
Si no s’activa el Side Bar polsar en l’opció View -> Side Bar ->Show Open Files .

Mostrarem la consola amb View -> Console.
Anirem a la següent pàgina: https://sublime.wbond.net/
Polsarem en l’opció Install Now >
Seleccionem el text indicat per a la nostra versió i el copiam.
Anem a la consola de Sublime Text i ho enganxem.

Polsarem Enter i esperarem que el sistema actualitzi els repositoris.
Per accedir al package control anirem a Tools -> Command Palette (CTRL + Shift + P) i un cop allà teclejarem package i seleccionem Package Control: Install Package

Un cop al package manager podrem buscar a la llista el plugin que volem instal·lar.

Configuració de client FTP en Sublime Text 3

A Sublime Text podem configurar un client FTP que ens permetrà enviar els nostres fitxers al servidor de forma automàtica cada vegada que gravem el fitxer.

Per a això obrirem el Package Control amb CTRL + Shift + P , teclejarem package i seleccionem Package Control: Install Package
Tecleamos SFTP i el seleccionem:

Una vegada instal·lat configurarem el plugin de la següent forma:
En la vista lateral click amb el botó dret en la carpeta principal en la qual volem configurar el nostre FTP automàtic i seleccionarem l’opció SFTP/FTP: Map to Remote…

Configurarem les següents opcions segons els nostres paràmetres:

1.5 Instal·lació de plugin SideBarEnhancements a Sublime Text 3

Si volem provar les nostres pàgines en un navegador per defecte i en una URL determinada farem el següent:

Haurem d’instal·lar-nos primer el plugin: SideBarEnhancements.
Per a això polsarem CTRL + Shift + P teclearem install i seleccionem Package Control: Install Package
Tecleamos SideBarEnhancements
Un cop instal·lat el plugin al SideBar quan posem amb el botó dret ens apareixeran més opcions de gestió de fitxers addicionals.

A continuació haurem de configurar la URL on volem que s’obrin les nostres pàgines de prova.
Farem click amb el botó dret del ratolí a la carpeta principal equivalent a l’arrel al nostre servidor web i seleccionarem Project -> Edit Preview URLs

Editarem el fitxer amb les rutes on es troben els nostres fitxers locals (a la nostra carpeta personal L: (fixar-se que la ruta acaba amb /)

En polsar la tecla F12 s’ obrirà el servidor de Testing.
En polsar la tecla ALt+F12 s’obrirà el servidor de Producció.

Exemple de codi de SideBarEnhancements.json:

{

“E:/xampp/htdocs/web/_dev/www.veiga.local/”: {

“url_testing”:”http://localhost/web/www.veiga.local/”,

“url_production”:”http://localhost/web/www.veiga.local/”

“E:/xampp/htdocs/dominio.local”: {

“url_testing”:”http://www.dominio.local/”,

“url_production”:”http://www.dominio.local/”

}

Si dóna error en la ruta posant la lletra de la unitat,

Substituir per la ruta de la connexion Per exemple: //gaiasa/dawMP/webservidor/www.veiga.local

Gravarem el fitxer amb CTRL + S.

1.6 Configuració per defecte del navegador a Sublime Text 3

Iremos a Preferències -> Configuració del paquet -> Barra lateral -> Configuració Usuari

Ejemplo de código de SideBar.sublime-settings.json a incluir en Preferences -> Package Settings -> Side Bar -> Settings User:

{

“default_browser”: “”,

“portable_browser”: “Fitxers C:/Programa (x86)/Google/Chrome/Application/chrome.exe”

}

{
“default_browser”: “”,
“portable_browser”: “C:/Program Files/Mozilla Firefox/firefox.exe”
}

1.7 Configuració de combinació de tecles per obrir navegador a Sublime Text 3

Iremos a Preferències -> Vinculacions de tecles – Usuari
El codi per al fitxer anterior es pot copiar de Preferences -> Package Settings -> Side Bar -> Key Bindings – Default

Exemple de codi de Default( windows).sublime-keymap.json:

[

{ “tecles”: [“shift+f6”],

“comandament”: “side_bar_open_in_browser” ,

“args”:{“paths”:[], “type”:”production”, “browser”:””}

}

]

S’ ha configurat perquè obri amb la mateixa combinació de tecles que NetBeans Shift + F6.

1.8 Reindentar codi amb CodeFormatter en Sublime Text 3

Una forma de reindentar el codi és la següent:

Seleccionar tot el codi amb CTRL + A
Ir a Edita -> Línia -> Torna adentar
També podem crear una combinació de tecles:

{ “tecles”: [“ctrl+shift+r”],

“ordre”: “reindent” ,

“args”: { “single_line”: false }

}

Una altra forma és usar un paquet addicional. En aquest cas instal·larem el paquet CodeFormatter:
Polsar Ctrl+Mayusculas+P i teclejar install per instal·lar el paquet: CodeFormatter
Una vegada instal·lat, podrem configurar totes les seves opcions a Preferences -> Package Settings -> CodeFormatte -> Settings – Default:
Aquí es mostra un exemple de configuració:

{

“codeformatter_debug”: fals,

“codeformatter_go_options”: {

“sintaxis”: “anar”,

“format_on_save”: cert // Format en desar. Ja sigui un booleà (true/false) o una cadena regexp provada en el nom del fitxer. Exemple : “^((?!. min.| venedor).) *$”

Suport sense opcions

“codeformatter_php_options”: {

“sintaxis”: “php”, // Noms de sintaxi que han de processar el formatador PHP

“php_path”: “”, // Camí per a PHP executable, per exemple, “/usr/lib/php” o “C:/Program Files/PHP/php/php.exe”. Si està buit, utilitza l’ordre “php” des d’entorns del sistema

“format_on_save”: cert, // Format en desar. Ja sigui un booleà (true/false) o una cadena regexp provada en el nom del fitxer. Exemple : “^((?!. min.| venedor).) *$”

“php55_compat”: mode fals, // PHP 5.5

“psr1”: fals, // Activa l’estil PSR1

“psr1_naming”: fals, // Activa l’estil PSR1 – Secció 3 i 4.3 – Cas de noms de classe i mètode

“psr2”: cert, // Activa l’estil PSR2

“indent_with_space”: 4, // Utilitza espais en lloc de pestanyes per al sagnat

“enable_auto_align”: cert, // Habilita l’alineació automàtica de = i =>

“visibility_order”: cert, // Corregeix l’ordre de visibilitat del mètode a les classes – PSR-2 4.2

“smart_linebreak_after_curly”: cert, // Converteix blocs multiestatals en blocs multilíners

Habilita les transformacions específiques. Exemple: [“ConvertOpenTagWithEcho”, “PrettyPrintDocBlocks”]

Podeu llistar totes les transformacions disponibles des de la paleta d’ordres: CodeFormatter: Mostra les transformacions php

“passa”: [],

Inhabilita les transformacions específiques

“exclou”: []

“codeformatter_js_options”: {

“sintaxis”: “javascript,json”, // Noms de sintaxi que han de processar el formatador JS

“format_on_save”: cert, // Format en desar. Ja sigui un booleà (true/false) o una cadena regexp provada en el nom del fitxer. Exemple : “^((?!. min.| venedor).) *$”

“indent_size”: 4, // mida del sagnat

“indent_char”: ” “, // Caràcter sagnat

“indent_with_tabs”: false, // Sagna amb una pestanya (substitueix les opcions indent_size i indent_char)

“eol”: “\n”, // Símbol EOL

“preserve_newlines”: cert, // si s’han de preservar els salts de línia existents,

“max_preserve_newlines”: 3, // nombre màxim de salts de línia a preservar en un fragment

“space_in_paren”: fals, // Afegiu espais de farciment dins del paren, és a dir. f( a, b )

“space_in_empty_paren”: fals, // Afegeix espais de farciment dins del paren si el pare està buit, és a dir. f( )

“e4x”: fals, // Passa els literals xml E4X a través de literals no tocats

“jslint_happy”: fals, // si és cert, llavors s’aplica el mode jslint-stricter. Funció d’exemple () vs funció()

“space_after_anon_function”: fals, // Espai després de funcions d’anoniimousa

“brace_style”: “col·lapse”, // “col·lapse” | “Ampliar” | “End-expand”. col·loqueu claus a la mateixa línia que les declaracions de control (per defecte), o poseu claus a la pròpia línia (estil Allman / ANSI), o simplement poseu claus finals a la vostra pròpia línia.

“keep_array_indentation”: fals, // manté la sagnia de matriu.

“keep_function_indentation”: fals, // manté la sagnia de la funció.

“eval_code”: codi fals, // eval

“unescape_strings”: fals, // Descodifica caràcters imprimibles codificats en notació xNN

“wrap_line_length”: 0, // Ajusta les línies a la següent oportunitat després de N caràcters

“unindent_chained_methods”: falses, // Trucades de mètode encadenades no sagnia

“break_chained_methods”: false, // Trenca les crides de mètode encadenat a través de línies posteriors

“end_with_newline”: fals, // Afegeix una línia nova al final del fitxer

“comma_first”: fals, // Afegeix coma primer

“operator_position”: “abans-newline” // Posició de l’operador: abans-newline, after-newline, preserve-newline

“codeformatter_css_options”: {

“sintaxis”: “css,menys”, // Noms de sintaxi que han de processar el format CSS

“format_on_save”: fals, // Format en desar. Ja sigui un booleà (true/false) o una cadena regexp provada en el nom del fitxer. Exemple : “^((?!. min.| venedor).) *$”

“indent_size”: 4, // Mida del sagnat

“indent_char”: ” “, // Caràcter de sagnat

“indent_with_tabs”: false, // Sagna amb una pestanya (substitueix les opcions indent_size i indent_char)

“selector_separator_newline”: fals, // Afegeix línies noves després dels separadors del selector

“end_with_newline”: fals, // Afegeix una nova línia de finalització al fitxer

“newline_between_rules”: fals, // Afegeix una nova línia entre regles

“space_around_combinator”: fals, // Espai al voltant del combinador

“eol”: “\n” // Símbol EOL

“codeformatter_scss_options”: {

“sintaxis”: “scss,sass”, // Mida del sagnat

“format_on_save”: fals, // Format en desar. Ja sigui un booleà (true/false) o una cadena regexp provada en el nom del fitxer. Exemple : “^((?!. min.| venedor).) *$”

“indent_size”: 4, // Mida del sagnat

“indent_char”: ” “, // Caràcter de sagnat

“indent_with_tabs”: false, // Sagna amb una pestanya (substitueix les opcions indent_size i indent_char)

“selector_separator_newline”: fals, // Afegeix línies noves després dels separadors del selector

“end_with_newline”: fals, // Afegeix una nova línia de finalització al fitxer

“newline_between_rules”: fals, // Afegeix una nova línia entre regles

“space_around_combinator”: fals, // Espai al voltant del combinador

“eol”: “\n” // Símbol EOL

“codeformatter_html_options”: {

“sintaxis”: “html,blade,asp,xml”, // Noms de sintaxi que han de processar el formatador HTML

“format_on_save”: cert, // Format en desar. Ja sigui un booleà (true/false) o una cadena regexp provada en el nom del fitxer. Exemple : “^((?!. min.| venedor).) *$”

“formatter_version”: “regexp”, // Quin formatador utilitzar. Les opcions actuals són “bs4” i “regexp”. Si es produeix un error en carregar el format bs4, el format regexp s’utilitzarà automàticament

“indent_size”: 4, // mida del sagnat

“indent_char”: ” “, // Caràcter de sagnat

“indent_with_tabs”: false, // Sagna amb una pestanya (substitueix les opcions indent_size i indent_char)

“exception_on_tag_mismatch”: fals, // Si l’última etiqueta de tancament no està al mateix nivell de sagnat que la primera etiqueta d’obertura, probablement hi hagi un desajustament de l’etiqueta al fitxer

“expand_javascript”: false, // (En construcció) Expandeix JavaScript dins de <script> etiquetes (també afecta CSS purament per coincidència)

“expand_tags”: fals, // Expandeix els atributs d’etiqueta a línies noves

“minimum_attribute_count”: 2, // Nombre mínim d’atributs necessaris abans que els atributs d’etiqueta s’expandeixin a línies noves

“first_attribute_on_new_line”: false, // Posa tots els atributs en línies separades de l’etiqueta (només utilitza 1 unitat de sagnat en lloc de folrar tots els atributs amb el primer)

“reduce_empty_tags”: cert, // Posa etiquetes de tancament a la mateixa línia que l’etiqueta d’obertura si no hi ha contingut entre elles

“reduce_whole_word_tags”: cert, // Posa etiquetes de tancament a la mateixa línia que l’etiqueta d’obertura si hi ha paraula sencera entre elles

“custom_singletons”: “” // Etiquetes de singleton personalitzades per a diversos llenguatges de plantilles fora de l’especificació HTML5

“codeformatter_python_options”: {

“sintaxis”: “python”, // Noms de sintaxi que han de processar el formatador de Python

“format_on_save”: fals, // Format en desar. Ja sigui un booleà (true/false) o una cadena regexp provada en el nom del fitxer. Exemple : “^((?!. min.| venedor).) *$”

“indent_size”: 1, // mida del sagnat

“indent_with_tabs”: cert, // Sagna amb pestanyes o espais

“max_char”: 80, // Amplada de les línies de sortida en caràcters.

“assignació”: ” = “, // Així és com apareixerà l’operador d’assignació.

“function_param_assignment”: “=”, // Així ha d’aparèixer l’assignació de paràmetres de funció.

“function_param_sep”: “, “, // Així se separen els paràmetres de la funció.

“list_sep”: “, “, // Així és com se separen els elements de la llista.

“subscript_sep”: “=”, // Així se separen els subíndexs.

“dict_colon”: “: “, // Això separa les claus del diccionari dels valors.

“slice_colon”: “:”, // això separa els índexs start:end de llesques.

“comment_prefix”: “# “, // Aquest és el sentinella que marca l’inici d’una cadena de comentaris.

“shebang”: “#!/usr/bin/env python”, // Hashbang, un comentari de línia 1 que nomena l’intèrpret de Python a les intèrprets d’Unix.

“caldera”: “”, // Bloc de codi estàndard (si n’hi ha). Això s’insereix després de la cadena doc del mòdul a la sortida.

“blank_line”: “”, // Així és com apareixerà una línia en blanc (fins al caràcter de línia nova).

“keep_blank_lines”: cert, // Si és cert, conserveu-ne un en blanc on es trobin espais en blanc.

“add_blank_lines_around_comments”: cert, // Si és cert, despreneu blocs de comentaris amb espais en blanc.

“add_blank_line_after_doc_string”: cert, // Si és cert, afegiu una línia en blanc després de les cadenes de doc.

“max_seps_func_def”: 3, // Divideix les línies que contenen definicions de funcions més llargues.

“max_seps_func_ref”: 5, // Divideix les línies que contenen crides de funció més llargues.

“max_seps_series”: 5, // Divideix les línies que contenen llistes o tuples més llargs.

“max_seps_dict”: 3, // Divideix les línies que contenen definicions de diccionari més llargues.

“max_lines_before_split_lit”: 2, // Divideix els literals de les cadenes que contenen més caràcters de línia nova.

“left_margin”: “”, // Així és com ha d’aparèixer el marge esquerre.

“normalize_doc_strings”: fals, // Si és cert, normalitza l’espai en blanc en cadenes de doc.

“leftjust_doc_strings”: fals, // Si és cert, l’esquerra justifica les cadenes de doc.

“wrap_doc_strings”: fals, // Si és cert, embolica les cadenes de doc a max_char.

“leftjust_comments”: fals, // Si és cert, l’esquerra justifica els comentaris.

“wrap_comments”: fals, // Si és cert, embolica els comentaris a max_char.

“double_quoted_strings”: fals, // Si és cert, utilitzeu cometes en lloc d’apòstrofs per als literals de cadenes.

“single_quoted_strings”: fals, // Si és cert, utilitzeu apòstrofs en lloc de cometes per als literals de les cadenes.

“can_split_strings”: fals, // Si és cert, les cadenes més llargues es divideixen al max_char.

“doc_tab_replacement”: “….”, // Aquest literal substitueix els caràcters de pestanya en cadenes i comentaris de documents.

Opcionalment, conserveu les constants no assignades de manera que el codi estigui ordenat

pot contenir blocs de línies comentades que no s’han

amb cometes triples inicials i finals. Els scripts de Python poden declarar

constants sense assignar-les a variables, però CodeFormatter

considera que això és desaprofitat i normalment els eludi.

“keep_unassigned_constants”: fals,

Opcionalment omet els parèntesis al voltant de les tuples, que són supèrflues

al cap i a la fi. El comportament normal de CodeFormatter encara els inclourà

com una mena de pantalla de tupla anàloga a les pantalles de llista, dict

pantalles i pantalles del conjunt encara per venir.

“parenthesize_tuple_display”: veritat,

Quan CodeFormatter divideix les línies més llargues perquè max_seps

se superen, l’afirmació normalment es tanca abans que el marge

Restaurat. El claudàtor de tancament, el claudàtor o el parèntesi es col·loca a la

nivell de sagnia actual. Això sembla lleig per als programadors “C”. Quan

java_style_list_dedent és cert, el claudàtor de tancament, el claudàtor o

parèntesi es retorna a l’esquerra al nivell de sagnia de l’adjunt

declaració.

“java_style_list_dedent”: fals

“codeformatter_vbscript_options”: {

“sintaxis”: “vbscript”, // Noms de sintaxi que han de processar el format VBScript

“format_on_save”: fals, // Format en desar. Ja sigui un booleà (true/false) o una cadena regexp provada en el nom del fitxer. Exemple : “^((?!. min.| venedor).) *$”

“indent_size”: 1, // mida del sagnat

“indent_char”: “\t”, // Caràcter de sagnat

“indent_with_tabs”: cert, // Sagnat amb una pestanya (substitueix les opcions de indent_size i indent_char)

“preserve_newlines”: true, // Conserva els salts de línia existents

“max_preserve_newlines”: 10, // Nombre màxim de salts de línia a preservar en un sol tros

“middle_tags”: “^(Altrament| ElseIf .* Llavors| Cas .*)$”, // Llista de paraules clau que divideixen un bloc, però ni obren ni tanquen el bloc

“codeformatter_coldfusion_options”: {

“sintaxis”: “coldfusion,cfm,cfml”, // Noms de sintaxi que han de processar el formatter Coldfusion Markup Language

“format_on_save”: fals, // Format en desar. Ja sigui un booleà (true/false) o una cadena regexp provada en el nom del fitxer. Exemple : “^((?!. min.| venedor).) *$”

“indent_size”: 2, // mida del sagnat

“indent_char”: ” “, // Caràcter de sagnat

“indent_with_tabs”: false, // Sagna amb una pestanya (substitueix les opcions indent_size i indent_char)

“expand_javascript”: false, // (En construcció) Expandeix JavaScript dins de <script> etiquetes (també afecta CSS purament per coincidència)

“expand_tags”: fals, // Expandeix els atributs d’etiqueta a línies noves

“minimum_attribute_count”: 2, // Nombre mínim d’atributs necessaris abans que els atributs d’etiqueta s’expandeixin a línies noves

“first_attribute_on_new_line”: false, // Posa tots els atributs en línies separades de l’etiqueta (només utilitza 1 unitat de sagnat en lloc de folrar tots els atributs amb el primer)

“reduce_empty_tags”: fals, // Posa etiquetes de tancament a la mateixa línia que l’etiqueta d’obertura si no hi ha contingut entre elles

“reduce_whole_word_tags”: fals, // Posa etiquetes de tancament a la mateixa línia que l’etiqueta d’obertura si hi ha paraula sencera entre elles

“custom_singletons”: “” // Etiquetes de singleton personalitzades per a diversos llenguatges de plantilles fora de l’especificació HTML5

}

Quan guardem l’ arxiu automàticament s’ aplicaran les opcions corresponents, segons el llenguatge utilitzat.

1.9 Comentar/descomentar código en Sublime Text 3

Una forma de reindentar el codi és la següent:

Per comentar/descomentar codi de forma ràpida podem configurar la combinació de tecles CTRL+ 7.
Vamos a Preferències -> vinculacions de tecles
Afegim aquest objecte JSON a l’arrel que tinguem:

{ “tecles”: [“ctrl+7”], “command”: “toggle_comment”,

“args”: { “block”: false }

}

Amb el que ens quedaria una combinació tal que així:

[{

“tecles”: [“shift+f6”],

“comandament”: “side_bar_open_in_browser”,

“args”: {

“camins”: [],

“tipus”: “producció”,

“navegador”: “”

}

}, {

“tecles”: [“ctrl+maj+r”],

“ordre”: “reindent”,

“args”: {

“single_line”: fals

}

}, {

“tecles”: [“ctrl+7”],

“comandament”: “toggle_comment”,

“args”: {

“bloc”: fals

}

}]

1.10 Auto ajust de línies llargues (wrap) a Sublime Text 3

Per auto ajustar les línies llargues que se surtin de l’editor farem el següent:

Preferències > Configuració: Usuari.
Introduirem la següent línia: “word_wrap”: true,

{

“word_wrap”: veritat,

“ignored_packages”:

[

“Vintage”

]

}

Gravarem l’arxiu amb CTRL + S.

1.11 Connector Emmet a Sublime Text 3

Aquest plugin ens ajudarà a generar codi de forma ràpida

Per instal·lar-lo:

CTRL+ Shift + P y tecleamos install y seleccionamos Package Control: Install Package.
Escrivim emmet i en els resultats que apareguin polsem a Emmet.
Un cop instal·lat creem un fitxer html i podem provar combinacions com les següents:
- ! [TAB] -> Escriu la capçalera d’un document HTML5
- div>ul>li -> Genera un div que conté un ul i un li
- Per a més informació i exemples visitar: http://docs.emmet.io/

1.12 Connector Bootstrap 3 Fragments en Sublime Text 3

Aquest plugin ens permetrà autocompletar codi de Bootstrap:

Per instal·lar-lo:

CTRL+ Shift + P y tecleamos install y seleccionamos Package Control: Install Package.
Escrivim bootstrap i en els resultats que apareguin polsem a Bootstrap 3 Snippets.
Per provar el seu funcionament obrim un fitxer nou i vam provar de teclejar alguna combinació de les disponibles en:

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

Per generar un formulari en bootstrap:

bs3-form + [TAB]

Per escriure un camp de tipus input text:

bs3-input:text + [TAB]

Per escriure un camp de tipus input:

bs3-input:date + [TAB]

Més exemples en: https://github.com/JasonMortonNZ/bs3-sublime-plugin

1.13 Connector De BracketHighlighter a Sublime Text 3

Aquest plugin ens ajudarà a localitzar més fàcilment l’obertura i tancament d’etiquetes, funcions, etc..

Per instal·lar-lo:

CTRL+ Shift + P y tecleamos install y seleccionamos Package Control: Install Package.
Escrivim bracket i en els resultats que apareguin polsem a BracketHighlighter.
Un cop instal·lat obrim un fitxer i vam provar en un fitxer amb codi a veure si marca les obertures i tancaments correctament.
De vegades depenent de la combinació de colors podrà destacar-ho més o menys.

1.14 Connector ColorPicker en sublim text 3

Aquest plugin ens permetrà seleccionar colors des del codi font:

Per instal·lar-lo:

CTRL+ Shift + P y tecleamos install y seleccionamos Package Control: Install Package.
Escrivim colorpi i en els resultats que apareguin polsem a ColorPicker.
Per provar el seu funcionament teclejarem CTRL+Shift+C

1.15 Connector DocBlockr a Sublime Text 3

Aquest plugin ens permetrà crear documentació sobre el codi font:

Per instal·lar-lo:

CTRL+ Shift + P y tecleamos install y seleccionamos Package Control: Install Package.
Escrivim docbl i en els resultats que apareguin polsem a DocBlockr.
Per provar el seu funcionament simplement haurem d’escriure /** i polsar TAB damunt d’una funció.

Exemple:

/**[TAB]

function sumar( a,b)

{

retorna a+b;

}

I obtindrem alguna cosa com:

/**

* [sumar description]

* @param {[type]} a

* @param {[type]} b

* @return {[type]}

function sumar( a,b)

{

retorna a+b;

}

Haurem de completar la documentació cobrint cada apartat i polsant [TAB] per passar al següent.

I generarem un codi similar a l’exemple següent:

/**

* Funció que retorna la suma de dos números passats com a paràmetre.

* @param {number} a

* @param {number} b

* @return {number}

function sumar( a,b)

{

retorna a+b;

}

1.16 Plugin HTML-CSS-JS Prettify en Sublime Text 3

CTRL+ Shift + P y tecleamos install y seleccionamos Package Control: Install Package.
Escrivim html css i en els resultats que apareguin polsem en HTML-CSS-JS Prettify.
Per provar el seu funcionament simplement haurem de fer click amb el botó dret en el codi i seleccionar HTML/CSS/JS Prettify -> Prettify Code

1.17 Plugin Typescript per treballar amb Angular2 a Sublime Text 3

CTRL+ Shift + P y tecleamos install y seleccionamos Package Control: Install Package.
Escrivim TypeScript i en els resultats que apareguin polsem a TypeScript.
Reiniciem Sublime i ja podrem veure amb colors el codi de TypeScript.
Si volem configurar la mida del tabulador en espais i alguna que altra opció anirem a:
Preferences > Settings > Syntax Specific (User) y pegaremos el siguiente código:

{

“tab_size”: 3,

“translate_tabs_to_spaces”: fals

}

1.18 Plugin Laravel Blade Highlighter en Sublime Text 3

Aquest plugin ens permetrà posar de diferent color les plantilles Blade de Laravel:

Per instal·lar-lo:

CTRL+ Shift + P y tecleamos install y seleccionamos Package Control: Install Package.
Escrivim laravel i en els resultats que apareguin polsem a Laravel Blade Highlighter.

1.19 Plugin Laravel Color Scheme en Sublime Text 3

Aquest plugin ens permetrà posar de diferent color codi generat a Laravel:

Per instal·lar-lo:

CTRL+ Shift + P y tecleamos install y seleccionamos Package Control: Install Package.
Escrivim laravel i en els resultats que apareguin polsem a Laravel Color Scheme.

1.20 Plugin PHP Getters and Setters en Sublime Text 3

Aquest plugin ens permetrà crear els getters and setters en PHP a l’hora de fer una classe.
:

Per instal·lar-lo:

CTRL+ Shift + P y tecleamos install y seleccionamos Package Control: Install Package.
Escrivim PHP Getters i en els resultats que apareguin polsem en PHP Getters and Setters.
Per provar el seu funcionament simplement haurem de polsar amb el botó dret Getters and Setters en el codi PHP on tenim la classe i seleccionar l’opció desitjada.

1.21 Connector PHPcs a Sublime Text 3

Dóna suport a PHP_CodeSniffer ST2. Xerra si el codi segueix el stàndard. Es pot seleccionar Zend, PEAR,etc.. Per a més configuració: http://pear.php.net/package/PHP_CodeSniffer/redirected

Per instal·lar-lo:

CTRL+ Shift + P y tecleamos install y seleccionamos Package Control: Install Package.
Escrivim PHP Construc i en els resultats que apareguin polsem a PHPcs.

1.22 Plugin PHP Constructors en Sublime Text 3

Aquest plugin ens permetrà crear els constructors d’una classe en PHP.
:

Per instal·lar-lo:

CTRL+ Shift + P y tecleamos install y seleccionamos Package Control: Install Package.
Escrivim PHP Construc i en els resultats que apareguin polsem en PHP Constructors.
Per provar el seu funcionament simplement haurem de polsar amb el botó dret PHP Constructor i seleccionar Generate PHP Constructor for Class.

1.23 Plugin Pretty JSON en Sublime Text 3

Aquest plugin ens permetrà validar, formatejar i minimitzar un JSON:

Per instal·lar-lo:

CTRL+ Shift + P y tecleamos install y seleccionamos Package Control: Install Package.
Escrivim pretty i en els resultats que apareguin polsem a Pretty JSON.
Per configurar la combinació de tecles anirem a Preferences -> Package Settings -> PretyJSON-> Settings – User
I hi afegim el següent:

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

Per usar-lo seleccionarem el text JSON i polsarem CTRL+ALT+M
També podrem validar i formatejar. Polsem CTRL + Shift + P, teclejam JSON i veurem les opcions possibles i combinacions de tecles corresponents.
Per formatejar usarem CTRL + Alt + J

1.24 Connector EJS V2 Sublime Text 3

Perquè reconegui les plantilles amb extensió .ejs, instal·lar el plugin EJS 2.
CTRL+ Shift + P y tecleamos install y seleccionamos Package Control: Install Package.
Escrivim EJS 2 i en els resultats que apareguin polsem a EJS 2.

1.25 Connector SublimeCodeIntel a Sublime Text 3

Aquest plugin ens permetrà autocompletar codi en diferents llenguatges:

Per instal·lar-lo:

CTRL+ Shift + P y tecleamos install y seleccionamos Package Control: Install Package.
Escrivim codeIntel i en els resultats que apareguin polsem a SublimeCodeIntel.
Per provar el seu funcionament simplement haurem d’escriure codi d’algun llenguatge i esperar que ens mostri les opcions d’autocompletat.

Més informació sobre el plugin SublimeCodeIntel

Tecles ràpides amb el plugin SublimeCodeIntel:

ALT+Click (en una variable, ens porta a la secció del codi on es va crear aquesta variable.
Shift+Control+Espai (per mostrar les opcions d’autocompletat per a un text determinat).

Per a PHP haurem d’ activar l’ opció d’ autocompletat en:

Abrimos el siguiente fichero: Preferences -> Package Settings -> SublimeCodeIntel -> Settings – Default
Copiam tot el seu contingut.
Ho enganxem al següent fitxer: Preferences -> Package Settings -> SublimeCodeIntel -> Settings – User
Modifiquem aquesta línia perquè quedi així, ‘afegint PHP en l’última posició:

“codeintel_selected_catalogs”: [

“PHP”, “jQuery”, “HTML5”

Gravem l’arxiu amb els nostres ajustos i reiniciem el Sublim Text 3.

1.26 Connector SublimeLinter Sublime Text 3

Xerra constantment si ens hem oblidat de claus, punt i coma, etc..

Per instal·lar-lo:

CTRL+ Shift + P y tecleamos install y seleccionamos Package Control: Install Package.
Escrivim Sublime Linter i en els resultats que apareguin polsem a Sublimelinter.

Cal instal·lar mòduls addicionals per a cada llenguatge:

1.26.1 SublimeLinter-php

1.26.2 SublimeLinter-jshint

1.26.3 .SublimeLinter-json

1.26.4 SublimeLinter-csslint

1.27 Connector de terminal en sublim text 3

CTRL+ Shift + P y tecleamos install y seleccionamos Package Control: Install Package.
Escrivim terminal i en els resultats que apareguin polsem a Terminal.
Per provar el seu funcionament simplement haurem de fer click amb el botó dret en alguna carpeta i seleccionar Open Terminal Here…

1.28 Connectors finals en sublim text 3

S’ encarrega d’ eliminar els espais al final que tinguem en el codi.

CTRL+ Shift + P y tecleamos install y seleccionamos Package Control: Install Package.
Escrivim terminal i en els resultats que apareguin polsem a TrailingSpaces.
Li assignarem una combinació de tecles a Preferences -> Key Bindings -> User (delete_trailing_spaces):

[{

“tecles”: [“shift+f6”],

“comandament”: “side_bar_open_in_browser”,

“args”: {

“camins”: [],

“tipus”: “producció”,

“navegador”: “”

}

}, {

“tecles”: [“ctrl+maj+r”],

“ordre”: “reindent”,

“args”: {

“single_line”: fals

}

}, {

“tecles”: [“ctrl+maj+s”],

“comandament”: “delete_trailing_spaces”

}

]

Per provar el seu funcionament simplement haurem de polsar CTRL+Shift+S i s’eliminaran automàticament tots aquests espais al final.

1.29 Combinació de tecles per gravar tots els arxius a Sublime Text 3

Mitjançant aquesta combinació de tecles gravarem totes les modificacions de tots els arxius que tinguem oberts a Sublime.

CTRL+ Alt + S.

[{

“tecles”: [“shift+f6”],

“comandament”: “side_bar_open_in_browser”,

“args”: {

“camins”: [],

“tipus”: “producció”,

“navegador”: “”

}

}, {

“tecles”: [“ctrl+maj+r”],

“ordre”: “reindent”,

“args”: {

“single_line”: fals

}

}, {

“tecles”: [“ctrl+alt+s”],

“comandament”: “save_all”

}, {

“tecles”: [“ctrl+maj+b”],

“comandament”: “bracketeer_select”

}, {

“tecles”: [“ctrl+7”],

“comandament”: “toggle_comment”,

“args”: {

“bloc”: fals

}

}]

Per provar el seu funcionament simplement haurem de polsar CTRL+Shift+S i s’eliminaran automàticament tots aquests espais al final.

1.30 Creació d’ un snippet a Sublime Text 3

Anem a veure com podem crear un snippet a Sublime Text 3 perquè ens cobreixi la capçalera de Bootstrap en teclejar bs i polsar TABULADOR.

Getbootstrap.com

Per a això anirem a Tools -> New Snippet…
i es mostrarà el codi següent:

<content><! [CDATA[

Hola, ${1:this} és un ${2:snippet}.

]]></contingut>

<!– Opcional: definiu un tabTrigger per definir com activar el fragment –>

<!– <TabTrigger>hello</tabTrigger> –>

<!– Opcional: definiu un àmbit per limitar on s’activarà el fragment –>

<!– <scope>source.python</scope> –>

</fragment>

Dins <![ CDATA[ … ]] > teclejarem el codi font del nostre snippet.
Els paràmetres ${1:this} i ${2:snippet} seran els textos que ens apareixeran quan executem l’snippet i posem TABULADOR.
${1:this} : ${1} -> indica primer paràmetre i :this -> indica text per defecte en aquesta posició.
<tabTrigger>hello</tabTrigger> -> Aquí s’indica el text previ que activarà l’snippet al polsar TAB.

Codi font del nostre snippet per a Bootstrap:

<content><! [CDATA[

<! DOCTYPE html>

<head>

<title>${1:Title documento}</title>

<enllaça rel=«full d’estil» href=”css/bootstrap.min.css”>

<enllaça rel=«full d’estil» href=”css/bootstrap-theme.min.css”>

</cap>

<body>

${2: Contingut del document}

</cos>

</html>

]]></contingut>

<!– Opcional: definiu un tabTrigger per definir com activar el fragment –>

<!– Opcional: definiu un àmbit per limitar on s’activarà el fragment –>

<!– <scope>source.python</scope> –>

</fragment>

Per guardar el fitxer amb l’ snippet:

Carpeta: \Sublime Text 3\Packages\User
Nom: sense restriccions.
Extensió: .sublime-snippet (és obligatòria, sinó no funcionarà l’snippet).

Per provar l’ snippet:

Teclejar bs i polsar TAB a continuació.

1.31 Configuració de Git en Sublime Text 3

http://scotch.io/tutorials/using-git-inside-of-sublime-text-to-improve-workflow

1.32 Configuració de Sublim Text 3 per seguir els estàndards PSR-2

Entraremos en Preferences -> Settings
Copiam i enganxem la següent configuració sobreescrivint el que tinguem.

{

“default_line_ending”: “unix”,

“ensure_newline_at_eof_on_save”: veritat,

“font_size”: 12,

“ignored_packages”:

[

“Vintage”

“preserveIndent”: “false”,

“governants”:

[

120

“tab_size”: 4,

“translate_tabs_to_spaces”: veritat,

“trim_trailing_white_space_on_save”: veritat,

“word_wrap”: “Veritat”

}

Deixa un comentari