I summarized my commonly used frontend plugins and tools for 2022. Although the plugin synchronization feature built into VSCode is quite comprehensive, I still compiled this list for future reference. Original Feishu document link: Recommended Common VSCode Plugins and Other Tools for Frontend Development in 2022
Common VSCode Plugins#
Development#
GitLens — Git supercharged#
Enhances the integrated Git functionality of VSCode, providing many useful features.
Auto Close Tag#
Automatically closes HTML and JSX tags.
Auto Rename Tag#
Automatically renames tags.
change-case#
Case conversion. Type change case in Ctrl+Shift+P.
Code Spell Checker#
Spell checking in code.
ES7 React/Redux/GraphQL/React-Native snippets#
React code snippets, as shown in the image.
Commit Message Editor#
Essential for team collaboration, editing git commit messages.
ESLint#
Prettier#
Specifies the configuration file .prettierrc.js, making it convenient to format using your project's Prettier configuration file.
Why Prettier? https://prettier.io/docs/en/why-prettier.html
Tailwind CSS IntelliSense (Recommended for Tailwind)#
Automatic completion and smart suggestions for Tailwind.
Error Lens#
Improves the highlighting of errors, warnings, and other language diagnostics.
CSS Modules#
Essential for CSS module mode.
px to rem & rpx & vw (cssrem)#
Convenient for unit conversion.
Template String Converter#
Automatically converts input starting with ${ into template strings.
TabOut#
A plugin that you can't go back from once you get used to it, press Tab to exit parentheses.
vscode-styled-components (Recommended for styled-components)#
Highlight Matching Tag#
As the name suggests, a tag highlighting plugin.
Live Server#
A classic plugin: https://juejin.cn/post/7006338919767736357
Dev Containers (suitable for docker development)#
Open files inside Docker containers; highly praised by those who develop with Docker.
Auxiliary#
Code Runner#
This one needs no introduction, the small triangle in the upper right runs the code.
Image Gallery#
Great for viewing image resources, highly recommended.
Image preview#
Image link preview, very useful.
Project Manager#
VSCode's project manager, switch projects with one click.
Todo Tree#
As the name suggests, it displays where the TODO comments are in the project, automatically highlighting TODOs.
Comment Translate#
Comment translation, as shown.
Live Share#
Collaborative editing and shared terminal for multiple users: https://juejin.cn/post/6844903603182764039
Practical Tools#
Bookmarks#
VSCode bookmarks.
Typora#
Using Vditor as a markdown editor for VSCode is very useful, but sometimes it conflicts with git and needs to be disabled.
:emojisense:#
Convenient for inputting emoji expressions.
CodeTour#
Useful for reading source code.
vscode-pdf#
View PDF files in VSCode.
Office Viewer (Markdown Editor)#
Since PDFs can be viewed, there are also plugins for viewing Office files. This integrates with Vditor for writing md files.
CodeSnap#
Select code and generate beautiful screenshots (suitable for showcasing code).
Draw.io Integration#
Files with the .drawio extension can be used to create flowcharts, suitable for writing technical documents, no need to elaborate.
Appearance Improvement#
One Dark Pro#
The iconic One Dark theme from Atom, also one of the most installed themes for VS Code!
vscode-icons#
Improves the file icons in VSCode, making it much more visually appealing.
Autocomplete/Intelligent Suggestions#
GitHub Copilot#
The famous autocomplete tool.
Tabnine AI#
While not as good as Copilot, it also provides decent autocomplete, and it's free without needing to apply.
Mintlify Doc Writer for Python, JavaScript, TypeScript, C++, PHP, Java, C#, Ruby & more#
Automatically analyzes code to generate comments, suitable for those who are lazy to write documentation.
Parameter Hints#
Smart suggestions for function parameters, but can be a bit distracting if used too much.
Problem-Solving#
Quokka.js#
Real-time printing of JS output, suitable for solving problems.
Competitive Programming Helper (cph)#
Suitable for competition students, ACM (also suitable for solving interview algorithm questions, but the language is C++).
algorithm#
Suitable for LeetCode problem-solving.
Tool Recommendations#
Browser Plugins#
- Translation Plugins
- VisBug - Microsoft Edge Addons
Screenshot & GIF Tools#
- Snipaste screenshot tool, highly praised: https://www.snipaste.com/
- ScreenToGif, as the name suggests, a great tool for recording GIFs: https://www.screentogif.com/
- OBS, the famous video recording and live streaming tool: https://obsproject.com/
Practical Tools#
- Everything, super fast file search: https://www.voidtools.com/zh-cn/downloads/
To Be Added#
...Feel free to comment with recommended plugins.