Shulou(Shulou.com)06/02 Report--

This article mainly introduces what the VSCode plug-ins are in the development of Web. It is very detailed and has certain reference value. Friends who are interested must finish reading it.

1. Debugger for chrome https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

Believe me, debugging JavaScript is not just about writing console.log () (although this is the most common way to use it). Chrome has some built-in features to have a better debugging experience. This plugin allows you to use all (or almost all) of these debugging features in vscode.

If you want to know more, you can read:

"Debugging JavaScript in Chrome and Visual Studio Code":

Https://scotch.io/tutorials/debugging-javascript-in-google-chrome-and-visual-studio-code

2. Javascript (ES6) Code Snippets https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets

I like the Snippets plug-in. I don't think it's necessary to type the same code over and over again. This plugin provides you with popular (ES6) JavaScript code snippets.

Note... If you don't use the es6javascript feature-just use it!

3. ESLint https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

Do you want to write better code? Do you need the whole team to use a consistent format? Install ESLint. This plug-in can be configured to automatically format the code and "yell" with errors or warnings. VS Code can show you these tips with the right configuration.

4. Live server https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

Make changes in the code editor, switch to the browser, and refresh to see the changes. It's an endless cycle for developers, but what if the browser automatically refreshes when you make changes? This is the opportunity for Live Server to show his talents!

It also runs your application on the local server. Some things can only be tested when the application is running on the server, so this is also a plus.

5. Bracket Pair Colorizor https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer

Parentheses prevent the scourge of developers from living. With a lot of nested code, it is almost impossible to determine which parentheses match each other. Bracket Pair Colorizor (as you might expect) matches colors in parentheses to make the code more readable. Trust me, you want it!

6. Auto Rename Tag https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

Do you need to rename elements in HTML? OK, with "Auto Rename Tag", you just need to rename the start or end tags, and the other tags will be renamed automatically. Simple but effective!

7. Quokka https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode

Do you need a quick place to test some JavaScript? I used to open the console in Chrome and enter some code in it, but there are many disadvantages. Quokka provides you with a JavaScript (and TypeScript) register in VS Code. This means you can test a piece of code in your favorite editor!

8. Path Intellisense https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

In large projects, it can be troublesome to remember a specific file name and the directory where the files are located. This plugin will provide you with smart tips. When you start entering the path in quotation marks, you will see smart prompts for directories and file names. This prevents you from spending a lot of time browsing files:)

9. Project Manager https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager

One of the things I hate is switching between projects in VS Code. Every time I have to open File Explorer and find the project on my computer. But this changes with the use of Project Manager. With this plug-in, you can open an additional menu in the side menu of the project. You can quickly switch between items, save favorites or automatically detect Git items from the file system.

If you develop multiple different projects, this is a good way to maintain organizational status and improve efficiency.

10. Editor Config https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig

Editor Config is a standard for one of the few encoding styles and is supported in major text editors / IDE. It works as follows. You save the configuration file in a repository supported by your editor. In this case, you must add an extension to VS Code to make it comply with these configuration files. It is super easy to set up and is very suitable for team projects.

11. Sublime Text Keymap https://marketplace.visualstudio.com/items?itemName=ms-vscode.sublime-keybindings

Are you an avid user of Sublime, don't you want to switch to VS Code? By changing all shortcuts to match Sublime shortcuts, this extension will make you switch without any awareness. Now, is there any reason for you not to switch?

12. Browser Preview https://marketplace.visualstudio.com/items?itemName=auchenberg.vscode-browser-preview

I like the Live Server extension extension (mentioned above), but in terms of convenience, this extension goes one step further. It provides you with a real-time preview of reloading inside VS Code. You don't have to look at the browser to see a small change!

13. Git Lens https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

There are a lot of git plug-ins, but one of them is the most powerful and most powerful. You will get information about warnings, line and file history, submit searches, and so on. If you need help with the Git workflow, please start with this plug-in!

14. Polacode https://marketplace.visualstudio.com/items?itemName=pnp.polacode

Do you know those beautiful code screenshots you see on blogs and Twitter? Well, they're probably from Polacode. It's super easy to use. Copy a piece of code to the clipboard, open the extension, paste the code, and click Save Image!

15. Prettier https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Don't take the time to format the code. It did. Earlier, I mentioned ESLint, which provides formatting and checking. If you don't need a lint check, choose Prettier. It is very easy to set up and can be configured to format code automatically when saved.

16. Better Comments https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments

This plug-in colors various types of comments to give them different meanings and highlights them in the rest of the code. I've been using this as a hint. It's hard to ignore a big orange tip that tells me I have some unfinished work to do.

There are also color codes for problems, alerts and emphasis. You can also add your own definition!

17. Git Link https://marketplace.visualstudio.com/items?itemName=qezhu.gitlink

If you want to view the file you are working on in Github, this plugin is for you. After installation, just right-click the file and you will see the option to open the file in Github. This plug-in is very useful for checking history, branch versions, etc., if you don't use the Git Lens plug-in.

18. VS Code Icons https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons

Did you know that you can customize icons in VS Code? If you look at the settings, you will see the option of "File Icon theme". From there, you can select or install the icon package from the pre-installed icons. This plugin provides you with a very lovely icon package that has been used by 11 million people!

19. Material Icon Theme https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme

Are you a fan of Google Material design? So, check out the "Material theme" icon package. There are hundreds of different icons and they look great!

20. Settings Sync https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync

Developers (including myself) spend a lot of time customizing the development environment, especially text editors. Using the "Settings Sync" plug-in, you can save settings in Github. You can then use a command to load them into any new version of VS Code.

21. Better Align https://marketplace.visualstudio.com/items?itemName=wwm.better-align

If you are the kind of person who likes perfect alignment in your code, then you need Better Align. You can align multiple variable declarations, trailing comments, code snippets, etc. There is no better way to understand the advantages of this plug-in than to install and try it!

twenty-two。 VIM https://marketplace.visualstudio.com/items?itemName=vscodevim.vim

Are you a deep VIM user? If so, congratulations, all the VIM operations you have mastered can be used directly in VS Code. Personally, I'm not good at this, but I know how crazy productivity can be when using VIM to realize its potential, thus providing you with more features.

These are all the contents of the article "what are the VSCode plug-ins in Web development?" Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.