In today's article, I will introduce some extensions in Visual Studio Code that will help you improve work efficiency and code time when building web development projects.
Visual Studio Code is an open source and developed by Microsoft, so you can rest assured to use it because it is completely free and always updated with the latest versions. Not only that, it is also very suitable for developing large, complex projects and supports Git integration. This tool also provides extensions to help us write code faster, manage files efficiently...
If you want to learn more or download it, you can page Visual Studio Code.
Debugger for Chrome
Debugger for Chrome helps debug program code errors right in VS Code without use developer tools in Google Chrome. It also has many useful features such as setting breakpoints, displaying console...
JavaScript (ES6) code snippets
JavaScript (ES6) code snippets make quickly call the structure of a function or property... in js through the provided syntax. For example, when you type clg, it will automatically compile to console.log(object). This one you can refer to the annotation table in its settings page. In addition, it also supports many languages in the file extension such as TypeScript, JavaScript React, TypeScript React, Html and Vue.
Live Server
Live Server helps launch local servers quickly with live auto-reload for static and dynamic web pages. For example, when you change an information on an HTML page, it will automatically update without us having to press reload on the browser. It also has many options for user settings such as custom port number, default browser setting, SVG support, https, proxy...
Auto Close Tag
Auto Close Tag help you automatically close tags when you open tag in project. For example, when you typeit will automatically add . In addition, it also has support for many other languages such as XML, PHP, Vue, JavaScript, TypeScript, JSX, TSX... it also has some settings that make easy edit such as setting a non-automatic tag list dynamic close, use keyboard shortcuts to manually add closing tags...
Prettier - Code formatter
Prettier - Code formatter helps you to reformat your code automatically and create a common code style for the programming team through its own rules defined by the extension. It also supports a variety of languages such as JavaScript, TypeScript, Flow, JSX, JSON, HTML, Vue, Angular...
TODO Highlight
TODO Highlight helps you highlight important comments in your code so that later programmers or ourselves can understand what to note or what to do before using and coding. In addition, it also has a number of beautifully designed themes, supporting many languages such as javascript, html, css, php...
Auto Rename Tag
Auto Rename Tag helps to automatically rename both pairs of tags in HTML and XML. For example, when you change the name of the opening tag, the corresponding closing tag will also be automatically changed. You can see a detailed example in the Usages section.
Better Comments
Better Comments displays comments in separate categories, making it easier to categorize and visualize such as important announcements to highlight, warnings, to-dos... Also you can Customize to suit your purposes and preferences such as setting comment syntax, editing background color for comments.
ESLint
ESLint is a tool that analyzes the code in the program to find errors as well as the code that needs improvement. In addition, it also provides you with solutions to optimize or fix errors faster. You can also customize ESLint's parser to fit your purpose or project.
Beautify
Beautify is a utility that helps you reformat the way your code is displayed in a more beautiful way. It supports popular languages such as Javascript, JSON, CSS, Sass and HTML.
Bracket Pair Colorizer
Bracket Pair Colorizer is an extension that highlights the corresponding brackets in the code with each other using color. It helps you to easily detect missing brackets or have a visual look when there are too many nested brackets in the code.
Path Intellisense
Path Intellisense is an extension that helps you automatically perform filenames (autocomplete filenames) by suggesting paths every time you type the path to where the file is stored.
Import Cost
Import Cost makes it possible to easily check the size of imported files through the information displayed directly in the code when you import.
Code Time
Code Time helps you to calculate the time work on visual studio code. In addition, it also summarizes the time you spend on each project, the level of working with the code through the chart of the days of the week, showing the average value of time you work in a month...
CSS Peek
CSS Peek extension helps find the ids or classes of HTML tags in CSS files that contain those classes or attributes. In addition, it also allows you to go to those CSS files instantly.
Project Manager
Project Manager extension makes it easy to switch between projects in VS Code. It provides a sub-menu so you can store projects to work and switch back and forth quickly.
Browser Preview
Browser Preview displays the browser right on Visual Studio Code so you can see the results as well as debug the program more easily.
GitLens — Git supercharged
GitLens — Git supercharged is a utility that provides many useful features to help you work with Git better, such as displaying comments for each line of code about the commit developer, displaying detailed information about revisions code in File...
Polacode
Polacode is a utility that helps you take a picture of your code and save it right on your computer easily. In addition, you can also choose from pre-designed themes to help the code stand out and be more beautiful during the shooting process.
vscode-icons
vscode-icons is a utility we can set up many beautiful icons for Visual Studio Code.
Settings Sync
Settings Sync makes it easy for you to save the settings for Visual Studio Code on your computer on Github and use it for other machines easily, such as information about extensions, or settings that you need. set up... Now you can easily set up for many different machines without having to recall the extensions and settings that you have installed for VS Code.
Quokka
Quokka makes it possible for you to test each small piece of Javascript, TypeScript code and display it directly in VS Code without using console.log() to display it in the browser.
EditorConfig
EditorConfig is an extension that helps maintain code style consistency for multiple developers working on the same project. And each programmer can work on many different code editors such as VSCode, Atom, Notepad++... it all supports plugins on each platform that help programmers can read and edit style code one at a time.
Material Icon Theme
Material Icon Theme is a Material Design icon setup utility for Visual Studio Code.
Color Highlight
Color Highlight is a utility that helps you display colors for objects found on the page. For example many color codes that VS Code cannot display, this utility is a great choice for you.
REST Client
The REST Client allows you to send HTTP requests and view the results directly in Visual Studio Code.
Live Share
Live Share helps developers in the team share the code in the program in real time to easily edit and debug the program such as sharing debugging sessions, terminal instances, localhost web apps, voice calls...
Code Spell Checker
Code Spell Checker helps you check the spelling of the code in the program. However, it only supports languages such as English, Swedish, French, German...
Vetur
Vetur is an extension that provides useful tools for VueJS such as debug, error checking, Syntax-highlighting, snippet...
ES7 React/Redux/GraphQL/React-Native snippets
ES7 React/Redux/GraphQL/React-Native snippets is an extension that provides snippets for React, Redux and Graphql in JS/TS with ES7 syntax. You can refer to the syntax table in its main page!
Summary:
I hope the article will provide you with useful Visual Studio Code extensions for web development and design. If you have any questions, just send an email and I will respond as soon as possible. I hope you continue to support the site so that I can write more good articles. Have a nice day!