DEV Community

Victor Zarzar
Victor Zarzar

Posted on • Edited on

Modelo de settings.json para ganho em produtividade e melhor qualidade / organização do código no VS code.

No desenvolvimento de software, a configuração adequada do ambiente de desenvolvimento pode fazer uma diferença significativa na produtividade e na qualidade do código. Abaixo estão algumas configurações recomendadas para o arquivo settings.json do VSCode que podem ajudar a otimizar seu fluxo de trabalho e a manter seu código organizado.

{
"workbench.iconTheme": "symbols",
"editor.fontFamily": "JetBrains Mono",
"editor.fontSize": 12,
"editor.lineHeight": 1.6,
"editor.rulers": [80, 140],
"workbench.startupEditor": "newUntitledFile",
"editor.renderLineHighlight": "gutter",
"editor.fontLigatures": true,
"workbench.editor.labelFormat": "short",
"explorer.compactFolders": false,
"breadcrumbs.enabled": false,
"editor.minimap.enabled": false,
"symbols.hidesExplorerArrows": false,
"workbench.colorTheme": "Dracula Theme",
"terminal.integrated.env.linux": {},
"terminal.integrated.env.osx": {},
"console-ninja.featureSet": "Community",
"prettier.printWidth": 150,
"prettier.trailingComma": "es5",
"prettier.tabWidth": 4,
"prettier.semi": true,
"prettier.singleQuote": true,
"git.openRepositoryInParentFolders": "never",
"[django-html]": {
"editor.defaultFormatter": "junstyle.vscode-django-support"
},
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[dart]": {
"editor.formatOnSave": true,
"editor.formatOnType": true,
"editor.selectionHighlight": false,
"editor.suggestSelection": "first",
"editor.tabCompletion": "onlySnippets",
"editor.wordBasedSuggestions": "off"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}

Explicação das Configurações:

Aparência e Tema:

"workbench.iconTheme": "symbols": Define o tema dos ícones.
"editor.fontFamily": "JetBrains Mono": Fonte usada no editor.
"editor.fontSize": 12: Tamanho da fonte no editor.
"editor.lineHeight": 1.6: Altura da linha no editor para melhor legibilidade.
"workbench.colorTheme": "Dracula Theme": Define o tema de cores para o editor.

Produtividade:

"editor.rulers": [80, 140]: Adiciona réguas visuais no editor para ajudar a manter o código dentro de limites de comprimento.
"workbench.startupEditor": "newUntitledFile": Abre um novo arquivo não salvo ao iniciar o VSCode.
"editor.renderLineHighlight": "gutter": Destaca a linha atual no editor.
"editor.fontLigatures": true: Habilita ligaduras de fontes para uma melhor visualização do código.

Organização do Código:

"workbench.editor.labelFormat": "short": Usa nomes curtos para os rótulos dos editores.
"explorer.compactFolders": false: Desabilita a compactação de pastas no explorador.
"breadcrumbs.enabled": false: Desabilita a exibição de breadcrumbs.
"editor.minimap.enabled": false: Desabilita o minimap no editor.
Terminal e Ambiente
"terminal.integrated.env.linux": {} e "terminal.integrated.env.osx": {}: Configurações de ambiente para terminais integrados.

Formatação de Código:

"prettier.printWidth": 150: Largura máxima de linha para o Prettier.
"prettier.trailingComma": "es5": Usa vírgulas finais onde apropriado no ES5.
"prettier.tabWidth": 4: Define a largura da tabulação para 4 espaços.
"prettier.semi": true: Adiciona ponto e vírgula no final das linhas.
"prettier.singleQuote": true: Usa aspas simples em vez de aspas duplas.

Formatadores por Linguagem:

Configurações específicas de formatadores para várias linguagens como django-html, jsonc, javascriptreact, dart, javascript, html, typescript e typescriptreact, garantindo que cada tipo de arquivo seja formatado de acordo com as melhores práticas.

Formatador para CSS:

"[css]": {"editor.defaultFormatter": "esbenp.prettier-vscode"}: Define o Prettier como formatador padrão para arquivos CSS.

Configuração do Git:

"git.openRepositoryInParentFolders": "never": Evita que o VSCode abra repositórios Git em pastas pai automaticamente.

Top comments (0)