Introduction to the article
This article introduces the latest, most useful, and most powerful vscode featured extensions. Easy-to-use extensions are like magic weapons, helping programmers to be invincible and invincible in the world of code!
about the author
Produced by Suiyi, it must be a high-quality product, and only write in-depth and high-quality dry articles!
Use some tags to briefly introduce the characteristics of the author of this article.
- Freelancer (currently living in rural areas)
- Independent developers (operating and developing their own productivity tools)
- Idealist (refactoring maniac, every code must have a soul)
- Paranoia and obsessive-compulsive disorder (ahhhhh)
- Author of online novels (eunuch in 2015, will start writing novels again in 2023)
- Open source wheel master (since 2019, created dozens of open source projects that are continuously updated and maintained)
- web3 learner (next generation Internet, infinite charm)
- Code engraving craftsman (writing code is like carving a work, between an inch and a millimetre, it is authentic)
social connection
- WeChat : c91374286
- Official account : Chen Suiyi
- Blog : https://chensuiyi.com
writing philosophy
Note that this article is not finished.
So, why are the unfinished articles sent out? Because, the author's writing philosophy believes that a good high-quality essay is not written in one go. With the accumulation of time and experience, the article should be revised and adjusted from time to time, improved and updated, and constantly polished to the best. Therefore, if you need to view the latest content of this article, please follow or contact the author to get the latest high-quality content. However, updating and maintaining articles on dozens of article platforms and technical communities requires a lot of time and energy, and the author is a freelancer with no fixed income, and some high-quality articles will be charged. Dear readers, Follow your own wishes and view articles that require payment.
Copyright Information
- All articles of this author are original, not specifically stated as reprintable types, please do not reprint, infringement must be investigated.
- Reprint type of this article: You can reprint at will, and keep the original source.
whether to pay
no
other instructions
- For feedback, plug-in recommendations, etc., please contact the author
- The recommendation index is only the usefulness of the author's personal opinion, and does not represent the quality and function of the plug-in itself
writing background
Vscode is basically the only editor currently used by the author, and the law of true fragrance is fully reflected in this editor.
In order to maximize the real strength of vscode, driven by the author's tenth level of obsessive-compulsive disorder, it took half a day to browse and filter all the plugins with more than 1000 vscode extension downloads, and put the ones that I think are powerful and easy to use Plug-ins, selected and shared with people who are destined.
Article text
Note: The following information is as of the date of publication of this article
GitLens (git operation plugin)
Recommended index: ⭐⭐⭐⭐⭐
| index | content |
|---|---|
| author | GitKraken |
| Function | Everything git needs, it has |
| Recommended reason | Git is the cornerstone of modern software collaboration, and its importance is self-evident. This plugin will infinitely enhance the git operation in vscode! |
| extension address | GitLens (git operation plugin) |
Eva Theme (vscode theme)
Recommended index: ⭐⭐⭐⭐⭐
| index | content |
|---|---|
| author | fisheva |
| Function | Adjust and optimize vscode color matching |
| Recommended reason | There are many other vscode color themes, but I love it alone. If you don’t believe me, try it. |
| extension address | Eva Theme (vscode theme) |
Markdown All in One (markdown operation enhancement)
Recommended index: ⭐⭐⭐⭐⭐
| index | content |
|---|---|
| author | Yu Zhang |
| Function | Markdown operation enhancement |
| Recommended reason | The markdown operation that comes with vscode is relatively simple, which greatly improves the markdown operation experience and automation |
| extension address | Markdown All in One (markdown operation enhancement) |
Markdown Preview Enhanced (markdown preview enhanced)
Recommended index: ⭐⭐⭐⭐⭐
| index | content |
|---|---|
| author | Yiyi Wang |
| Function | markdown preview enhancement |
| Recommended reason | Switch markdown preview theme, export to pdf, html and other format files, upload pictures with mouse, etc. |
| extension address | Markdown Preview Enhanced (markdown preview enhanced) |
Markdown Image (markdown image upload)
Recommended index: ⭐⭐⭐⭐⭐
| index | content |
|---|---|
| author | Hancel.Lin |
| Function | One-click paste pictures from the pasteboard to local directories, Qiniu cloud storage, SM.MS, etc. |
| Recommended reason | The way of manually creating a directory, setting the image name, and filling in the markdown image path is too primitive! Programmers use this! |
| extension address | Markdown Image (markdown image upload) |
The image address in the screenshot below is automatically generated by this plugin
Paste from Web (markdown image download)
Recommended index: ⭐⭐⭐
| index | content |
|---|---|
| author | BishopCodes |
| Function | Download the online image address to the local directory |
| Recommended reason | Solved the problem of downloading markdown images, the only shortcoming is that the function of custom download directory is not powerful enough. But follow me, I'll make a move |
| extension address | Paste from Web (markdown image download) |
Markdown Paste (markdown image download)
Recommended index: ⭐⭐⭐
| index | content |
|---|---|
| author | telesoho |
| Function | Download all online images in markdown files to local with one click |
| Recommended reason | Solved the problem of markdown multi-image download, the only shortcoming is that the function of custom download directory is not powerful enough. But follow me, I'll make a move |
| extension address | Markdown Paste (markdown image download) |
Image preview
Recommended index: ⭐⭐⭐⭐⭐
| index | content |
|---|---|
| author | Tamás Kiss |
| Function | On the left side of the code line number on the left side of the editor, preview the image path of the line |
| Recommended reason | Some small pictures and icons are previewed on the left side, so you can see at a glance whether the pictures are correct |
| extension address | Image preview |
filesize (file size)
Recommended index: ⭐⭐⭐
| index | content |
|---|---|
| author | Matheus Kautzmann |
| Function | Display the size of the current file in the status bar at the bottom of the editor |
| Recommended reason | When you need to check the file size, it is still very useful, but it is not a necessary plug-in, three stars |
| extension address | filesize (file size) |
Git Graph (git commit graphical display)
Recommended index: ⭐⭐⭐⭐⭐
| index | content |
|---|---|
| author | let's go |
| Function | Visually display submission information |
| Recommended reason | Make up for the unintuitive problem of gitlens commit visualization |
| extension address | Git Graph (git commit graphical display) |
CamelCase translation assistant (variable name translation)
Recommended index: ⭐⭐⭐⭐⭐
| index | content |
|---|---|
| author | let's go |
| Function | Confused about how to get the variable? One-click translation of Chinese into commonly used formats such as camel case |
| Recommended reason | It's so hard to think of variable names! It is even more difficult to think of English variable names! Just use this! |
| extension address | CamelCase translation assistant (variable name translation) |
Alias path jump (code path jump)
Recommended index: ⭐⭐⭐⭐⭐
| index | content |
|---|---|
| author | lihuiwang |
| Function | Alias path jump plug-in, supports any project, can freely configure mapping rules, freely configure default suffix list |
| Recommended reason | For imported methods, functions, and components, you need to view their code implementation. With this plug-in, you can easily customize the jump settings according to the specific structure of the project |
| extension address | Alias path jump (code path jump) |
Bookmarks
Recommended index: ⭐⭐⭐⭐⭐
| index | content |
|---|---|
| author | Alessandro Fragnani |
| Function | Bookmark the current line, then, jump here |
| Recommended reason | Sometimes when writing a function, you need to operate in different positions on the current page, and mark a few tags to jump to each other, which can reduce the inefficient operation of mouse scrolling |
| extension address | Bookmarks |
Browse Lite (browser in vscode)
Recommended index: ⭐⭐⭐⭐⭐
| index | content |
|---|---|
| author | Anthony Fu |
| Function | In vscode, browse pages and projects |
| Recommended reason | Simple, lightweight, convenient, and can be debugged, produced by Anthony, is also a boutique |
| extension address | Browse Lite (browser in vscode) |
Change Case (modify variable name style)
Recommended index: ⭐⭐⭐⭐⭐
| index | content |
|---|---|
| author | hjdarnel |
| Function | One-click adjustment of variable name style |
| Recommended reason | There are so many plugins like this! Currently I use this one because it is newer than the others. The flaw is that it does not support right mouse button operation. Don’t worry, I will take action |
| extension address | Change Case (modify variable name style) |
Comment Divider
Recommended index: ⭐⭐⭐
| index | content |
|---|---|
| author | stackbreak |
| Function | One-click generation of divider annotations |
| Recommended reason | Still manually animating dividers? Programmers, don't do such stupid things! Go ahead and check this out. |
| extension address | Comment Divider |
DotENV (environment variable syntax highlighting)
Recommended index: ⭐⭐⭐
| index | content |
|---|---|
| author | mikestead |
| Function | Provide syntax highlighting for dotenv files |
| Recommended reason | How should I put it, it is optional, but, like that sentence, something is better than nothing. |
| extension address | DotENV (environment variable syntax highlighting) |
i18n Ally (multilingual operation)
Recommended index: ⭐⭐⭐⭐
| index | content |
|---|---|
| author | Localize |
| Function | i18n multilingual operation enhancement |
| Recommended reason | How should I put it, it is optional, but, like that sentence, something is better than nothing. |
| extension address | i18n Ally (multilingual operation) |
Inline fold (css class name aggregation)
Recommended index: ⭐⭐⭐⭐⭐
| index | content |
|---|---|
| author | Mohammed Alamri |
| Function | Change multiple class names of class into three dots |
| Recommended reason | Atomized party benefits! Is the class full of screens scary? Use this to kill them all! |
| extension address | Inline fold (css class name aggregation) |
Live Sass Compiler (scss/sass automatic compilation)
Recommended index: ⭐⭐⭐
| index | content |
|---|---|
| author | Glenn Marks |
| Function | Live compile sass or scss to css |
| Recommended reason | When you need to write traditional html/css/js, don't write css anymore, use this plug-in, write scss, automatically and real-time compile to css |
| extension address | Live Sass Compiler (scss/sass automatic compilation) |
Live Server (local static server)
Recommended index: ⭐⭐⭐⭐⭐
| index | content |
|---|---|
| author | Ritwick Dey |
| Function | Start a development server locally, displaying static and dynamic content |
| Recommended reason | For example, after the vue project is packaged, if you want to preview the packaged project effect in the dist directory, use this. |
| extension address | Live Server (local static server) |
Prettier (code loose formatting)
Recommended index: ⭐⭐⭐⭐⭐
| index | content |
|---|---|
| author | Prettier |
| Function | code formatting |
| Recommended reason | Use relatively loose rules to format the code, which matches the freedom of js. |
| extension address | Prettier (code loose formatting) |
Random Something (a random content generation tool with Chinese characteristics)
Recommended index: ⭐⭐⭐⭐
| index | content |
|---|---|
| author | Prettier |
| Function | 中国特色的随机内容生成工具，包括音频，视频，人名，名言，内容，段子，图片，头像，电话，邮箱，地址，学校，网址，新闻等，方便开发者在布局的时候写页面。 |
| 推荐理由 | 用是真的好用，但是，logo 是真的丑！ |
| 扩展地址 | Random Something（中国特色的随机内容生成工具） |
Surround（代码片段包裹）
推荐指数：⭐⭐⭐⭐⭐
| 指标 | 内容 |
|---|---|
| 作者 | Mehmet Yatkı |
| 功能 | 把选中的代码用 if、try catch、function 等包裹起来 |
| 推荐理由 | 不会偷懒的程序员，不是好的程序员。但是偷懒的同时，也要把代码质量写好。 |
| 扩展地址 | Surround（代码片段包裹） |
Text Toolbox（文本工具箱）
推荐指数：⭐⭐⭐⭐⭐
| 指标 | 内容 |
|---|---|
| 作者 | Carlo Cardella |
| 功能 | 各种文本工具箱，插入日期、插入 UUID、编解码等 |
| 推荐理由 | 见过那种小刀没有？就是上面有挖耳朵的、开啤酒的、锯木头的，五花八门。这个就是这种东西，工具集合，可以少装一些扩展。 |
| 扩展地址 | Text Toolbox（文本工具箱） |
Todo Tree（todo 备忘录）
推荐指数：⭐⭐⭐⭐⭐
| 指标 | 内容 |
|---|---|
| 作者 | Gruntfuggly |
| 功能 | 通过树形菜单显示 TODO、FIXME 等标签 |
| 推荐理由 | 这个地方临时打个 TODO 标记，下次再打开这个项目，就可以在目录树结构中，方便直观地查看要处理的地方 |
| 扩展地址 | Todo Tree（todo 备忘录） |
tree-extended（目录转文本结构）
推荐指数：⭐⭐⭐⭐⭐
| 指标 | 内容 |
|---|---|
| 作者 | rulyotano |
| 功能 | 可以生成目录的文本字符串结构 |
| 推荐理由 | 写文章的时候，需要展示项目组织结构，用这个就很方便 |
| 扩展地址 | tree-extended（目录转文本结构） |
Turbo Console Log（一键生成 console.log）
推荐指数：⭐⭐⭐⭐⭐
| 指标 | 内容 |
|---|---|
| 作者 | ChakrounAnas |
| 功能 | 一键生成 console.log |
| 推荐理由 | 打印文件名、行数、内容、格式等，另外注意，这个类型的插件特别多，这个从 2018 年更新到 2022 年，应该是更好的一个 |
| 扩展地址 | Turbo Console Log（一键生成 console.log） |
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-t9By9CbU-1674499555125)(https://static.yicode.tech/images/202301/20230123230646.gif)]
VS Code Counter（字数统计）
推荐指数：⭐⭐⭐⭐
| 指标 | 内容 |
|---|---|
| 作者 | Kentaro Ushiyama |
| 功能 | 支持很多语言的代码行数统计 |
| 推荐理由 | There are quite a lot of such plug-ins, choose him, mainly because it has been updated since 2018 |
| extension address | VS Code Counter (word count) |
[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-pzLMNpzY-1674499555126)(https://static.yicode.tech/images/202301/20230123231307.gif)]
WindiCSS IntelliSense (windicss tool)
Recommended index: ⭐⭐⭐⭐
| index | content |
|---|---|
| author | spring |
| Function | WindiCSS Tools |
| Recommended reason | Many people re-recognize css because of tailwincss, and windcss is a next-generation atomic tool that is many times stronger than tailwindcss and compatible with tailwind |
| extension address | WindiCSS IntelliSense (windicss tool) |
unocss (unocss tools)
Recommended index: ⭐⭐⭐⭐
| index | content |
|---|---|
| author | Anthony Fu |
| Function | unocss tool |
| Recommended reason | Master Anthony's work, the next-generation CSS atomization tool, will become the underlying driving engine of widicss v4 |
| extension address | unocss (unocss tools) |
There are no screenshots, but it is very strong anyway! Best served with vite.
vscode-pets (raise pets in vscode)
Recommended index: ⭐⭐
| index | content |
|---|---|
| author | Anthony Shaw |
| Function | adjust the atmosphere, change the mood |
| Recommended reason | It's useless, but it can make people's eyes shine |
| extension address | vscode-pets (raise pets in vscode) |
To be continued...
The completion of this article is about a quarter, and there are still many useful plug-ins that have not been included due to time and energy, so stay tuned.