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 }