¿Cómo cambiar el tamaño de la pestaña en GitHub?


275

Cuando veo archivos en GitHub, las pestañas aparecen como 8 espacios.

Ejemplo:

ejemplo

¿Es posible cambiar esta configuración a 2 o 4 espacios?


66
También puede consultar las respuestas proporcionadas en el número 170 depre { tab-size: 4 }
KyleMit

1
Creo que debería cambiar la respuesta aceptada a la respuesta de @rofrol sobre el uso de .editorconfig, creo que su respuesta incluye los mejores métodos actuales para configurar la configuración de manera que otras personas vean el código tal como usted lo pretendía, y alterando la apariencia del código de otras personas cuando lo estás leyendo.
f1lt3r

@ f1lt3r No estoy de acuerdo. Si la gente realmente quiere ver mi código con 8 espacios más poder para ellos. No quiero restringirlos de esa manera solo para poder verlo con 4 espacios en github para mí. Si la respuesta va a cambiar, debería ser la respuesta de Mortenpi
Assimilater

@Assimilater: la respuesta de rofrol no restringiría que nadie vea el ancho que quiera. De acuerdo en que la respuesta de Mortenpi es buena, aunque es bastante frustrante tener que agregar el parámetro para cada archivo que miras.
f1lt3r

3
¿Alguien puede explicar la lógica detrás del uso de 8 espacios por defecto? No puedo imaginar ningún escenario en el que 8 espacios se vean de otra manera que no sea ridículo, ¿pero es el valor predeterminado en github? ¿Lo que da?
PandaWood

Respuestas:


24

Actualizar

. Según lo indicado por mortenpi, esto se puede hacer mediante un parámetro de consulta adicional. Vea su respuesta para más detalles.

Respuesta original

¿Es posible cambiar esta configuración a 2 o 4 espacios?

No. Solo está disponible como parte de la función de edición a través del editor Ace y el cambio no persiste.

Esta publicación de blog brinda más información sobre el IDE incrustado.

Sin embargo, siempre que conozca la URL del blob (archivo) que está dispuesto a revisar, puede cambiar fácilmente al modo de edición cambiando el segmento de blob con un segmento de edición y usar el menú desplegable para seleccionar el tamaño de pestaña preferido.

tabSize


20
Gran idea, pero el problema es que una vez que ingresa al modo EDITAR, también BIFURCA dicho archivo. Podría ser un poco excesivo después de aproximadamente 50 ediciones de solo
lectura

2
Convenido. Pero eso podría ser un buen incentivo para comenzar a contribuir ;)
nulltoken

13
Como @chrisdembia mencionó, esto ya no es correcto; github le permite cambiar el tamaño de la pestaña pasando el valor como un parámetro de consulta (por ejemplo, ?ts=4)
dule

¿Hay alguna forma para que la comunidad anule la respuesta seleccionada?
chrisdembia

1
@chrisdembia Gracias por los recordatorios;) Se actualizó la respuesta para señalar la de morenti.
nulltoken

354

Puede agregar ?ts=2o ?ts=4al URL para cambiar el tamaño de la pestaña.

Ejemplo: https://github.com/jquery/jquery/blob/master/src/core.js?ts=2

Parece que el valor puede ser de 1 a 12. Sin embargo, no funciona en Gists o vistas de archivos sin formato.

Fuente: GitHub Cheat Sheet


97
Es bueno que esto sea posible, pero sería bueno si hubiera una manera fácil de elegir el ancho de la pestaña en lugar de tener que recordar el parámetro URL.
Aross

75
También sería bueno si Github le permite guardar eso como una preferencia para que no tenga que volver a ponerlo en la URL.
FrustratedWithFormsDesigner

3
@PhilDennis funciona para mí con Chrome (en Linux).
mortenpi

1
@ NikolaMihajlović Es un poco sutil, pero el argumento ts debe estar antes del fragmento # en la URL. Por ejemplo, github.com/jquery/jquery/commit/…
mortenpi

2
Buena solución lamentablemente no funciona en diffs en relaciones públicas.
bbjay

280

Establezca el tamaño de pestaña que se muestra por defecto para su repositorio

Cuando usted tiene una .editorconfig en su repositorio, lo respetará cuando vea el código en GitHub.

indent_style = tab e indent_size = 4 muestra pestañas con 4 columnas en lugar de 8 https://github.com/isaacs/github/issues/170#issuecomment-150489692

Ejemplo .editorconfig para múltiples extensiones que funciona en los productos de JetBrains:

root = true

[*]
end_of_line = lf
insert_final_newline = true

# Matches multiple files with brace expansion notation
[*.{js,jsx,html,sass}]
charset = utf-8
indent_style = tab
indent_size = 4
trim_trailing_whitespace = true

[*.md]
trim_trailing_whitespace = false

Cambia cómo ves las pestañas en otros repositorios

Instale Stylus en su navegador, que instalar GitHub: pestañas de mejor tamaño en el código .

También hay extensiones de Google Chrome:


2
Parece que github no respeta el archivo editorconfig para archivos sin nombres (.gitconfig, etc.). ¿Alguna idea de por qué o es un error? Ex github.com/rmandvikar/git-setup/blob/tabs/.gitconfig
hIpPy

77
Los archivos de puntos no parecen ser respetados con [*](en github). Tuve que agregar otra entrada con [.*].
PotatoFarmer

¡Esta debería ser la respuesta aceptada con diferencia! Me sorprende que Github siga las reglas de configuración del editor.
Maurício Giordano el

1
No se respeta en commits :-(
Nikola Mihajlović

1
@rofrol Creo que me equivoqué. El tamaño de la pestaña funciona correctamente en código y diferencias, pero no en README.mdfragmentos de código. Esta es una nueva observación; No sé si los README.mdfragmentos de código alguna vez hicieron tabulaciones diferentes a 8 espacios.
Redsandro

68

En realidad es posible hacerlo, con una extensión de navegador. Instale Stylish (en Firefox o Chrome ), luego instale este estilo de usuario: " GitHub: pestañas de mejor tamaño en el código ".

Puede que no funcione para algunos idiomas. Por ejemplo, estaba viendo un archivo JavaScript y no noté ningún cambio. Así que eliminé el estilo que tenía el autor y puse las siguientes líneas:

.tab-size {
  -webkit-tab-size: 4 !important;
     -moz-tab-size: 4 !important;
       -o-tab-size: 4 !important;
          tab-size: 4 !important;
}

Y funcionó en Chrome ( captura de pantalla ).

Como puede ver en la captura de pantalla, también habilité el modo de pantalla panorámica y cambié el esquema de color a Solarizado. Así que tengo tres estilos de usuario que se ejecutan en las páginas de GitHub a través de la extensión Stylish para Chrome . Espero que esto ayude a alguien.


18
Escribí ese estilo de usuario . Me alegra que lo hayas encontrado útil. Lo arreglé y probé en Chrome, y ahora funciona sin su modificación.
Rory O'Kane

2
También le puede gustar mi estilo de usuario " Todo el código tiene un tamaño de pestaña 4 ", que cambia el tamaño de la pestaña de los <code>elementos en todos los sitios web.
Rory O'Kane

1
Github reemplaza cada \tcon 8 &nbsp;. Merde
Rudie

2
Sí. No hicieron eso antes y no tengo idea de por qué lo hacen ahora :( Supongo que una solución puede ser alguien escribiendo un guión que reemplace digamos ... 4 consecutivos & nbsp; con dos o lo que sea. Pero eso tiene que ser un "usercript", creo.
aledujke

1
Nuestro estilo de usuario GitHub Dark Stylish le permite establecer el tamaño de la pestaña. Y se está manteniendo activamente.
Mottie

0

Si estás en UserScripts, esto lo hizo por mí:

// ==UserScript==
// @name         GitHub Tabs
// @namespace    http://foldoc.org/
// @version      1
// @description  Set sensible tabs on GitHub
// @author       Denis Howe
// @match        https://github.com/*
// ==/UserScript==

document.querySelectorAll('table').forEach(t => { t.dataset.tabSize = 2 });

Hubiera preferido esta alternativa, pero parece que funciona de manera más o menos aleatoria: si los datos no se cargaron antes de que se ejecute el script de usuario (por ejemplo, lista de archivos y luego haga clic para abrir el archivo), no funciona.
Diez

-3

Lo hice para solucionarlos http://valjok.blogspot.com/2014/07/indentation-correction-for-exposing.html .

Otra opción es cuando inserte su esencia , reemplace todas las pestañas con el número requerido de espacios

<div id="willReplaceTabs">
 <script src="https://gist.github.com/valtih1978/99d8b320e59fcde634ad/cf1b512b79ca4182f619ed939755826c7f403c6f.js"></script>

 <script language="javascript">
  var spaces = "  "
  willReplaceTabs.innerHTML = willReplaceTabs.innerHTML.replace(/\t/g, spaces)
 </script>
</div>

-6

Si es una opción para el proyecto en el que está trabajando, cambiar su editor para tratar las pestañas como espacios solucionará el problema.

Entonces, por ejemplo, en Visual Studio Code, la configuración se ve así:

{
    "editor.tabSize": 2,
    "editor.insertSpaces": true
}

En Sublime es:

{
    "tab_size": 2,
    "translate_tabs_to_spaces": true
}

Hasta hace poco insistí en pestañas no espaciadas. Después de cambiar, solucionó la rareza de renderizado de Github, y no he notado ningún inconveniente significativo en mi flujo de trabajo.


-20

La mejor solución es, si es posible, convencer a los mantenedores del código fuente que está buscando para reemplazar todas las pestañas por el número correcto de espacios.

El uso de pestañas es problemático en el código hoy dado que a menudo lo está viendo en la web, donde la decisión de "cuántos espacios por pestaña" depende de dónde se muestra.


77
Esta es la respuesta correcta y no merece ser rechazada. Hay demasiado software por ahí que no te permite cambiar el ancho de las pestañas para que "las pestañas sean configurables" no sean una ilusión. Y si alguna vez sangra algo a una distancia que no es un múltiplo de su ancho de pestaña preferido, ahora tiene una combinación de pestañas y espacios y ajustar el tamaño de la pestaña ya no funciona.
zwol

8
Lea el artículo de Wikipedia sobre el origen de la pestaña de 8 espacios. "Un tamaño de pestaña horizontal común de ocho caracteres evolucionó, a pesar de que cinco caracteres son media pulgada y la sangría de párrafo típica de la época, porque como potencia de dos era más fácil de calcular en binario para la electrónica digital limitada disponible". Su respuesta utiliza un razonamiento circular (es decir, el estándar tiene ocho caracteres porque ese es el estándar) para cerrar la puerta a la pregunta. El autor de la pregunta no está satisfecho con este estándar y tiene pocas razones para estarlo.
Adam

44
@mrjedmao Sí, puedes hacerlo ?ts=4.
Ben

55
Prefiero la pestaña al espacio, porque acelera mi edición entre 4 y 8 veces cuando muevo el cursor por un espacio en blanco.

44
"Excepto la persona que le paga al desarrollador, ¿hmm?" ¿El IDE de su cerebro utilizó su función de movimiento por línea para omitir la siguiente oración? Expliqué explícitamente que las convenciones forzadas de un proyecto tienen prioridad sobre las preferencias individuales. || "¿Por qué te haces eso a ti mismo, cuando todos los editores tienen una función de movimiento por palabra / campo / línea?" Sí, estás insinuando que es más fácil usar la función de un editor para navegar por el código que simplemente presionar una tecla para atravesar una columna completa. Además, no todos los editores tienen dichas funciones, y algunos incluso funcionan de manera diferente. Deja de pensar que todo el mundo usa Sublime.
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.