Mi Sublime text

Ya son unos cuantos años empleando Sublime Text, recopilo aquí algunos de los archivos de configuración, plugins y enlaces que uso ahora mismo.

Themes

Snippets

Convertir px a em

<snippet>
    <content><![CDATA[ font-size: calc(($1 / 16) * 1em); ]]></content>
    <tabTrigger>fontsize</tabTrigger>
</snippet>

Mediaquerie snippet

<snippet>
    <content><![CDATA[
@media(min-width: $1 ){
    $2
}
]]></content>
    <tabTrigger>media</tabTrigger>
</snippet>

Test css snippet

<snippet>
    <content><![CDATA[
background: tomato !important;
border: 1px solid tomato !important;
]]></content>
    <tabTrigger>test</tabTrigger>
</snippet>

Plugins

Configuración para proyectos

Entre otras cosas, podemos excluir carpetas y archivos en un proyecto.

{
    "folders":[
        {
            "path": "../",
            "folder_exclude_patterns": [ "_site" ],
            "file_exclude_patterns": [ "package-lock.json" ]
        }
    ]
}

Preferencias

Para forzar el indentado a espacios al abrir un documento en Preferences.sublime-settings

"tab_size": 4,
"translate_tabs_to_spaces": true,
"detect_indentation": false

Sublime.keymap

Algunos atajos de teclado.

[
    { "keys": ["super+b"], "command": "toggle_side_bar" },
    { "keys": ["f6"], "command": "lower_case" },
    { "keys": ["f7"], "command": "upper_case" },
    { "keys": ["f5"],
        "command": "insert_date",
        "args": {"format": "%Y-%m-%d"}
    },
    {
        "keys": ["super+alt+y"],
        "command": "slugify"
    },
]

Consejos

Una de las características que más me gusta de sublime text, es la posibilidad de dar un aspecto diferente a cada tipo de archivo (md, css, php …).

Por ejemplo podemos añadir "rulers": [8] a Sass.sublime-settings o a LESS.sublime-settings para marcar una regla vertical, si tenemos ajustado "tab_size": 4, podemos visualizar fácilmente cuando superamos los tres anidamientos.

Para eliminar un Plugin usanmos Comando + Mayúsculas + P y seleccionamos Package Control: Remmove Package

El atajo F5 nos permite ordenar el código alfabéticamente, útil si ordenas tus css alfabéticamente.

Videos sobre Sublime Text

Links