Visual Code Studio ou vscode

Introdução

Terminal Default

Configurações -> Recursos -> Terminal -> Integrated>Default profile: Windows= Git Bash

O arquivo settings.json $USER/AppData/Roaming/Code/User/settings.json

{
    "files.autoSave": "afterDelay",
    "terminal.integrated.defaultProfile.windows": "Git Bash",
    "window.zoomLevel": 1
}

Visões

Inicialmente o VSCode possui essas 5 visoões:

- Projeto

- Busca

- Git

- Debug

- Extensões

Themes

Ctrl + Shift + P > theme => Preference: Color Theme => Aditional

Ou na visão de Extention: category:themes

Instalar: Dracula official, Nord

File => Preferences => Settings ou Ctrl + ,

Ou Ctrl + Shift + P > settings e depois Token Color Customizations editamos o json

{
    "window.zoomLevel": 0,
    "workbench.colorTheme": "Nord",
    "editor.tokenColorCustomizations": {
        "comments": "#FF0000"
    }
    
    
    "files.autoSave": "afterDelay",
    "terminal.integrated.defaultProfile.windows": "Git Bash",
    "window.zoomLevel": 0,
    "workbench.iconTheme": "vscode-icons",
    "workbench.colorTheme": "Dracula",
    "editor.renderLineHighlight": "gutter",
    "editor.tabSize": 2,
    "terminal.integrated.fontSize": 16,
    "javascript.updateImportsOnFileMove.enabled": "never",
    "editor.parameterHints.enabled": false,
    "breadcrumbs.enabled": true

}

É criado um arquivo em /home/renatocosta/.config/Code/User/settings.json com essas configurações.

Fontes

Existe fontes criadas para desenvolvimento pensando em códigos: FiraCode.

Oferece o recurso de font ligator, identifica os fechamentos de chaves e etc.

Para instalar no ubuntu:

sudo apt update

sudo apt install fonts-firacode

No Windows, copie as fontes para a pasta de fontes.

settings => User => Text Editor => Font => Font Family

substitua: 'Droid Sans Mono', 'monospace', monospace, 'Droid Sans Fallback' por 'Fira Code'

Configure também: "editor.fontLigatures": true

Para o terminal tem a fonte: Meslo-Font

sudo apt-get install fonts-powerline

Atalhos

settings => shortcuts

atalhos

Ctrl Shift P => Digite: Open User Settings

Ctrl P => Pesquisa arquivo

Ctrl Shift F => Busca texto

Ctrl H => Substituir

Alt + cursor acima ou baixo => mover uma linha

Para duplicar linha, configure em shortcut => Copy line Down Shift Alt Down

Para deletar linha, Delete Line

Ctrl Shift L => Selecionar uma variavel

Alt Shift => Selecionar multiplas colunas

Ctrt G => Busca uma linha no codigo

Alt click mouse - Coloca o cursor em varios lugares para edição

Crtl D - Para selecionar varios itens simultaneo

Crtl Shift Alt - Para selecionar colunas

Crtl Shift End - Seleciona da posição ao fim

Os atalhos para identar código no VS Code são:

Windows: shift alt f

Mac: shift option f

Linux: ctrl shift i

Settings

Para trabalhar com typescript e ele fazer os imports com o caminho completo

File -> Preferences - Settings procure por typescript import module

Mude Typescript > preferences: Import Module Specifier para non relative

File -> Preferences - Settings procure por code action

"editor.codeActionsOnSave": {
   "source.organizeImports": true
}

Emmet

html>head+body>div.principal

Snippets

Criar auto complets, pedaços de códigos.

Para criar um novo snippet:

snippet => Preferences: User Snippet

Podemos criar um snippet global ou para uma linguagem especifica.

	"Log to console": {
		"prefix": "lc",
		"body": [
			"console.log('$1');",
			"$2"
		],
		"description": "log console"
	}

Extensões

Comum

Bracket Pair Colorizer

Dracula Official ( Official Dracula Theme. A dark theme for many editors, shells, and more. )

vscode-icons ( Icons for Visual Studio Code )

gitLens

IntelliCode ( AI-assisted development )

Material Icon Theme ( Material Design Icons for Visual Studio Code )

Peacock ( Subtly change the workspace color of your workspace. Ideal when you have multiple VS Code instances an )

Project Manager ( Easily switch between projects )

Remote - WSL ( Open any folder in the Windows Subsystem for Linux (WSL) and take advantage of Visual Studio Code's full fe )

Docker ( Makes it easy to create, manage, and debug containerized applications. )

Auto Rename Tag ( Auto rename paired HTML/XML tag )

CSS Flexbox Cheatsheet ( Open a flexbox cheatsheet directly in VS Code. )

Debugger for Chrome (Nightly) ( Debug your JavaScript code in the Chrome browser, or any other target that supports the Chrome Debugg )

HTML CSS Support

Prettier Code Formatter - Formatador de código

CSS Peek

Live SASS Compiler

Node

Live Server - Servidor http

Jest Runner - Para rodar testes unitarios

Rest Client - Para fazer chamadas http

ESLint - da Microsoft

StandardJS - JavaScript Standard Style da Standard para padronização do js. ( desabilite este se utilizar o ESLint )

Java

Instalar o plugin:

Java Extension Pack

Spring Boot Extension Pack

Spring Boot Dashboard

Ajuda a executar e identificar projetos spring boot

lombok

Python

Python Preview

PHP

DupChecker( Check duplicate lines and remove them if you need to keep the unique lines only )

Error Lens ( Improve highlighting of errors, warnings and other language diagnostics. )

ESLint ( Integrates ESLint JavaScript into VS Code. )

gettext ( Gettext PO files language support for Visual Studio Code)

Paste and Indent ( Paste some code with "correct" indentation )

PHP Debug ( Debug support for PHP with Xdebug )

PHP DocBlocker ( A simple, dependency free PHP specific DocBlocking package )

PHP Extension Pack ( Everything you need for PHP development )

PHP IntelliSense ( Advanced Autocompletion and Refactoring support for PHP )

phpfmt - PHP formatter ( Integrates phpfmt into VS Code )

renatoapcosta/vscode.md