当前位置:网站首页>Top 22 visual studio code plug ins for web development

Top 22 visual studio code plug ins for web development

2020-12-08 11:53:47 Three evils

translate    Original author :James Quick    Original address :https://scotch.io/bar-talk/22-best-visual-studio-code-extensions-for-web-development



1. Debugger for chrome

marketplace.visualstudio.com/items?itemN…

 Insert picture description here

believe me , debugging JavaScript It's not just about writing console.log() ( Although this method is most widely used ).Chrome Built in features , Can have a better debugging experience . This plug-in allows you to vs code Use all the ( Or almost everything ) These debugging functions .

If you want to know more , You can read :

Debugging JavaScript in Chrome and Visual Studio Code.


2. Javascript (ES6) Code Snippets

marketplace.visualstudio.com/items?itemN…

 Insert picture description here I like Snippets plug-in unit . I don't think it's necessary to type the same code over and over again . This plug-in provides you with popular (ES6)JavaScript code snippet .

notes … If you don't es6javascript characteristic —— Use it quickly !


3. ESLint

marketplace.visualstudio.com/items?itemN…

 Insert picture description here Whether you want to write better code ? Is it necessary for the entire team to use a consistent format ? install ESLint. This plug-in can be configured to automatically format the code and... With errors or warnings “yell( Tips )”. VS Code With the right configuration , I can show you these tips .


4. Live server

marketplace.visualstudio.com/items?itemN…

 Insert picture description here Make changes in the code editor , Switch to browser , Then refresh to see the changes . It's an endless loop for developers , But what if your browser automatically refreshes when you make changes ? This is it. Live Server Where it comes in handy !

It also runs your application on the local server . Some things can only be tested when the application is running on the server , So it's also a good thing .


5. Bracket Pair Colorizor

marketplace.visualstudio.com/items?itemN…

 Insert picture description here Parentheses are the bane of keeping developers alive . Use a lot of nested code , It's almost impossible to determine which parentheses match each other . Bracket Pair Colorizor( As you might expect ) Color brackets , To make the code more readable . believe me , Do you want !


6. Auto Rename Tag

marketplace.visualstudio.com/items?itemN…

 Insert picture description here

Whether you need to rename HTML The elements in ? Okay , Use “Auto Rename Tag”, You just need to rename the start or end tag , Other tags will be automatically renamed . Simple but effective !


7. Quokka

marketplace.visualstudio.com/items?itemN…

 Insert picture description here Need a quick place to test some JavaScript Do you ? I used to be in Chrome Open the console in , And then type in some code , But there are many disadvantages . Quokka stay VS Code You're offered a JavaScript( and TypeScript) Register . This means that you can test a piece of code in your favorite editor !


8. Path Intellisense

marketplace.visualstudio.com/items?itemN…

 Insert picture description here

In large projects , It can be cumbersome to remember a specific file name and directory . This plug-in will provide you with smart tips . When you start typing paths in quotation marks , You'll see smart tips for directories and filenames . This will prevent you from spending a lot of time browsing files :)


9. Project Manager

marketplace.visualstudio.com/items?itemN…

 Insert picture description here

One of the things I hate is that VS Code Switch between items in . Every time I have to open file explorer and find the project on my computer . But it's not Project Manager And the application of . Use this plug-in , You can open an extra menu in the side menu of the project . You can quickly switch between projects , Save favorites or automatically detect from the file system Git project .

If you develop multiple different projects , So it's a great way to keep your organization in shape and improve your efficiency .


10. Editor Config

marketplace.visualstudio.com/items?itemN…

 Insert picture description here Editor Config It's the standard for a few coding styles , In the main text editor / IDE All of them are supported . The operation mode is as follows . You save the configuration file in a repository supported by your editor . under these circumstances , You have to be VS Code Add extension , To make it comply with these configuration files . It's super easy to set up , Great for team projects .


11. Sublime Text Keymap

marketplace.visualstudio.com/items?itemN…

 Insert picture description here You are a Sublime Of the fanatical users of , Not willing to switch to VS Code Do you ? By changing all shortcuts to match Sublime Shortcut to , This extension will allow you to switch without any perception . Now? , Why don't you switch ?


12. Browser Preview

marketplace.visualstudio.com/items?itemN…

 Insert picture description here I like Live Server extension Expand ( As mentioned above ), But in terms of convenience , This extension goes further . It provides you with VS Code Internal real time reload preview . You don't need to look at the browser again to see small changes !


13. Git Lens

marketplace.visualstudio.com/items?itemN…

 Insert picture description here git A lot of plug-ins , But one of the most powerful , most . You will get information about the warning , Line and file history , Submit search and so on . If you need something about Git Workflow help , Please start with this plugin !


14. Polacode

marketplace.visualstudio.com/items?itemN…

 Insert picture description here Do you know the beautiful code screenshots you see on blogs and twitter ? ok , It's likely that they came from Polacode. It's super easy to use . Copy a piece of code to the clipboard , Open the extension , Paste the code , Then click Save image !


15. Prettier

marketplace.visualstudio.com/items?itemN…

 Insert picture description here Don't take the time to format the code ... It did . front , I mentioned ESLint, It provides formatting and checking . If you don't need a lint check , So choose Prettier. It's very easy to set up , Can be configured to automatically format code when saving .


16. Better Comments

marketplace.visualstudio.com/items?itemN…

 Insert picture description here

This plug-in marks various types of comments with different colors , To give them different meanings , And highlight... In the rest of the code . I've been using this as a cue . It's hard to ignore a big orange tip , Tell me I have some unfinished work to do .

And for questions , Color code for alarms and emphasis . You can also add your own definition of !


17. Git Link

marketplace.visualstudio.com/items?itemN…

 Insert picture description here

If you want to Github View the file being processed in , Then this plug-in is suitable for you . After installation , Just right-click on the file , You will see in Github Open file option in the . If you don't use Git Lens Plug in , This plug-in for checking history , Branch version is very easy to use .


18. VS Code Icons

marketplace.visualstudio.com/items?itemN…

 Insert picture description here You know you can customize VS Code The icon in ? If you look at the settings , You will see “ File icon theme ” The option to . From there, , You can choose from the pre installed icons or install the icon pack . This plug-in provides you with a very cute icon package , existing 1100 Ten thousand people use !


19. Material Icon Theme

marketplace.visualstudio.com/items?itemN…

 Insert picture description here You are a Google Material Fans of design ? that , Detect this “ Material The theme ” Icon pack . There are hundreds of different icons , They look great !


20. Settings Sync

marketplace.visualstudio.com/items?itemN…

 Insert picture description here

Developer ( Including myself ) It takes a lot of time to customize the development environment , Especially text editors . Use “Settings Sync” plug-in unit , You can Github Save settings in . then , They can be loaded into any new version of VS Code.


21. Better Align

marketplace.visualstudio.com/items?itemN…

 Insert picture description here If you're the kind of person who likes perfect alignment in code , So you need Better Align. You can align multiple variable declarations , Follow the note , Code snippets, etc . There's no better way to understand the beauty of this plug-in than to install it and try it out !


22. VIM

marketplace.visualstudio.com/items?itemN…

 Insert picture description here

You are a VIM Deep users ? If so , Congratulations , All you have VIM Operation , Can be directly in VS Code Use it in . I'm not very good at it personally , But I know how to use VIM What crazy productivity it produces when it reaches its potential , So as to provide you with more functions .



版权声明
本文为[Three evils]所创,转载请带上原文链接,感谢
https://chowdera.com/2020/12/20201208115219016x.html