Janela do VS Code

Meu setup no VS Code para PHP, HTML e CSS

Conhecei a “programar” no Dreamweaver, passei pelo Coda for Mac, Sublime, VS Code e recentemente pelo Web Storm da Jetbrains.  Este último é uma IDE paga e oferece uma série de recursos muito legais que deixam o dia a dia mais fluido, porém é uma IDE paga. Estou numa tentativa de configurar o VS Code o mais próximo possível do comportamento do Web Storm afim de voltar a usar ele como meu editor de código padrão.

Extensões de uso geral

Guides
Cria uma linha imaginária a cada TAB, assim fica fácil de verificar se um if/else esta fechado por exemplo.
https://marketplace.visualstudio.com/items?itemName=spywhere.guides&WT.mc_id=medium-blog-gllemos

Path Intellisense
Mapeia e mostra um auto complete da árvore de arquivos, assim fica fácil inserir um caminho de arquivo em projeto com muitos diretórios.
https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense&WT.mc_id=medium-blog-gllemos

Auto Close Tag
Fecha automaticamente as tags HTML
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

Bracket Pair Colorizer 2
Coloca cores diferentes nos colchetes. 
https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2

Gerador de arquivo gitiginore
https://marketplace.visualstudio.com/items?itemName=rubbersheep.gi

Git History
Mostra a arte de commits visualmente
https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory

Git Lens
https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

Sintax highlight para SASS
https://marketplace.visualstudio.com/items?itemName=Syler.sass-indented

Live Sass Compiler
Compila automaticamente arquivos .SCSS gerando a versão minificada.
https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass

Minify
Extensão que minifica arquivos HTML, CSS e JS, eu utilizo somente para o JS.
https://marketplace.visualstudio.com/items?itemName=HookyQR.minify

WakaTime
Extensão para tracking do tempo gasto programando.
https://marketplace.visualstudio.com/items?itemName=WakaTime.vscode-wakatime

TO DO tree
Permite criar listas de TODO no código e visualiza-las em conjunto
https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree

Settings Sync
Sincroniza as configurações do VS Code com a sua conta do GitHub.
https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync

Extensão do Composer para VS Code
https://marketplace.visualstudio.com/items?itemName=ikappas.composer

Extensões PHP

PHP Debug
https://marketplace.visualstudio.com/items?itemName=felixfbecker.php-debug

PHP IntelliSense
https://marketplace.visualstudio.com/items?itemName=felixfbecker.php-intellisense

PHPcs
https://marketplace.visualstudio.com/items?itemName=ikappas.phpcs

Extensões Bancos de Dados

SQL Server (mssql)
Permite visualizar e criar queries em bancos de dados SQL.
https://marketplace.visualstudio.com/items?itemName=ms-mssql.mssql

Extensões para React

Vscode-styled-jsx
Syntax highlighting para padrão Styled Components.
https://marketplace.visualstudio.com/items?itemName=blanu.vscode-styled-jsx

Temas e Ícones

OneDark Theme
Melhor tema no meu ponto de vista.
https://marketplace.visualstudio.com/items?itemName=azemoh.theme-onedark

Material Icon Theme
https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme

BÔNUS: O site https://vscodethemes.com/ oferece uma listagem e preview dos principais temas para VS CODE.

Minhas customizações no arquivo settings.json:

{
"editor.fontSize": 14,
"editor.fontLigatures": false,
"workbench.fontAliasing": "antialiased",
"debug.console.fontFamily": "",
"editor.minimap.enabled": false,
"workbench.statusBar.visible": true,
"workbench.activityBar.visible": true,
"window.menuBarVisibility": "default",
"terminal.integrated.fontSize": 12,
"terminal.integrated.shell.osx": "/bin/zsh",
"explorer.confirmDelete": false,
"window.zoomLevel": 0,
"files.trimTrailingWhitespace": true,
"editor.renderWhitespace": "all",
"workbench.colorTheme": "One Dark Theme",
"workbench.iconTheme": "material-icon-theme",
"git.enableSmartCommit": true
}

Leave a Reply