DEV Community

Kazi Abdur Rakib
Kazi Abdur Rakib

Posted on

install Visual Studio Code (VSCode) on Ubuntu

**To install Visual Studio Code (VSCode) on Ubuntu, you can follow these steps:

**
Option 1: Installing VSCode from the Ubuntu Software Center (Recommended)

  1. Open the Ubuntu Software Center or Software Center application from your applications menu.

  2. In the search bar, type "Visual Studio Code" and press Enter.

  3. Click on the "Visual Studio Code" search result.

  4. Click the "Install" button.

  5. After the installation is complete, you can launch VSCode from your applications menu.

Option 2: Installing VSCode via the Command Line

If you prefer to install VSCode via the command line, you can do so using the following steps:

  1. Open your terminal.

  2. Update the package list to make sure you have the latest information about available packages:

sudo apt update
Enter fullscreen mode Exit fullscreen mode
  1. Install VSCode by running the following command:
sudo apt install code
Enter fullscreen mode Exit fullscreen mode
  1. Once the installation is complete, you can launch VSCode from the terminal using the code command, or you can find it in your applications menu.

That's it! You've successfully installed Visual Studio Code on your Ubuntu system. You can now use VSCode for your coding and development tasks.

============================================
Visual Studio Code (VSCode) is a popular code editor for frontend development, and it offers a wide range of extensions to enhance your development experience. Here are some essential VSCode extensions for frontend development:

  1. Live Server: Launch a local development server for live preview and easy testing of HTML, CSS, and JavaScript. This extension automatically refreshes your browser when you save changes.

  2. ESLint: Integrates ESLint, a popular JavaScript linter, into VSCode to help you enforce coding standards and catch common errors in your code.

  3. Prettier: An opinionated code formatter that ensures consistent code formatting for HTML, CSS, and JavaScript. It's highly customizable and can be configured to auto-format your code on save.

  4. Auto Close Tag / Auto Rename Tag: These extensions make HTML and XML tag management more convenient by automatically closing and renaming tags when you type them.

  5. HTML CSS Support: Enhances HTML and CSS autocompletion with class and ID suggestions, as well as Go to Definition support for CSS.

  6. Debugger for Chrome: If you're working with JavaScript, especially in the context of a web application, this extension allows you to debug your code directly in Chrome from VSCode.

  7. Path Intellisense: Provides autocompletion for file paths, making it easier to reference your CSS, JavaScript, and image files.

  8. GitLens: An extension for Git version control that allows you to see Git blame annotations and more directly in your code.

  9. Color Highlight: Provides a visual representation of color codes in your CSS or HTML, making it easier to work with colors.

  10. JavaScript (ES6) code snippets: Offers a variety of ES6 code snippets for JavaScript, making it quicker to write common JavaScript code patterns.

  11. React / Redux / Vue / Angular Language Service: Depending on your frontend framework of choice, consider installing extensions tailored to your framework for enhanced language support and code completion.

  12. CSS Peek: Allows you to quickly jump from HTML to associated CSS definitions and vice versa.

  13. Live Sass Compiler: For SASS or SCSS development, this extension compiles your SASS/SCSS files to CSS in real-time as you save your code.

These are just a few popular extensions for frontend development in VSCode. Depending on your specific needs and the frameworks or libraries you're using, you may find additional extensions that can further streamline your workflow. You can browse and install extensions directly from the VSCode marketplace.

Top comments (0)