Luís Dionísio Fernandes
dionisiofernandes

dionisiofernandes

Extensão VS code JSON Table Viewer e o seu esquema de cores

Extensão VS code JSON Table Viewer e o seu esquema de cores

Luís Dionísio Fernandes's photo
Luís Dionísio Fernandes
·Jan 31, 2022·

2 min read

Uma coisa que todos nós gostamos é um user interface que nos deixe num estado confortável para trabalhar. Se há coisa que me deixa desorientado é um tema claro, seja numa página web ou em qualquer forma de visualizador de dados.

Recentemente tenho usado uma extensão do VsCode que permite visualizar os dados de um ficheiro JSON no formato tabla. Isto simplifica (e muito) a leitura desses dados.

É uma extensão muito simples que me ajuda na análise de dados e que, aos poucos, tem se tornado uma peça fundamental do meu ambiente de trabalho.

Também sei que há por aí outras alternativas mas, na verdade, eu gosto mesmo é desta!

yuqueCli.gif

Agora, nem tudo é perfeito e como tal não poderia deixar de ser, a JSON Table Viewer ainda tinha que melhorar, principalmente no UI quando usando um tema escuro no VsCode.

Apesar de escolhido um tema escuro, o interface da extensão apresentava-se sempre com uns temas claros num tom de salmão. Para piorar isto tudo, as cores das letras seguiam numa cor ainda mais clara pelo que impossibilitava a sua visualização.

Entretanto, como aprendi que o VsCode é feito com a framework Electron e por isso usa uma na sua base JavaScript parti em busca do ficheiro de configuração do esquema de cores que vim a encontrar na pasta C:\Users\USER\.vscode\extensions\lengmo.json-table-viewer-0.0.4\out o ficheiro jsonTable.js onde por volta da linha 184 temos a função getHTML() que tem la dentro as configurações do esquema de cores.

Abaixo segue as alterações que fiz na função:

getHTML() {
    return `<!DOCTYPE html>
    <html>
        <header>
            <title>JSON Table Viewer</title>
            <style>
                .json-table {
                    display: grid;
                    grid-template-columns: repeat(` + this.header.size + `, 1fr);
                    row-gap: 1px;
                    column-gap: 1px;
                }
                .table-header {
                    font-weight: bold;
                }
                .table-item {
                    text-align: left;  
                    outline: 1px solid #71797E;
                    padding: 5px;
                }
            </style>
        </header>
        <body>
            <div class="json-table">
                ` + this.tableHeaderHTML() + `
                ` + this.tableBodyHTML() + `
            </div>
        </body>

    </html>`;
}

Depois desta alteração, posso dizer que tenho uma melhor visualização dos dados sem ferir as vistas.

Pode parecer pouco, e possivelmente um exagero escrever um blog post com isto, mas, para mim é uma vitória!!

Edit: 20220201 - no repo do projeto, já alguém submeteu as alterações para serem corrigidas numa próxima release.

 
Share this