Deixando o VSCode perfeito para desenvolvimento Javascript

Olá galera tudo tranquilo, eu vou iniciar aqui a primeira publicação do ano dando algumas dicas de como configurar o VSCode para tirar 100% de aproveitamento para desenvolver em Javascript.

Iremos dividir o post em duas partes, a primeira vamos instalar todos os plugins interessantes para trabalhar e no segundo momento iremos configurar o VSCode da maneira que possamos ter mais produtividade para desenvolver em JS.

Estas configurações são as que eu utilizo no dia-a-dia para desenvolvimento e espero que te ajude. Tem alguma extensão bacana para adicionarmos aqui na lista para ajudar os outros amigos ? publique aqui nos comentários

Plugins:

1) Color Highlight
Permite que você tenha um preview do hexa decimal da cor direto na tela do VSCode

2) Docker
Adiciona highlights no hover com dicas e linting para arquivos Dockerfile e docker-compose.yml

3) EditorConfig for VS Code
Permite que você compartilhe com seu time as configurações do VSCode. Isto permite que você tenha um ambiente padronizado entre o time.

4) ESLint
Integra o lint do Javascript no VS Code. Permite que você tenha um padrão de código mais inteligente.

5) Hasher
Permite que você gere hashs MD5, Bas64, URI encode e decode, html entitites encode e decode.

6) Identical Sublime Monokai C# theme and colorizer
Um tema identifico do Sublime Monokai para VSCode.

7) Live Server
Carrega um servidor web para testes direto em seu navegador

Live Server Demo VSCode

8) Material Icon Theme
Continuando a customização visual do VSCode tai um bom tema de icones ao estilo Material Design

9) Prettier
Padroniza o código fonte ajudando a identar e padronizar a estrutura de seus arquivos

10) Snippets da RocketSeat
O que é bom temos que compartilhar certo ? Os snippets da RocketSeat permite que você crie components, funções e classes de forma muito rápido baseado em padrões com atalhos.

Create React Native Component

11) Shortcuts
Sem dúvida uma extensão que eu não deixo faltar. Ele adiciona atalhos no rodapé do VSCode que te dá acesso rápido a uma quantidade interessante de recursos.

12) SSH FS
Com esta extensão eu literalmente mudei minha vida. Caso você tenha uma quantidade x de conexões a serem configuradas para acesso remoto via SSH esta extensão irá te ajudar e muito.

Workspace folder added

Configurações do VSCode

Você encontra aqui um exemplo de configuração do JSON de configuração do VSCode. Dentro deste arquivo você encontra configurações com comentários para que serve cada uma das configurações.

Caso tenha alguma dúvida só chamar nos comentários. Não esqueça também de assinar o canal para receber estas dicas em vídeo para ajudar o processo de aprendizado.

{
    "workbench.colorTheme": "Sublime Monokai",
    "sshfs.configs": [
        {
            "root": "/srv/apps/",
            "host": "localhost",
            "port": 2222,
            "username": "root",
            "password": "root",
            "name": "DefaultServer"
        },
    ],
    "workbench.iconTheme": "vscode-icons",
    "explorer.confirmDelete": false,
    "emmet.syntaxProfiles": {
        "javascript" : "jsx",
    },
    "emmet.includeLanguages": {
        "javascript" : "javascriptreact",
    },
    "emmet.optimizeStylesheetParsing": false,
    "emmet.triggerExpansionOnTab": true,
    "editor.minimap.enabled": false,
    "workbench.startupEditor": "newUntitledFile",
    "editor.formatOnSave": false,
    "editor.rulers": [80, 120],
    "editor.tabSize": 2,
    "terminal.integrated.fontSize": 12,
    // Auto move files
    "javascript.updateImportsOnFileMove.enabled": "never",
    // Enable source code tree breadcrumbs
    "breadcrumbs.enabled": true,
    // Editor functions suggest
    "editor.parameterHints.enabled": false,






}

Aproveito este post para convidar a assinar o canal no Youtube para ter acesso a todo o conteúdo exclusivo.
https://www.youtube.com/channel/UCLI_395Gs87LU0cdWWrfvVg

E qual a sua opinião a respeito deste assunto, utilize os comentários para dizer o que pensa deste assunto.

About the author

By Jaccon

Arquivos

Andre Jaccon Logo