Related recommendations: "vscode tutorial"
Visual Studio Code is a lightweight but powerful source code editor, lightweight Level refers to the fact that the downloaded Vs Code is actually a simple editor. Power refers to the environmental plug-in expansion that supports multiple languages. It is precisely because of this support for plug-in installation environment development that Vs Code has become a development language. The overlord makes it possible to support the development of multiple languages at the same time.
As the saying goes, if a good worker wants to do his job well, he must first sharpen his tools. As an old Vs Code user, I think that installing some useful plug-ins can greatly improve my daily development efficiency. I recommend below These are some plug-ins that I use more often in daily development and feel good, and they will be continuously updated. If you think there are good plug-ins that I have not mentioned here, you can leave a message below and I will add them.
https://code. visualstudio.com/
https://github.com/Microsoft/vscode
https://marketplace.visualstudio.com/
Shortcut key: Ctrl Shift X to enter the extension panel and search for extensions in the app store text box.
Extension name: Chinese (Simplified) Language Pack for Visual Studio Code
Plug-in market address: https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-zh-hans
Extension description: This Chinese The (Simplified) language pack provides a localized interface for VS Code.
Extension name: Beautify
Plug-in market address: https:/ /marketplace.visualstudio.com/items?itemName=HookyQR.beautify
Extension description: Beautifyjavascript,JSON,CSS,Sass, and HTML in Visual Studio Code.
Extension name: vscode-icons
Plug-in market address: https:// marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons
Extension description: vscode-icons can not only add comfortable icons to folders and files, but also automatically detect items. Different icons are provided according to different functions of the project, such as git, Markdown, configuration items, tool classes, etc.
Extension name: Auto Close Tag
Plug-in market address: https: //marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag
Extended description: Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text (for small front-end developers) partners are very useful).
Extension name: Better Comments
Plug-in market address: https://marketplace.visualstudio .com/items?itemName=aaron-bond.better-comments
Extension Description: The Better Comments extension will help you create more user-friendly comments in your code. Using this extension you will be able to categorize comments into: Alerts, Queries, To-dos, Highlights, Commented out code can also be styled so that the code should not be there, you can specify any other comment style in the settings.
Extension name: ESLint
Plug-in market address: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
Extended description: ESLint is a code specification and error checking tool. It has the following features
1. Everything is pluggable. You can call any rule api or formatter api to package or define a rule or formatter.
2. Any rule is independent
3. There is no specific coding style, you can configure it yourself
ESLint configuration details: https://blog.csdn.net/mafan121/article/details/77965252?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.nonecase&depth_1-utm_source=distribute.pc_relevant.none -task-blog-BlogCommendFromMachineLearnPai2-3.nonecase
Extension name: GitLens
Plug-in market address: https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
Extension description: GitLens has the ability to build into Visual Studio Code Git. It helps you see code authorship at a glance with Git responsibility comments and code lenses, seamlessly navigate and browse Git repositories, gain valuable insights with powerful comparison commands, and more.
Vs Code source code management plug-in GitLens usage guide: https://www.jianshu.com/p/95a1a06ac0fb
Extension name: Git History
Plug-in market address: https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory
Extended description: Git history, search and more (including git log).
Extension name: Drawio Preview
Plug-in market address: https: //marketplace.visualstudio.com/items?itemName=purocean.drawio-preview
Extended description: Preview drawing files in Vs Code.
Using Drawio in Vs Code: https://blog.csdn.net/huanglin6/article/details/106239570
Extension name: Path Intellisense
Plug-in market address: https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense
Extension description : Enter the path of the corresponding file in the editor, and it will be automatically completed (very convenient and easy to use when importing/requiring modules).
Extension name: Vetur
Plug-in market address: https:// marketplace.visualstudio.com/items?itemName=octref.vetur
Extension description: Vue multi-functional integrated plug-in, including: syntax highlighting, smart prompts, emmet, error prompts, formatting, auto-completion, debugger . vscode officially designated Vue plug-in, a must-have for Vue developers.
Extension name: vscode-element-helper
Plug-in market address: https ://marketplace.visualstudio.com/items?itemName=ElemeFE.vscode-element-helper
Extension description: VSCode-Element-Helper is a VS Code extension for Element-UI, which is a great library. More and more projects use it. Therefore, to help developers write more efficient code through Element-UI.
Extension name: Vue VSCode Snippets
Plug-in market address: https://marketplace.visualstudio.com/items? itemName=sdras.vue-vscode-snippets
Extension description: Vue syntax snippet extension.
Extension name: C
# Plug-in market address: https://marketplace.visualstudio.com/items? itemName=ms-dotnettools.csharp
Extension description: .NET Core's lightweight development tool. Powerful C# editing support including syntax highlighting, IntelliSense, go to definition, find all references, and more. Debugging support for .NET Core (CoreCLR). Note: Mono debugging is not supported. Desktop CLR debugging support is available. limit. Project.json and csproj projects are supported on Windows, macOS and Linux.
Use Vs Code to develop .NET Core. Refer to this blog: https://www.cnblogs.com/yilezhu/p/9926078.html
Extension name: Angular Snippets (Version 9)
Plug-in market address: https://marketplace. visualstudio.com/items?itemName=johnpapa.Angular2
Extension description: This extension for Visual Studio Code adds Angular code snippets for TypeScript and HTML.
Extension name: Debugger for Chrome
Plug-in market address: https://marketplace.visualstudio.com/ items?itemName=msjsdiag.debugger-for-chrome
Extension Description: Debugging JavaScript code in the Chrome browser or any other target that supports the Chrome Debugger protocol.
Extension name: Code Runner
Plug-in market address: https://marketplace.visualstudio.com/items ?itemName=formulahendry.code-runner
Extended description: Run code snippets or code files in multiple languages C, C, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH , F# Script, F# (.NET Core), C# Script, C# (.NET Core), VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script, R, AppleScript, Elixir, Visual Basic .NET, Clojure , Haxe, Objective-C, Rust, Racket, Scheme, AutoHotkey, AutoIt, Kotlin, Dart, Free Pascal, Haskell, Nim, D, Lisp, Kit, V, SCSS, Sass, CUDA, and custom commands.
Extension name: TabNine
Plug-in market address: https://marketplace.visualstudio.com/ items?itemName=TabNine.tabnine-vscode
Extended description: This is the VS Code client for TabNine (an autocompleter for all languages). To index the entire project, read .gitignore to determine which files to index. Use the mnemonic completion engine to type long variable names in just a few keystrokes. Zero configuration. TabNine works right out of the box. Fast response time: A list of suggestions is typically generated in less than 10 milliseconds.
Detailed introduction: https://zhuanlan.zhihu.com/p/73811872
Extension name: Icon Fonts
Plug-in market address: https://marketplace.visualstudio.com/items?itemName=idleberg.icon-fonts
Extended description: icon fonts is a tool that provides VS Plug-in for Code icons and font abbreviations. Although it looks inconspicuous, for front-end development, this tool can greatly improve development efficiency. Through some abbreviations, code snippets related to icon fonts can be quickly completed, which can reduce more than 80% of manual input content. Icon fonts support html, css, less, sass, scss, stylus, jsx, blade, and vue.
Extension name: Gitlink
Plug-in market address: https:// marketplace.visualstudio.com/items?itemName=qezhu.gitlink
Extension description: gitlink is a plug-in that assists and enhances the use of VS Code GitHub.
It has the following 2 features:
Go to the online link of the current file.
Copy the online link of the current file to the clipboard.
For more programming related knowledge, please visit: Programming Video! !
The above is the detailed content of Recommended plug-ins for daily development in VSCode. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
