{"id":160,"date":"2025-06-10T13:14:19","date_gmt":"2025-06-10T11:14:19","guid":{"rendered":"http:\/\/localhost:8001\/?p=160"},"modified":"2025-10-05T12:28:33","modified_gmt":"2025-10-05T10:28:33","slug":"cheat-sheet-resalta-la-pestana-activa-en-vs-code","status":"publish","type":"post","link":"https:\/\/carlosarranz.es\/en\/cheat-sheet-resalta-la-pestana-activa-en-vs-code\/","title":{"rendered":"Cheat Sheet \u2013 Highlight the active tab in VS Code"},"content":{"rendered":"\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Actualizado:<\/strong> 23&nbsp;de&nbsp;mayo&nbsp;de&nbsp;2025<br><strong>\u00c1mbito recomendado:<\/strong> <em>User Settings<\/em><\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">1. \u00bfPara qu\u00e9 sirve?<\/h2>\n\n\n\n<p>Destaca de un vistazo la pesta\u00f1a del archivo que est\u00e1s editando cuando tienes muchas abiertas.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">2. Configuraci\u00f3n expr\u00e9s (3&nbsp;pasos)<\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<ul class=\"wp-block-list\">\n<li><strong>Abre<\/strong> la paleta: <code class=\"\" data-line=\"\">Ctrl\u202f+\u202fShift\u202f+\u202fP<\/code> \u2192 <strong>Preferences: Open Settings\u00a0(JSON)<\/strong>.<\/li>\n\n\n\n<li><strong>Pega<\/strong> este bloque en tu <code class=\"\" data-line=\"\">settings.json<\/code> (ajusta los colores a tu gusto):<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-json\" data-line=\"\">&quot;workbench.colorCustomizations&quot;: {\n  \/\/ Si solo quieres que afecte al tema actual,\n  \/\/ envu\u00e9lvelo as\u00ed: &quot;[Default Dark+]&quot;: { ... }\n\n  &quot;tab.activeBackground&quot;: &quot;#173d53&quot;,     \/\/ Fondo de la pesta\u00f1a activa\n  &quot;tab.activeBorderTop&quot;: &quot;#ffae00&quot;,      \/\/ L\u00ednea superior muy visible\n  &quot;tab.activeForeground&quot;: &quot;#ffffff&quot;,     \/\/ Texto de la pesta\u00f1a activa\n  &quot;tab.activeModifiedBorder&quot;: &quot;#ffae00&quot;, \/\/ Borde si el archivo tiene cambios sin guardar\n  &quot;tab.inactiveBackground&quot;: &quot;#1e1e1e&quot;,   \/\/ Fondo del resto de pesta\u00f1as\n  &quot;tab.unfocusedActiveBorderTop&quot;: &quot;#ffae00&quot; \/\/ Cuando la ventana pierde el foco\n}<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">3. \u00bfD\u00f3nde pongo la configuraci\u00f3n?<\/h2>\n\n\n\n<figure class=\"wp-block-table has-medium-font-size\"><table class=\"has-fixed-layout\"><thead><tr><th>Opci\u00f3n<\/th><th>Archivo<\/th><th>Cu\u00e1ndo usarla<\/th><\/tr><\/thead><tbody><tr><td><strong>User<\/strong><\/td><td><code class=\"\" data-line=\"\">&lt;config-dir&gt;\/User\/settings.json<\/code><\/td><td>Para que se aplique a <strong>todos<\/strong> tus proyectos.<\/td><\/tr><tr><td><strong>Workspace<\/strong><\/td><td><code class=\"\" data-line=\"\">.vscode\/settings.json<\/code><\/td><td>Solo para el proyecto abierto.<\/td><\/tr><tr><td><strong>Default<\/strong><\/td><td>Solo lectura<\/td><td>No se toca; sirve de referencia.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">4. Tokens clave de color<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Token<\/th><th>Efecto<\/th><\/tr><\/thead><tbody><tr><td><code class=\"\" data-line=\"\">tab.activeBackground<\/code><\/td><td>Fondo de la pesta\u00f1a activa<\/td><\/tr><tr><td><code class=\"\" data-line=\"\">tab.activeBorderTop<\/code><\/td><td>Borde superior (muy visible)<\/td><\/tr><tr><td><code class=\"\" data-line=\"\">tab.activeBorder<\/code><\/td><td>Borde completo<\/td><\/tr><tr><td><code class=\"\" data-line=\"\">tab.activeForeground<\/code><\/td><td>Color del texto de la pesta\u00f1a activa<\/td><\/tr><tr><td><code class=\"\" data-line=\"\">tab.activeModifiedBorder<\/code><\/td><td>Borde cuando el archivo tiene cambios sin guardar<\/td><\/tr><tr><td><code class=\"\" data-line=\"\">tab.inactiveBackground<\/code><\/td><td>Fondo de pesta\u00f1as inactivas<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">5. Extensiones \u00fatiles<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>ColorTabs<\/strong> \u2013 Colorea pesta\u00f1as seg\u00fan expresiones regulares (tipo de archivo, ruta, etc.).<\/li>\n\n\n\n<li><strong>Peacock<\/strong> \u2013 Colorea el marco de la ventana para distinguir workspaces o instancias.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">6. Buenas pr\u00e1cticas<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Empieza<\/strong> con un borde (<code class=\"\" data-line=\"\">tab.activeBorderTop<\/code>) si no quieres cambiar todo el fondo del tema.<\/li>\n\n\n\n<li><strong>Mant\u00e9n<\/strong> contraste suficiente entre el color elegido y el fondo general del editor.<\/li>\n\n\n\n<li><strong>Documenta<\/strong> el cambio si trabajas en equipo para evitar confusiones.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">7. Recursos<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Documentaci\u00f3n oficial: <em>Theme Color Reference<\/em> de VS&nbsp;Code.<\/li>\n\n\n\n<li>Ejemplos de temas: explora el repositorio <code class=\"\" data-line=\"\">vscode-themes<\/code> para inspirarte.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u00a1Listo! Con estos pasos tu pesta\u00f1a activa destacar\u00e1 de forma clara y consistente.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Actualizado: 23&nbsp;de&nbsp;mayo&nbsp;de&nbsp;2025\u00c1mbito recomendado: User Settings 1. \u00bfPara qu\u00e9 sirve? Destaca de un vistazo la pesta\u00f1a del archivo que est\u00e1s editando cuando tienes muchas abiertas. 2. Configuraci\u00f3n expr\u00e9s (3&nbsp;pasos) 3. \u00bfD\u00f3nde pongo la configuraci\u00f3n? Opci\u00f3n Archivo Cu\u00e1ndo usarla User &lt;config-dir&gt;\/User\/settings.json Para que se aplique a todos tus proyectos. Workspace .vscode\/settings.json Solo para el proyecto abierto. Default&hellip;&nbsp;<a href=\"https:\/\/carlosarranz.es\/en\/cheat-sheet-resalta-la-pestana-activa-en-vs-code\/\" rel=\"bookmark\"><span class=\"screen-reader-text\">Cheat Sheet \u2013 Highlight the active tab in VS Code<\/span><\/a><\/p>","protected":false},"author":1,"featured_media":204,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","footnotes":""},"categories":[4,7],"tags":[],"class_list":["post-160","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desarrollo","category-ide"],"_links":{"self":[{"href":"https:\/\/carlosarranz.es\/en\/wp-json\/wp\/v2\/posts\/160","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/carlosarranz.es\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/carlosarranz.es\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/carlosarranz.es\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/carlosarranz.es\/en\/wp-json\/wp\/v2\/comments?post=160"}],"version-history":[{"count":3,"href":"https:\/\/carlosarranz.es\/en\/wp-json\/wp\/v2\/posts\/160\/revisions"}],"predecessor-version":[{"id":164,"href":"https:\/\/carlosarranz.es\/en\/wp-json\/wp\/v2\/posts\/160\/revisions\/164"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/carlosarranz.es\/en\/wp-json\/wp\/v2\/media\/204"}],"wp:attachment":[{"href":"https:\/\/carlosarranz.es\/en\/wp-json\/wp\/v2\/media?parent=160"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/carlosarranz.es\/en\/wp-json\/wp\/v2\/categories?post=160"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/carlosarranz.es\/en\/wp-json\/wp\/v2\/tags?post=160"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}