Tiện ích mở rộng cho IDE của bạn là vô cùng quan trọng để tăng tốc công việc mà không làm giảm chất lượng đầu ra. Xem xét Visual Studio Code là IDE phổ biến nhất, dưới đây là 20 tiện ích mở rộng VSCode sẽ giúp bạn trở thành một nhà phát triển hiệu quả hơn. Những tiện ích này chủ yếu áp dụng cho nhà phát triển web, nhưng cũng có một số tiện ích đa năng sẽ hữu ích cho mọi người:
Dưới đây là danh sách các tiện ích mở rộng VSCode:
Settings Sync saves you a lot of time installing extensions across devices
Before you start installing extensions left and right, it's good to know of the existence of Settings Sync. It allows you to sync to GitHub almost everything you customize on VSCode, from settings to keyboard shortcuts to other VSCode extensions.
This way, you'll have access to your preferred IDE from whichever device you want, instead of having to program from a vanilla VSCode environment on new devices or having to manually set up everything again.
Live Server
Immediately see code changes reflected in the browser
This is the favorite VSCode extension of many software developers. Live Server launches a local development server with a live reload feature both for static and dynamic pages.
Every time you save your code, you'll instantly see the changes reflected in the browser. You'll be much faster at spotting errors and it's much easier to do some quick experiments with your code.
Remote - SSH
Use any remote machine with an SSH server
The Remote - SSH extension lets you use any remote machine with an SSH server as your development environment. This makes it much easier to develop and/or troubleshoot in a wide variety of scenarios.
You also don’t need any source code on your local machine, because the extension runs commands and other extensions directly on the remote machine.
Prettier
Spend less time formatting your code
Prettier is an opinionated code formatter that works particularly well if you have multiple people working on a single project, because the extension enforces a consistent style.
You can set it up so it formats your code every time you save it, significantly reducing the amount of time you need to spend formatting your code.
GitHub Copilot
AI is here to do the work for you
Some would call GitHub Copilot a revolution in computer programming, others would call it a useful tool. Whatever you think of it, the autocomplete AI is worth integrating into your workflow.
Trained on GPT-3, GitHub Copilot gives code suggestions, auto-completes code, and can even help write code when you provide a natural language comment.
Auto Rename Tag
Rename tags automatically
While VSCode inherently highlights matching tags and immediately adds closing tags whenever you type an opening tag, Auto Rename Tagautomatically renames tags that you change.
The extension works for HTML, XML, PHP, and JavaScript, and removes the need to change your tag names twice.
Edit: a few people in the comments have mentioned that Auto Rename Tag is quite buggy, so proceed with care.
GitLens
Supercharge your Git capabilities
GitLens supercharges the Git capabilities of Visual Studio Code. This is a powerful extension that allows you to see who, why, and how lines of code have changed over time (among lots of other features).
GitLens is a highly customizable extension. If you don’t like a particular setting, you can easily turn it off in settings.
Git History
Get a nice visual of the git log
Similar to GitLens, Git History is a VSCode extension that gives a visual of the git log. No longer should you look through git log in the terminal.
The extension is quite comprehensive. It allows you to compare branches, commits, and files across commits. You can also look up Github avatars, which is quite neat.
CSS Peek
Extend your HTML file to see your CSS code
This extension is invaluable for front-end developers. Inspired by a similar feature in the IDE Brackets, CSS Peek allows you to extend your HTML and ejs file to show CSS/SCSS/LESS code within the source code.
It also allows you to quickly jump to the right CSS code if you know the class or ID name.
JavaScript Code Snippets
More JS functionality
While VSCode includes built-in JS IntelliSense, JS Code Snippetsenhances that experience by adding a slew of import/export triggers, class helpers, and method triggers.
The extension supports JS, TypeScript, JS React, TS React, HTML, and Vue. In the VSCode Marketplace, code snippets for other flavors, such as Angular, are also readily available.
Peacock
Change the color of your VSCode instance
Here’s a cute one. Peacock allows you to change the color of your Visual Studio Code environment, so you can quickly identify which instance you’ve just switched to.
Colorize
See which colors you're using in your style guides
Sticking with colors, Colorize instantly visualizes CSS colors in your CSS/SASS/Less/... files. This makes it very easy to see at a glance which colors you’re using where.
indent-rainbow
More colors! indent-rainbow colorizes the indentation of your code, alternating colors at every step t make for a really nice rainbow. Especially helpful when writing code in Python, Nim, Yaml, and perhaps even filetypes that aren't very indentation-dependent.
Code Spell Checker
No more spelling mistakes
Although it isn't life-threateningly important, I prefer my code to have no spelling errors. Code Spell Checkerunderlines words that it doesn't recognize in its dictionary files.
The extension is available in many different languages and supports jargon such as medical terms.
Icon Fonts
Use icons!
Icon Fonts offers snippets for a variety of icon fonts, including the popular Font Awesome v5 icon pack.
For those of you not using VSCode, this package is also available for Atom and Sublime Text.
Turbo Console Log
Automatically create a meaningful log message
The Turbo Console Logextension automates the process of creating a meaningful log message. It makes debugging much easier, because you’ll have some useful console output to figure out what went wrong.
TODO Highlight
Immediately spot the TODOs in your code
I confess. I've been guilty of writing TODOs in my comments to then totally forget about them. TODO Highlightmakes them stand out much more.
You can toggle the highlights and can also list all the highlighted annotations and reveal them from the corresponding file.
vscode-icons
Wait, doesn't everyone love icons?
You wouldn't think icons make a big difference, but they really do (for me, at least). VSCode-iconsadds a splash of color and cute little icons to your IDE that I've come to love.
Regex Previewer
Create previews of your regular expressions
Regular expressions can be quite the puzzle to get right. Regex Previewergives you a side document that matches your regex.
The extension gives multiple examples to match, so it becomes much easier to quickly and accurately write a regex for a variety of use cases.
Bookmarks
Add bookmarks to your code
Although VSCode has line numbers, Bookmarksallows you to add bookmarks to your code, helping you quickly navigate and easily jump back and forth.
Additionally, it allows you to select regions of code between bookmarked code, which is quite useful for something like log file analysis.
