VS Code Practical Guide: Essential Skills and Tool Recommendations for Efficient Developers

Visual Studio Code (VS Code), as a free, open-source, cross-platform code editor, is deeply loved by developers. It has powerful features, a rich extension ecosystem, and a simple and easy-to-use interface. This article will combine recent discussions on X/Twitter to summarize VS Code's practical skills and tool recommendations to help you improve development efficiency.

What is the Charm of VS Code?

From the discussions on X/Twitter, we can see the enthusiasm of developers for VS Code. @@freeCodeCamp has repeatedly mentioned the popularity and free nature of VS Code, emphasizing the rich features it provides. @@chomado shared her favorite editor and recommended extension functions for front-end engineers.

In summary, the main advantages of VS Code include:

• Free and Open Source: Anyone can use it for free and participate in community development.
• Cross-Platform: Supports multiple operating systems such as Windows, macOS, and Linux.
• Lightweight: Fast startup speed and low resource consumption.
• Powerful Extension Ecosystem: By installing extensions, you can enhance the functionality of VS Code and meet various development needs.
• Built-in Debugging Tools: Supports debugging of multiple programming languages, making it easy for developers to quickly locate and solve problems.
• Integrated Git: Convenient for developers to perform version control.
• Intelligent Prompt: Provides code completion, syntax checking and other functions to improve coding efficiency.

VS Code Practical Skills: Improve Your Development Efficiency

1. Master Keyboard Shortcuts: VS Code provides a wealth of keyboard shortcuts, and mastering these shortcuts can greatly improve development efficiency. Here are some commonly used keyboard shortcuts:

   • Ctrl+Shift+P (Windows/Linux) / Cmd+Shift+P (macOS): Open the command palette. This is one of the core functions of VS Code, and you can perform various operations through the command palette.
   • Ctrl+P (Windows/Linux) / Cmd+P (macOS): Quickly open a file.
   • Ctrl+Shift+O (Windows/Linux) / Cmd+Shift+O (macOS): Quickly jump to a symbol (function, class, etc.).
   • Ctrl+Shift+F (Windows/Linux) / Cmd+Shift+F (macOS): Global search.
   • Ctrl+D (Windows/Linux) / Cmd+D (macOS): Select the next match. You can edit multiple identical texts at the same time.
   • Alt+Shift+Down/Up (Windows/Linux) / Option+Shift+Down/Up (macOS): Copy the current line to the next line/previous line.
   • Ctrl+/ (Windows/Linux) / Cmd+/ (macOS): Comment/uncomment the current line or selected code block.
   • Alt+Up/Down (Windows/Linux) / Option+Up/Down (macOS): Move the current line or selected code block up and down.
   • Ctrl+K Ctrl+S: Open the keyboard shortcut settings interface, where you can view and customize keyboard shortcuts.

2. Make Good Use of the Command Palette: Open the command palette through Ctrl+Shift+P / Cmd+Shift+P to perform various operations, such as:

   • Settings: Open the settings interface.

   • Extensions: Install Extension: Install an extension.

   • Git: Commit: Commit Git changes.

   • Format Document: Format the current document.

   • Go to Symbol in Workspace: Quickly jump to a symbol within the workspace.3. Custom Settings: VS Code allows users to customize various settings, including themes, fonts, indentation, and more. You can open the settings interface via File -> Preferences -> Settings, or directly edit the settings.json file.

   • Theme: Choosing a theme you like can improve coding comfort.

   • Font: Choosing a suitable font can improve code readability. It is recommended to use a monospace font, such as Fira Code, JetBrains Mono, etc.

   • Indentation: Set the indentation according to project specifications, you can use spaces or Tab keys.

   • Auto Save: Turning on the auto-save feature can prevent code loss due to forgetting to save.

3. Using Code Snippets: Code snippets can help you quickly insert commonly used code blocks. VS Code has some built-in code snippets, and you can also customize code snippets.

   • Open the command palette, enter Preferences: Configure User Snippets, select the language you want to edit, and then you can edit the code snippets.
   • For example, you can create a clog code snippet for JavaScript to quickly insert console.log():

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

4. Using Multi-Cursor Editing: Hold down the Alt (Windows/Linux) / Option (macOS) key, and then click the mouse to create cursors in multiple locations and edit multiple lines of code simultaneously. You can also use Ctrl+D / Cmd+D to select the next match for multi-cursor editing.

5. Split Editor: You can split the editor into multiple windows to view and edit multiple files at the same time. You can use the View -> Editor Layout -> Split Editor command to split the editor.

6. Remote Development: VS Code provides the Remote Development extension, which allows you to edit code on a remote server locally. This is very useful for developing server-side applications.

7. Using VS Code in the Browser: As @@Prathkum pointed out, by visiting vscode.dev, you can use VS Code directly in the browser, which is convenient and fast. This is useful for temporary editing or working on devices without VS Code installed. @@CompuIves's work further enhances this by successfully running VS Code directly in the browser and connecting to the CodeSandbox API.

VS Code Tool Recommendations: Build Your Exclusive IDE

The power of VS Code lies in its rich extension ecosystem. Here are some commonly used extension recommendations:

• Prettier: Code formatting tool that can automatically format code and maintain consistent code style.

  ext install esbenp.prettier-vscode
  

• ESLint: JavaScript code checking tool that can check for errors and potential problems in the code.

  ext install dbaeumer.vscode-eslint
  ```*   **EditorConfig for VS Code:** A tool for maintaining consistent code styles across different editors.
  
  ```shell
  ext install EditorConfig.EditorConfig
  

• Live Server: Quickly launch a local server for easy front-end code debugging. @@ThreatSynop mentions a security vulnerability in Live Server, reminding developers to pay attention to security when using the extension.

  ext install ritwickdey.LiveServer
  

• Code Runner: Supports running multiple programming languages, making it easy to quickly test code snippets. Similarly, @@ThreatSynop also points out a security vulnerability in Code Runner.

  ext install formulahendry.code-runner
  

• GitLens: An extension that enhances Git functionality, allowing you to view code commit history, author information, etc.

  ext install eamodio.gitlens
  

• Bracket Pair Colorizer: Colors matching brackets to make it easier to view code structure.

  ext install CoenraadS.bracket-pair-colorizer-2
  

• IntelliCode: (Provided by Microsoft) AI-assisted code completion that provides more intelligent code suggestions based on context.

  ext install visualstudioexptteam.vscodeintellicode
  

• VS Code Copilot: (Provided by GitHub, paid) An AI code assistant that can generate code snippets, functions, and even entire files based on your code. @@aadhilkh mentions the cost-effectiveness of using VS Code Copilot.

• Markdown Preview Enhanced: A better Markdown preview plugin. @@ThreatSynop also points out that this plugin has security issues that need attention.

  ext install shd101wyy.markdown-preview-enhanced
  

• Remote Development Extension Pack: Includes extensions such as SSH, Containers, and WSL for easy remote development.

About LLM and VS Code Integration

There have also been some discussions on X/Twitter about the integration of LLM and VS Code. @@akshay_pachaar shared a method for training LLM in VS Code. @@MacopeninSUTABA mentioned the integration of Anthropic's AI coding agent "Claude Code" with VS Code. These all indicate that AI will play an increasingly important role in future development.

Security Tips

As @@ThreatSynop mentioned, some VS Code extensions have security vulnerabilities that can lead to file theft and remote code execution. Therefore, when using extensions, pay attention to the following:

• Choose official or reputable extensions.
• Update extensions regularly.
• Carefully read the extension's permission instructions.
• Install code checking tools, such as ESLint, which can help you find potential problems in your code.
• Pay attention to security announcements from VS Code and extensions, and fix vulnerabilities in a timely manner.## Summary

VS Code, as a powerful code editor, has many practical tips and a rich extension ecosystem that can help developers improve development efficiency. By mastering shortcuts, customizing settings, using code snippets, and installing appropriate extensions, you can turn VS Code into your own exclusive IDE. At the same time, pay attention to security issues, choose official or reputable extensions, and update extensions regularly. Hope this article helps you!