Como estilizar suas tabs no vscode
O Vscode lançou recentemente alguns recursos maravilhoso para as tabs que facilitam muito a vida de quem usa a ferramenta
A primeira delas é a wrapTabs
Nesse exemplo sem wrapTabs as tabs ficam uma do lado da outra, isso dificulta muito achar a tab que você quer (principalmente pra quem usa apenas 1 monitor).
agora com as wrapTabs é bem mais fácil de encontrar o que você quer já que todas as suas Tabs ficam visíveis
E como coloca isso?
na pasta root do seu projeto é só criar uma pasta .vscode com um e dentro dela criar um arquivo settings.json
Dentro desse arquivo é só colocar o seguinte código
Outro recurso muito interessante e que ajuda muito que foi recém lançado foi o de adicionar cor nas tabs de acordo com o estado do seu arquivo. Sua tab vai ficar como fica sua árvore de arquivos na esquerda.
Dá pra perceber que a cor do da fonte da tab não é a mesma do index.ts
Com essa nova funcionalidade você consegue fazer com que nas próprias tabs você já saiba o estado atual do seu arquivo. Maravilhoso ne?
Como adicionar essa funcionalidade?
no mesmo arquivo mencionado acima (o setup.json dentro da pasta .vscode no root do seu projeto) você adiciona no mesmo objeto criado o seguinte código.
ou seja para adicionar as duas funcionalidades citadas seu setup.json deve ficar assim
Agora a terceira e última funcionalidade
Você também pode adicionar o estado do seu arquivo nas suas Tabs (Badge que fica do lado do seu arquivo na árvore de arquivos)
Aqui o exemplo do seu arquivo sem o badge
Aqui o exemplo do seu arquivo com os Badges
Como coloca isso? da mesma forma que coloca os outros , o setup.json dentro da pasta .vscode no root do seu projeto e adiciona o código
Então no final a adição das 3 funcionalidades citadas seriam o seguinte código
Agora fica bem mais prático pra quem usa só um monitor ou tem monitores menores!
