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
}