Visual Studio Code Settings Guide

Visual Studio Code (VSCODE) is a light but powerful source code editor that runs on your desk. It comes with incorporated support for JavaScript, TypeScript and Node.js and has a rich extensions ecosystem for other languages ​​and tools.

table of Contents

1. Facility
2. First launch and general interface information
3. Essential configuration
4. Extensions
5. Work space configuration
6. Keyboard shortcuts
7. Integrated terminal
8. Source control integration
9. Depuration
10. Additional resources

Facility

Windows

1. Visit the VSCODE download page
2. Click the Download Windows button
3. Execute the installer (.exe file)
4. Follow the installation wizard
5. Verify the options for:
   • Create a desktop icon
   • Add “Open with code” to the Windows Explorer contextual menu
   • Record the code as editor for compatible files

Macosa

1. Visit the VSCODE download page
2. Click the Download Mac button
3. Open the .zip downloaded file
4. Visual Studio Code.app drag to the application folder
5. Optional: Add vScode to your dock

Linux

1. Visit the VSCODE download page
2. Choose the appropriate package for distribution (.deb, .rpm, etc.)
3. For Debian/Ubuntu:

1. For Red Hat/Fedora:

First launch and general interface information

When you open vscode for the first time, you will see:

1. Welcome page: It contains fast links to common commands and recent projects
2. Activity bar: Left side bar with icons for different views:
   • Explorer: file browser
   • Search: search and replace
   • Origin Control: GIT Integration
   • Execute and purify: purification panel
   • Extensions: Manage extensions
3. Status bar: Lower bar that shows information about the current file and editor
4. Editor area: Main coding area (you can divide in multiple editors)
5. Panel: Lower panel that can show terminal, exit, problems, etc.

Essential configuration

Access configuration by:

• Windows/Linux: File> Preferences> Configuration
• MacOS: Code> Preferences> Configuration

Recommended configuration to consider:

1. Issue:
   • File> Preferences> Color topic (or Ctrl+K Ctrl+T)
   • Popular Options: Dark+, Light+, Monokai, Solarized
2. Fountain:

1. Auto Save:

1. Tab size:

1. Format:

Extensions

VScode's power comes from its extensions. To install extensions:

1. Click on the extensions icon in the activity bar (or press Ctrl+Shift+x)
2. Search for extensions by name
3. Click Install

Essential extensions by category:

General

• Nice – code formatter: Consistent code format

• ESLINT: Javascript fluff

• Editorconfig: Maintain consistent coding styles

Languages

• Piton: Full Python Support

• C/C ++: C and C ++ Intellisense, purification

• Java extension package: Java Development Tools

• JavaScript (ES6) Code fragments: Fragments for JavaScript

Topics

• Material topic: Popular theme package

• A Dark Pro: Atom's iconic theme

Productivity

• Gitlens: GIT supercharging capabilities

• Share live: Collaborative edition

• Intellisense path: Autocomplete File Names

Work space configuration

A VSCODE work space represents one or more folders that open in an editor's window.

1. Open a folder: File> Open folder (Ctrl+K Ctrl+O)
2. Save work space: File> Save the work space as …

1. Work space configuration: Create a .vscode folder in your project with:
   • Settings.json: Specific project configuration
   • Launch.json: purification configurations
   • tasks.json: Build task settings
   • Extensions. JSON: Recommended extensions

Configuration example. Json for a Javascript project:

Keyboard shortcuts

VScode has many keyboard shortcuts. Here are the most essential:

• Ctrl+p: Open fast, go to the file
• Ctrl+Shift+p: Show command palette
• Ctrl+Space: Activation suggestion
• F12: Go to definition
• ALT+F12: View definition
• SHIFT+ALT+F.: Format document
• F5: Start debugging
• Ctrl+`: Lever terminal
• Ctrl+b: Lever sidebar
• Ctrl+/: Alternate line comment
• Ctrl+K Ctrl+c: Add line comment
• Ctrl+K Ctrl+U.: Delete the line comment

Integrated terminal

VSCODE includes an integrated terminal:

1. Open terminal: See> Terminal
2. Multiple terminals: Click the MORE icon
3. Change terminals: Use the drop -down menu

Source control integration

VScode has built -in git support:

1. Initialize repository: Click on the Origin Control icon and “initialize the repository”
2. Stage changes: Click on the + Next to the modified files
3. Confirm changes: Enter a message and press CTRL+ENTER
4. Push/throw: Use the ellipsis menu (…) for additional git commands
5. Visual difference: Click on a modified file to see the changes

Depuration

Configure purification for your project:

1. Create a launch configuration:
   • Click on the Execute and Curs icon
   • Click “Create an Elunch.json file” file
   • Select your environment
2. Establish interruption points: Click on the gutter next to the line numbers
3. Start debugging: Press F5
4. Use purification controls: Continue, turn it around, go, go out
5. See variables: Add expressions to the clock panel

Additional resources

Nikhil is an internal consultant at Marktechpost. He is looking for a double degree integrated into materials at the Indian Institute of technology, Kharagpur. Nikhil is an ai/ML enthusiast who is always investigating applications in fields such as biomaterials and biomedical sciences. With a solid experience in material science, it is exploring new advances and creating opportunities to contribute.