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:
- http://www.emezeta.com/articulos/guia-sublime-text
- http://foro.elhacker.net/desarrollo_web/tips_y_trucos_sublime_text_2-t364397.0.html
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
«opening_tags»: «^(Funció .*| Sub.*| Si .* Llavors| Per a .*| Fes-ho mentre .*| Seleccioneu Cas.*)», // Llista de paraules clau que obren un bloc nou
«middle_tags»: «^(Altrament| ElseIf .* Llavors| Cas .*)$», // Llista de paraules clau que divideixen un bloc, però ni obren ni tanquen el bloc
«closing_tags»: «(Funció final| Sub| final Finalitza si| Següent| Bucle| Final De la selecció)$» // Llista de paraules clau que tanquen un bloc obert
},
«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)
«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»: 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/
- ! [TAB] -> Escriu la capçalera d’un document HTML5
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.
Per a això anirem a Tools -> New Snippet…
i es mostrarà el codi següent:
<sippet>
<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:
<sippet>
<content><! [CDATA[
<! DOCTYPE html>
<html lang=»es»>
<head>
<meta charset=»UTF-8″>
<title>${1:Title documento}</title>
<meta name=»viewport» content=»width=device-width, initial-scale=1, maximum-scale=1″>
<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}
<script src=»//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js»></script>
</cos>
</html>
]]></contingut>
<!– Opcional: definiu un tabTrigger per definir com activar el fragment –>
<tabTrigger>bs</tabTrigger>
<!– 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»
}