Arxiu de la categoria: sublime

Tutorial sobre sublim text 3 editor

Publicat el per
Respon

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.

1.1 Instal·lació de Sublim Text 3

  1. Per Instal·lar Sublime 3 haurem d’anar a la pàgina http://www.sublimetext.com
  2. 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
  3. Disposem de versions per a OSX, Windows(32 i 64 bits) i Ubuntu (32 i 64 bits).
  4. 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

«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/

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:

<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»

}

Sublime text 3. PHP Mostrar l’escript al navegador

Publicat el per
Respon

Si volem provar les nostres pàgines en un navegador per defecte i en una URL determinada Haurem d’instal·lar primer el plugin: SideBarEnhancements.


En em meu cas


——————————SyntaxHighlighter-pre lang=»html»>——-

{
"S:/0-php/": {
"url_production":"http:/213.4.33.41/0-php/"
}
}
----------------------------------------------------------------
{ "S:/polidic/": {
 "url_production":"http:/polidic.cat/" 
}
}
==========================Syn_sec=====================================
{ "Q:/beseit/": {
"url_production":"http:/192.168.1.49/beseit/" 
}
}
==========================local=====================================
{
"c:/appserv/www/polidic/": {
"url_production":"http:/localhost/polidic/"
}
}

-------------------------

{
"c:/appserv/www/enllaços/": {
"url_production":"http://localhost/enllaços/"
} 
}

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

Configurar llançament de script: preferences/key binding/uswer

[
{"keys": [ "ctrl+."], "command": "toggle_side_bar" },
{"keys": [ "ctrl+,"], "command": "reindent" },
{ "keys": ["shift+f6"],
"command": "side_bar_open_in_browser" ,
"args":{"paths":[], "type":"production", "browser":""}
}
]

Amb shit F6 s’obra el navegador amb l’escript.



Si volem mostrar l’escript en el servidor localhost Appserv

Configuració de Navegador per defecte a Sublim Text 3

 

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

Sublime text 3. Settings. Build System php

Publicat el per
Respon

Per eliminar el recordatori de nova versió: Settings-User and add there: «update_check»: false,

{
«update_check»: false,

«auto_complete_triggers»:
[
{
«characters»: «b4»,
«selector»: «text.html»
}
],
«color _scheme»: «Packages/Monokai Oark/Monokai Dark/Monokai Dark»,
«font_size»: 17,
«highlight_raodified_tabs»: true,
«ignored_packages»:
[
«Vintage»
],
«ignorr.d_packages»:
[
],
«open_files_in_new_window»: false,
«save_on_focus_lost»: true,
«tab_size»: 4,
«theme»: «Adaptive.sublime-theme»,

}