{"id":3315,"date":"2024-08-01T10:44:56","date_gmt":"2024-08-01T13:44:56","guid":{"rendered":"https:\/\/horatech.shop\/?p=3315"},"modified":"2024-11-29T14:19:39","modified_gmt":"2024-11-29T17:19:39","slug":"como-configurar-o-vs-code-para-programacao","status":"publish","type":"post","link":"https:\/\/horatech.shop\/en\/how-to-configure-vs-code-for-programming\/","title":{"rendered":"How to configure vs code for programming"},"content":{"rendered":"

Visual Studio Code (VS Code) is one of the most beloved code editors by developers. <\/p>\n\n\n\n

From installation to the configuration of keyboard themes, extensions and shortcuts, VS Code offers numerous options to enhance your productivity. <\/p>\n\n\n\n

This article will guide you by the essential steps to set up VS Code for programming.<\/p>\n\n\n\n

Installing the VS Code<\/h2>\n\n\n\n

Downloading the installer<\/h3>\n\n\n\n

To start configuring VS Code, the first step is to download the installer. <\/p>\n\n\n\n

The site will automatically identify its operating system and provide the right installer.<\/p>\n\n\n\n

\"\"
VSCODE CONFIGURATION<\/em><\/figcaption><\/figure>\n\n\n\n

Running the installation<\/h3>\n\n\n\n

Once the download is completed, click the downloaded file to start the installation. <\/p>\n\n\n\n

Do not forget to accept the terms of use.<\/p>\n\n\n\n

Configuring Path<\/h3>\n\n\n\n

In the final stage of the installation, check the option \"Add to Path\". code<\/code>. <\/p>\n\n\n\n

After marking this option, click \u201cInstall\u201d and when the installation is over, click \u201cFinish\u201d to complete.<\/p>\n\n\n\n

Ready!<\/p>\n\n\n\n

Choosing themes and color schemes<\/h2>\n\n\n\n

Accessing Preferences<\/h3>\n\n\n\n

To customize VS Code, go to preferences. FILE> Preferences> Color Theme<\/code> or simply type Preferences: Color Theme<\/code> in the command palette.<\/p>\n\n\n\n

Popular themes<\/h3>\n\n\n\n

There are many popular themes that can customize the editor to your taste.<\/p>\n\n\n\n

    \n
  • One Dark Pro<\/strong>: A very popular dark theme among developers.<\/li>\n\n\n\n
  • Atom One Light<\/strong>: Ideal for those who prefer a clear theme.<\/li>\n\n\n\n
  • Dracula<\/strong>: A dark theme developed by Zeno Rocha, a Brazilian.<\/li>\n\n\n\n
  • Material Icon Theme<\/strong>: In addition to color themes, you can change the file icons to the Material Design Style.<\/li>\n<\/ul>\n\n\n\n

    Personalizing your theme<\/h3>\n\n\n\n

    If none of the standard themes please you, you can customize your own theme. FILE> Preferences> Settings<\/code> and look for Workbench.colorCustomizations<\/code>. <\/p>\n\n\n\n

    Here you can adjust the colors of different elements of the VS Code interface.<\/p>\n\n\n\n

    Tip<\/strong>: You can add color customizations to the title and status bars within the section Cololustomizations<\/code>.<\/p>\n\n\n\n

    With these tips, you can make VS code your way and make the program even more enjoyable!<\/p>\n\n\n\n

    Installing essential extensions<\/h2>\n\n\n\n
    \"\"
    essential extensions<\/em><\/figcaption><\/figure>\n\n\n\n

    Exploring the marketplace<\/h3>\n\n\n\n

    To install extensions on VS Code, visit the Marketplace.<\/p>\n\n\n\n

      \n
    1. Open the vs Code.<\/li>\n\n\n\n
    2. Click on the extensions icon in the left sidebar or press Ctrl+Shift+X<\/code>.<\/li>\n\n\n\n
    3. Use the search bar to find the extensions you want.<\/li>\n\n\n\n
    4. Click on Install<\/code> To add the extension to your VS Code.<\/li>\n<\/ol>\n\n\n\n

      Recommended extensions<\/h3>\n\n\n\n

      Here are some extensions that can greatly improve your productivity:<\/p>\n\n\n\n

        \n
      • Auto Rename Tag<\/strong>: Automatically rename the corresponding HTML tags when you change one of them.<\/li>\n\n\n\n
      • Highlight Color<\/strong>: Highlights the colors in your CSS code, making it easier to view the colors used.<\/li>\n\n\n\n
      • Live Server<\/strong>: Creates a local server that automatically updates your browser page whenever you save a file.<\/li>\n\n\n\n
      • Prettier<\/strong>: Format your code automatically, ensuring a consistent style.<\/li>\n\n\n\n
      • Eslint<\/strong>: Analyzes your JavaScript code in search of errors and style problems.<\/li>\n\n\n\n
      • Gitlens<\/strong>: Improves GIT integration into the VS Code, showing detailed information about commits and authors.<\/li>\n<\/ul>\n\n\n\n

        Managing your extensions<\/h3>\n\n\n\n

        After installing some extensions, you may want to manage them.<\/p>\n\n\n\n

          \n
        1. Open the extension panel (Ctrl+Shift+X<\/code>).<\/li>\n\n\n\n
        2. Click the gear icon next to the extension you want to manage.<\/li>\n\n\n\n
        3. You can disable, uninstall or configure the extension as needed.<\/li>\n<\/ol>\n\n\n\n

          Remember<\/strong>: Less is more.<\/p>\n\n\n\n

          Configuring code formatting<\/h2>\n\n\n\n

          Adjusting formatting preferences<\/h3>\n\n\n\n

          You can adjust your code formatting preferences on VS Code. Ctrl (CMD) +,<\/code> And look for \"formatting when saving\". <\/p>\n\n\n\n

          Activate this option so that the code is automatically formatted whenever you save a file.<\/p>\n\n\n\n

          Formatting when saving<\/h3>\n\n\n\n

          One of the most useful features of VS Code is automatic formatting when saving. <\/p>\n\n\n\n

          To activate this option, add the following line to your file settings.json<\/code>:<\/p>\n\n\n\n

          {<\/code><\/pre>\n\n\n\n
          Using Prettier and other tools<\/h3>\n\n\n\n
          Prettier is a popular code formatting tool.<\/p>\n\n\n\n
            \n
          1. Install the Prettier Extension on VS Code.<\/li>\n\n\n\n
          2. Add the prettier settings to your settings.json<\/code>:<\/li>\n<\/ol>\n\n\n\n
            {<\/code><\/pre>\n\n\n\n
            Now, every time you save a file, Prettier will form the code automatically.<\/p>\n\n\n\n
            Maintaining well -formatted code not only improves readability, but also helps to avoid unnecessary errors. <\/p>\n\n\n\n
            Try different tools and find the one that best fits your workflow.<\/p>\n\n\n\n
            Personalizing keyboard shortcuts<\/h2>\n\n\n\n
            Accessing shortcut settings<\/h3>\n\n\n\n
            To customize your keyboard shortcuts on VS Code, go to the command palette pressing Ctrl + Shift + P<\/code> and type Preferences: Open Keyboard Shortcuts<\/code>. <\/p>\n\n\n\n
            This will open a new tab where you can see and modify all available shortcuts.<\/p>\n\n\n\n
            Creating new shortcuts<\/h3>\n\n\n\n
            Creating new shortcuts is quite simple. <\/p>\n\n\n\n
            Remember to choose combinations that do not conflict with other important commands.<\/p>\n\n\n\n
            Importing and exporting settings<\/h3>\n\n\n\n
            If you use VS Code in different machines, it may be useful to export your shortcut settings. F1> Preferences: Open Settings (JSON)<\/code> and copy the desired settings. <\/p>\n\n\n\n
            To import, just paste these settings into the file settings.json<\/code> of the new machine.<\/p>\n\n\n\n
            Customizing your keyboard shortcuts can greatly increase your productivity, allowing you to work more efficiently and comfortably.<\/p>\n\n\n\n
            Integrating with git<\/h2>\n\n\n\n
            Configuring Git in VS Code<\/h3>\n\n\n\n
            Visual Studio Code has native integration with version control systems like Git. <\/p>\n\n\n\n
            For starters, open the \u201cSource Control\u201d panel on the left side or use the commands on the lower status bar. <\/p>\n\n\n\n
            You can initialize a Git repository, perform Commites, Push and Pull, and view and manage changes directly in the editor.<\/p>\n\n\n\n
              \n
            • Initialize a git repository<\/strong>: Click the Git icon in the sidebar and then the repository startup button.<\/li>\n\n\n\n
            • Add files to Commit<\/strong>: Mouse over the modified files and click \u201cStage\u201d to add them to Commit.<\/li>\n\n\n\n
            • Commit Commit<\/strong>: Click \u201cCommit Staged\u201d to confirm the changes.<\/li>\n\n\n\n
            • Push for the remote repository<\/strong>: Use the command git push<\/code> in the integrated terminal or through the graphic interface.<\/li>\n<\/ul>\n\n\n\n
              Using Gitlens<\/h3>\n\n\n\n
              Gitlens is a powerful extension that improves GIT integration into the VS Code.<\/p>\n\n\n\n
              To install Gitlens:<\/p>\n\n\n\n
                \n
              1. Go to the VS Code extension tab.<\/li>\n\n\n\n
              2. Look for gitlens and click Install.<\/li>\n\n\n\n
              3. After installation, explore the new features available on the source control panel.<\/li>\n<\/ol>\n\n\n\n
                Performing Commites and Push<\/h3>\n\n\n\n
                To perform Commites and push on VS Code:<\/p>\n\n\n\n
                  \n
                1. Make Changes in Code: Edit your files normally.<\/li>\n\n\n\n
                2. Add the changes to the Stage: In the source control panel, click \u201cStage All\u201d to add all changes.<\/li>\n\n\n\n
                3. Write a message from Commit: In the message field, describe the changes made.<\/li>\n\n\n\n
                4. Commit Commit: Click on the check icon to confirm.<\/li>\n\n\n\n
                5. Send the changes to the remote repository: use the command git push<\/code> In the integrated terminal or click the push button on the graphic interface.<\/li>\n<\/ol>\n\n\n\n
                  Integrating GIT with VS Code facilitates version control greatly, allowing you to manage your code efficiently and organized, all in one place.<\/p>\n\n\n\n
                  Using the integrated terminal<\/h2>\n\n\n\n
                  \"\"
                  Using the terminal<\/em><\/figcaption><\/figure>\n\n\n\n
                  Opening the terminal<\/h3>\n\n\n\n
                  To open the VS Code integrated terminal, use the shortcut `ctrl + \\<\/p>\n\n\n\n
                  (Windows\/Linux) or<\/code>Cmd + `(MAC).<\/p>\n\n\n\n
                  Sailing and running commands<\/h3>\n\n\n\n
                  The integrated terminal works like any other terminal.<\/p>\n\n\n\n
                    \n
                  • CD<\/code> to change directory.<\/li>\n\n\n\n
                  • LS<\/code> or dir<\/code> To list the files and directories.<\/li>\n\n\n\n
                  • NPM Install<\/code> To install facilities of a Node.js. project.<\/li>\n\n\n\n
                  • python script.py<\/code> To run a python script.<\/li>\n<\/ul>\n\n\n\n
                    The integrated terminal allows you to have more control over your development environment without changing between different windows or applications.<\/p>\n\n\n\n
                    Conclusion<\/h2>\n\n\n\n
                    Setting Visual Studio Code for programming is a worthwhile process, as the editor offers a wide range of features and customization options. <\/p>\n\n\n\n
                    From installation to the configuration of themes, extensions and keyboard shortcuts, each step contributes to a more productive and pleasant work environment. <\/p>\n\n\n\n
                    Enjoy the tips and turn VS Code into your main ally when programming!<\/p>","protected":false},"excerpt":{"rendered":"
                    O Visual Studio Code (VS Code) \u00e9 um dos editores de c\u00f3digo mais queridos pelos desenvolvedores. Sua alta personaliza\u00e7\u00e3o permite que voc\u00ea adapte o ambiente de desenvolvimento exatamente \u00e0s suas necessidades. Desde a instala\u00e7\u00e3o at\u00e9 a configura\u00e7\u00e3o de temas, extens\u00f5es e atalhos de teclado, o VS Code oferece in\u00fameras op\u00e7\u00f5es para potencializar sua produtividade. Este […]<\/p>\n","protected":false},"author":2,"featured_media":3316,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-3315","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programacao"],"blocksy_meta":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/horatech.shop\/wp-content\/uploads\/2024\/09\/Configuracao-do-VSCode.webp?fit=1200%2C900&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/horatech.shop\/en\/wp-json\/wp\/v2\/posts\/3315","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/horatech.shop\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/horatech.shop\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/horatech.shop\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/horatech.shop\/en\/wp-json\/wp\/v2\/comments?post=3315"}],"version-history":[{"count":3,"href":"https:\/\/horatech.shop\/en\/wp-json\/wp\/v2\/posts\/3315\/revisions"}],"predecessor-version":[{"id":3801,"href":"https:\/\/horatech.shop\/en\/wp-json\/wp\/v2\/posts\/3315\/revisions\/3801"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/horatech.shop\/en\/wp-json\/wp\/v2\/media\/3316"}],"wp:attachment":[{"href":"https:\/\/horatech.shop\/en\/wp-json\/wp\/v2\/media?parent=3315"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/horatech.shop\/en\/wp-json\/wp\/v2\/categories?post=3315"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/horatech.shop\/en\/wp-json\/wp\/v2\/tags?post=3315"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}