Enhancing Coding Productivity with VS Code

Oct 21, 2024

VS Code Extensions for Enhancing Productivity

Introduction

  • Importance of a healthy coding environment for productivity and quality of work.
  • Focus on top VS Code extensions used by a full-time computer science student.

Requirements

  • A computer or laptop.
  • Internet connection.
  • Integrated Development Environment (IDE): VS Code.

Setting Up VS Code

  1. Download and install VS Code.
  2. Close the welcome page.

Key Extensions

1. Code Runner

  • Functionality: Compiles and runs code automatically.
  • Usage:
    • Search for "Code Runner" in the extensions section.
    • Install it (24.5 million downloads, 4.5 stars).
    • Test with a simple Java "Hello World" program.
  • Benefits: Streamlines the process of compiling and running code without using the terminal.

2. TabNine

  • Functionality: AI coding assistant that suggests code while you type.
  • Setup:
    • Install TabNine.
    • Sign up and authenticate using the token provided.
  • Usage:
    • Create a new file; suggestions will appear as you type.
    • Accept suggestions by pressing the Tab key or continue typing.

3. Live Server

  • Functionality: Allows real-time preview of web changes in the browser.
  • Usage:
    • Install Live Server.
    • Click "Go Live" to open your project in the browser.
  • Benefits: Automatically refreshes on file save for immediate feedback.

4. Excel Viewer

  • Functionality: View Excel spreadsheets within VS Code.
  • Usage:
    • Drag and drop an Excel file into VS Code after installing the extension.
  • Benefits: Visualizing data without switching applications.

5. Code Tour

  • Functionality: Create guided walkthroughs of your code.
  • Usage:
    • Install Code Tour and start recording tours for files.
  • Benefits: Useful for presentations and explaining code.

6. To-Do Highlights

  • Functionality: Highlights "to-do" comments in code.
  • Usage:
    • Use keywords "TODO" or "FIXME" for highlighting.
  • Benefits: Makes actionable items in code more visible.

7. Material Icons

  • Functionality: Enhances file icons for better aesthetics.
  • Usage:
    • Install Material Icons to change the appearance of files.
  • Benefits: Improves visual clarity in the project structure.

8. Draw.io

  • Functionality: Create UML diagrams directly in VS Code.
  • Usage:
    • Install Draw.io and create diagrams without switching apps.
  • Benefits: Visualize project structure easily.

9. Polar Code

  • Functionality: Generates high-quality code snippets for presentation.
  • Usage:
    • Install Polar Code and use it to create visually appealing code snippets.
  • Benefits: Perfect for sharing code in a polished format.

10. Code Spell Checker

  • Functionality: Identifies and corrects spelling errors in code.
  • Usage:
    • Install and it will underline spelling mistakes.
  • Benefits: Prevents errors before they occur during compilation.

11. Prettier

  • Functionality: Automatic code formatting for improved readability.
  • Setup:
    • Install Prettier and enable "format on save".
  • Benefits: Maintains a clean and organized code structure.

12. Vibrancy

  • Functionality: Adds a glass morphism aesthetic to VS Code.
  • Setup:
    • Install Vibrancy and revert to the default "dark plus" theme.
  • Benefits: Enhances the visual appeal of the IDE.

Conclusion

  • Importance of these extensions for optimizing coding workflow.
  • Encouragement to suggest additional extensions in comments.