VS Code Tips and Tricks

 

As a developer, having a solid grasp of essential tools and practices is crucial for efficient coding and project management. This VS Code Tips and Tricks cheat sheet serves as a valuable guideline to streamline your development tasks. Whether you're setting up your workspace, managing source control, debugging code, or utilizing extensions, understanding these key concepts will enhance your productivity and enable you to work more effectively. Familiarizing yourself with these tips will help you tackle projects with confidence and ease, allowing you to focus on what truly matters—building great software.

Take home points before starting:

Don't forget to activate the Auto-Save feature.

Set up separate windows for front-end and back-end projects.

Install must-have extensions, especially GitLens and a Live Server extension, to boost your development experience.

Utilize "Stash" if you need to shift to another branch.

Don't hesitate to follow the information flow for faster debugging.

1. Installation and Setup

• Download & Install: Visit the VS Code website to get the installer for your OS.
• Customize Your Environment: Go to File > Preferences > Settings to personalize VS Code.

You will likely need to customize your settings to conform to your company's coding standards, especially regarding tab indentation, which can often lead to inconsistencies. Senior developers mostly want it to be "2".

2. Project Management

• Open Projects in Separate Windows:
  
  
• Use File > Open Folder… for each project, or open a new window via File > New Window.

When managing a full-stack application, it's advisable to open the front-end and back-end projects in separate windows. This allows for better organization and easier navigation between the two parts of your application, making it more efficient to implement changes and troubleshoot issues in both the client and server code simultaneously.

3. Essential Extensions

• Boost Your Development with Extensions:
  
  
  • Access Extensions: View > Extensions or Ctrl+Shift+X.
    
    
  • Recommended Extensions:
    
    
    • GitLens: Enhance Git functionalities. This is very helpful especially for "source control". It provides easy-to-manage side-windows for utilizing source control.
    • Live Server: Real-time browser reload.
      
      
    • 
      
      
      Other Useful Ones:
      
      
    • Prettier: Maintain code consistency.
    • ESLint: JavaScript and TypeScript linting.
    • Debugger for Chrome: Debug web apps easily.
    • Path Intellisense: Auto-complete file paths.
    • Bracket Pair Colorizer: Color-code matching brackets.

4. Mastering Source Control

• Effective Source Control:
  
  
• Access Source Control: Click the Source Control icon or press Ctrl+Shift+G.
• Staging Changes: Use the + icon to stage files.
• Committing Changes: Write a message in the input box and press Ctrl+Enter.
  
  
• Branch Management:
  
  
• Save Changes: When you need to leave your current branch to work on another one, it's essential to save your changes first. Use Ctrl+Shift+G and then select Stash Changes to temporarily save your current work. This allows you to switch branches without losing any modifications.
• Change Branches: Click on the current branch name to switch to another branch.
• Apply Stash: When you return to the original branch, you can easily reapply your stashed changes. Use the command Git: Apply Stashed Changes from the Command Palette (Ctrl+Shift+P).
• Sync with Remote: Before creating a new branch, ensure you pull the latest changes from the main branch: Git: Pull.
  
  The process of stashing is particularly useful in emergencies when you need to quickly shift focus to another task, allowing you to manage your work efficiently without losing progress.
• 
  
  
  
  
  
• Auto Save Feature:
  
  
  
  
  
  
• To minimize the risk of losing changes, you can enable the Auto Save feature. Go to the menu and select File > Auto Save. This automatically saves your work at specified intervals, helping you maintain a continuous workflow.

5. Debugging Like a Pro

• Run and Debug Efficiently:
  
  
• Open the Debug view: View > Run or Ctrl+Shift+D.
• Set Breakpoints: Click in the gutter next to line numbers.
• Use the Variables Window: Inspect variable values during runtime.
• Call Stack & Watch: Monitor function calls and specific variables.

When debugging, it's important for developers not to hesitate in following the information flow step by step, as skipping these steps can make identifying and resolving issues significantly more challenging.

6. Terminal Usage

    For a more effective usage, you can open two terminals. Use one for starting the project, and the other for applying commands like changing branch etc.

7. Productivity Tips

• Keyboard Shortcuts:
  • Ctrl+P: Quickly open files.
  • Ctrl+Shift+F: Search across files.
  • F1: Access all commands via the Command Palette.
• File Explorer Tips: Utilize the Explorer view for efficient file and folder management.
• Custom Snippets: Create reusable code snippets for common tasks.
• Settings Sync: Keep your settings consistent across devices.

8. Code Formatting and Linting

• Automatic Formatting: Press Shift+Alt+F to format your document with Prettier or your selected formatter.
• Linting on Save: Set up ESLint to lint your code automatically on save.

9. Advanced Git Commands

• Git Command Shortcuts:
• git status: Check repository status.
• git add .: Stage all changes.
• git commit -m "Message": Commit changes with a message.
• git push: Upload changes to the remote repository.
  
  
• Most Used Commands:
• git branch: lists currently active branches
• git branch -d branch-name: deletes the branch. You should delete a branch after it is merged to the main branch by the developer or project manager responsible for the code, ensuring that all changes have been integrated and are no longer needed, which helps keep your repository clean and organized.
• git checkout -b new-branch: Create and switch to a new branch.
• git checkout existing-branch: Shift to another branch.

10. Quick Tips for a Better Workflow

• Multi-Cursor Editing: Hold Alt (or Option on Mac) and click to place multiple cursors.
• Zen Mode: For distraction-free coding, use View > Appearance > Zen Mode (Ctrl+K Z).
• Integrated Markdown Preview: Use the built-in markdown preview feature (Ctrl+K V) for instant markdown viewing.

11. Use Cases

• You changed a function's parameters. How can you find effected code parts to make related corrections?

           Answer: You don't have to search or go through all the project files for your function. "Problems" tab below shows all the errors throughout all the project. So, you can find all related problems to your change there.