Preface
As a front-end programmer, I often use
VSCodecode editors, but every developer has their own unique work style and preferences. In order to meet the needs of different developers,VSCodea rich plug-in ecosystem is provided. In this article, I will recommend some powerfulVSCodeplug-ins that will help you create a personalized development environment and make your coding experience more comfortable and efficient.
How to install plugins
Install the plug-in by clicking on the image below or using the shortcut key ctrl+shift+xto open the extension module.
1. chinese (Chinese compiler)
chineseThe plug-in is available for VS Codethe Chinese (Simplified) language pack. This Chinese (Simplified) language pack VS Codeprovides a localized interface for .
2. vetur (necessary for vue development)
veturA plug-in is a dedicated development Vue.jsproject. It provides many useful features, including syntax highlighting, code completion, error checking, formatting, debugging, and more. VeturIt also supports Vueediting and previewing of single-file components, making it easier for developers to write and debug Vue.jsapplications. If you are Vue.jsa developer, I strongly recommend you to install and use Veturplug-ins to improve development efficiency.
3. Auto Close Tag (automatic closing tag)
Auto Close TagPlug-ins can automatically close tags HTML, XMLand other similar markup languages. When you enter a start tag, it automatically inserts the corresponding end tag and positions the cursor between the two tags so you can continue writing content.
4. Beautify (formatting code)
BeautifyPlugins can help you format your code to make it more beautiful and readable. It supports a variety of programming languages, including JavaScript, HTML, , CSS, JSONetc. When you use Beautifythe plug-in, it will automatically adjust indentation, line breaks, spaces, etc. according to the preset code style rules to make the code structure clearer. Additionally, Beautifythere are some customization options available that can be configured according to personal preference.
注意：此扩展已弃用，因为已不再对其进行维护。
5. CSS Peek (quickly view styles)
CSS PeekCSSPlugins help you quickly view and navigate styles in the editor . When you HTMLselect a CSSclass or class in the file ID, CSS Peekyou can use the plug-in to easily jump to the corresponding CSSstyle definition. It will display the relevant code in the editor's sidebar or pop-up window CSS, allowing you to view and edit the style directly. This plug-in also provides some other functions, such as viewing CSSthe usage of selectors, finding related style definitions, etc.
6. Git History (git version control)
Git HistoryPlug-ins help you view and browse Gitversion-controlled commit history. With Git Historythe plugin, you can easily view the details of each commit, including author, commit time, commit message, and more. You can also compare file differences between different commits and view changes to files. In addition, Git Historysome other functions are provided, such as viewing branches, switching commits, restoring files, etc. This plug-in is very useful for version control in team collaboration or personal development, and can help you better understand the evolution and history of the project.
7. GitLens (browse git related information)
GitLensGitPlug-ins can add many powerful features to your experience. Through the plug-in, you can view and browse version control-related information GitLensdirectly in the editor . GitIt displays information such as the author, last modification time, and submission message next to each line of code, making it easier for you to understand the source and modification history of the code. In addition, GitLenssome other functions are provided, such as viewing Blamecomments on files, comparing differences between different commits, viewing branches and tags, etc. It also integrates some shortcut commands to help you perform operations more quickly Git, such as submitting, pulling, pushing, etc.
8. Guides (code auxiliary lines)
GuidesPlugins are a built-in feature that helps you better align your code. In the editor, you can editor.guidesfind relevant options by searching for in settings. It allows you to display vertical and horizontal guides in the editor to help you better align your code. You can customize these guides by choosing different colors and styles. This function is very useful for writing code with high alignment requirements, such as HTML, CSS, JavaScriptetc.
9. Image preview (real-time preview of images)
Image previewThe plug-in can preview image files in real time in the editor, allowing developers to view the content and effects of images while writing code.
10. HTML CSS Support (code assistance function)
HTML CSS SupportThe plug-in provides intelligent code completion, syntax highlighting, code snippets and other auxiliary functions for HTMLand . This plugin helps developers write and code CSSmore efficiently .HTMLCSS
Some key features include:
- Code completion: When you enter
HTMLorCSScode, the plug-in will provide intelligent code completion suggestions based on the context, including tags, attributes, selectors, attribute values, etc.; - Syntax highlighting: The plug-in will highlight
HTMLthe and codes according to syntax rules to make the code more readable;CSS - Code snippets: The plug-in provides some commonly used code snippets that can be quickly inserted with simple abbreviations. For example, entering
div.containerwill automatically generate a tag withclassfor ;containerdiv HTMLQuick documentation: You can view the documentation for the and properties by hovering over the code or using shortcut keysCSSto get more information about the properties;EmmetSupport: The plug-in is integrated and can quickly generate and codesEmmetthrough simple abbreviations .HTMLCSS
11. Import Cost (displays the size of the imported package)
Import CostThe plug-in can help developers display the size of imported modules in real time in the code. This is very helpful for optimizing the performance and loading speed of front-end projects. When you import a module in your code, Import Costsize information for the module is displayed next to the line of code, usually as a file size or as a gzipcompressed size. This way you can quickly understand the size of each module and better optimize your code. Import CostSupports multiple languages and module systems, including JavaScript, , TypeScript, React, Vueetc., and can be integrated with other plug-ins and tools, such as Webpack, Rollupetc.
12. JavaScript (ES6) code snippets (generate code snippets)
JavaScript (ES6) code snippetsThe plug-in provides a series of JavaScriptcode snippets for development, especially for ES6（ECMAScript 2015）syntax. You can JavaScriptuse shortcuts to quickly insert frequently used code templates while writing code. These code snippets cover a variety of common JavaScriptsyntax and functionality, including variable declarations, function definitions, arrow functions, template strings, destructuring assignment , Promiseetc.async/await
13. One Dark Pro (dark theme)
One Dark ProThe plugin provides a dark theme to help you have a better visual experience while writing code. It can VS Codebe selected as the editor's theme in the theme settings of . Once a theme is applied One Dark Pro, the editor's background, text color, syntax highlighting, etc. will be adjusted accordingly according to the theme's design.
One Dark ProFeatures of the theme include:
- Dark background: The theme uses a dark background color to make the code more prominent and reduce eye fatigue;
- High Contrast: The theme uses bright text colors to contrast with dark backgrounds, making the code more readable;
- Syntax highlighting: The theme provides precise syntax highlighting for various programming languages to make the code structure clearer;
- Unified color scheme: The theme uses a consistent color scheme to make different syntax elements clearly visually distinguished.
14. Path Intellisense (path completion)
Path IntellisenseThe plug-in provides path intelligence function to help you enter and complete file paths more easily. When you enter a file path in the editor, it automatically provides you with path suggestions and completions. This includes files and folders in the file system, as well as files that already exist in your project. Path IntellisenseIt also provides some other functions, such as quick navigation of paths, copy and paste of paths, etc. It also supports a variety of file systems, including local file systems, network file systems, and remote file systems.
15. Open in Browser (open file)
Open in BrowserHTMLThe plug-in allows you to right-click on files such as , CSS, , etc. in the editor JavaScriptand open them through the default browser. You can VS Codeopen a HTMLfile in and right-click the file in the editor. In the right-click menu, you will see an Open in Default Browseroption. After selecting this option, the plug-in will automatically open the HTML file using your default browser and display its content in the browser.
16. Prettier - Code formatter (formatted code)
Prettier - Code formatterIt is a popular code formatting tool that can help you automatically format your code to conform to a unified coding style. It supports a variety of programming languages, including JavaScript, TypeScript, , CSS, HTML, JSONetc. You can select the code file you want to format, and then use the shortcut key (default is Shift + Alt + F) or the option in the right-click menu Format Documentto trigger formatting. The plug-in automatically formats the code and applies it to the file based on predefined rules and configurations. Of course, you can customize it according to your needs. You can specify formatting rules in a configuration file in the project (such as .prettierrc) or VS Codeconfigure them globally in the settings of .
17. vscode-icons (file icon)
vscode-iconsPlugin that provides rich icons for files and folders to enhance editor visualization. vscode-iconsThe plug-in provides a large number of icons, covering various common file types and extensions. These icons can help you identify and distinguish different types of files more quickly, and improve your navigation and search efficiency in the project. In addition, vscode-iconscustom icon rules are also supported. You can specify custom icons for specific file types or extensions based on your needs. This allows your project to be more personalized and aligned with your visual preferences. Currently, this plug-in is VS Codesupported internally: " File " -> " Preferences " -> " File Icon Theme ".
18. Indent-Rainbow (indent color prompt)
Indent-RainbowThe plugin helps you more intuitively identify and understand the indentation structure of your code by applying different colors to each indentation level. When you open a file in the editor, Indent-Rainbowindentation in the code is automatically detected and a different rainbow color is applied to each indentation level. This way, you can clearly see the indentation levels in the code, making it easier to understand the structure of the code. The plugin supports custom colors and indent size. You can configure it in the plug-in settings according to your preferences and needs.
19. filesize (display file size)
filesizeThe plug-in can display the current file size in the status bar at the bottom, and you can also see the detailed creation and modification time after clicking it. The plug-in supports a variety of formatting options, such as specifying the number of decimal places, specifying units, specifying byte prefixes, etc. You can configure this in the plugin's settings.
20. Better Comments (code comments)
Better CommentsThe plugin provides more powerful code commenting capabilities, allowing you to better organize and label your comments.
Using Better Commentsplugins, you can categorize and color comments by adding specific tags before them. These markers include:
!: Used to highlight important notes or parts that require special attention;?: Comments used to express questions or require further explanation;TODO: Used to mark tasks or to-do items that need to be completed;*: Used to emphasize or mark key information in comments;//: used for ordinary comments.
By using these tags, you can distinguish different types of comments more clearly, and quickly locate and understand the content of the comments in the code. In addition, Better Commentscustom markings and colors are supported, which you can configure according to your preferences and needs.
21. CodeSnap (code generated pictures)
CodeSnapPlugins can help you convert code snippets into beautiful code screenshots and support custom styles and themes. You can choose from different styles and themes, including code highlighting, background colors, font sizes, and more, to create beautiful screenshots that suit your needs. The plugin also supports customizing the size, file type and file name of your snippets, as well as adding metadata such as titles and descriptions.
22. Regex Previewer (real-time testing of regular rules)
Regex PreviewerPlug-ins help you preview matching results in real time while editing regular expressions. It displays a live preview pane in the editor's sidebar with a highlight of the matching results. The plug-in supports a variety of regular expression syntax, including JavaScript, Python, Javaand other common syntaxes. You can choose the syntax type that suits you according to your needs.
