https://www.cnblogs.com/zhaoshujie/p/9834654.html
This article describes the current most popular front-end development tools VSCode will install 10 plug-ins developed for greatly improving the efficiency of software development.
Basic use VSCode can refer to my original video tutorial "VSCode efficient development will install the plug-in."
Screenshot
VSCode (Visual Studio Code) is a Microsoft developed a free, open-source, cross-platform text (code) editor, considered to be the front-end development almost perfect software development tools.
Official website is: https://code.visualstudio.com/
- VSCode basic use of video tutorials
on our planet community knowledge to share with me the original set of 10 video tutorials "VSCode efficient development must be installed plug-ins."
This course is VSCode editor courses. VSCode powerful plugin library makes it even more invincible in improving development efficiency courses to share the installed plug-in must be installed, configured and use of knowledge related skills.
Video Tutorial Course Outline
001 - Introduction Course
002 - How to make your file types at a glance
003 - how to more effectively manage project
004 - automatic formatting your code
005 - a key to how to build all kinds of language learning test environment
006-- how and Chrome linkage debugging
007 - how real-time automatic detection of your code specification and code error
008-- how to improve the efficiency of front-end development React etc.
009 - how to integrate and beautify your terminal to VSCode in
010 - Visual Studio heavy users how to migrate to VSCode
video tutorials address : https://devopen.club/course/vscode .
- 10 will be installed editor plug-in
is equivalent to the updating of video tutorials, here again for everyone to sort out 10 must be installed VSCode editor plug. Using the basic plug installed editors may be directly above the reference video tutorial.
2.1 file icon vscode-icons
plug-in name: vscode-icons
Plug Address: https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons
first for us when encoded with an efficient, easy to use interface, we the need for some unknown components to do some landscaping.
vscode-icons plug-in can be achieved on the icon in front of a variety of file types to optimize the display, so when we see a long list of files that can be directly you can quickly know the type of files through the icon file, instead of going the file extension.
Screenshot
Dark theme One Dark Pro 2.2
plug-in name: One Dark Pro
plug-Address: https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme
long coding, dark color coding environment are less likely to make eye fatigue but you can also make yourself more focused.
After installing One Dark Pro plug-in can be a key to VSCode editor color adjustments to a dark tie, coding more comfortable.
Screenshot
2.3 Code beautify Beautify
plug-in name: Beautify
plug Address: https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify
Beautify plugin can quickly format your code format that allows you to write code structure of the code messy moment very neat, the code must have obsessive-compulsive disorder, better maintenance and code format in the late reading when others will have a lot of convenience.
Plug-in supported languages very much, basically blocking cover all of the current language, but you can also customize code formatting structure.
Screenshot
2.4 code checking tool ESLint
plug-in name: ESLint
plug Address: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
ESLint is a grammar rules and code style checking tool that can be used to ensure that written grammar correct style uniform code.
The ESLint plug in directly to VSCode ESLint functional integration is good, can be used after installation for details and code format specification can also customize, and a team can share the same configuration file, so a team owner to write the code can use the same code specifications, check the code before each person can do their own checking code specifications.
Screenshot
2.5 debug tools necessary Debugger for Chrome
plug-in name: Debugger for Chrome
plug-Address: https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome
this is simply a front-end development tool necessary, will greatly change your development and debugging mode.
Previous front-end debugging, mainly JavaScript debugging, you need to find the corresponding code section in Chrome's console, add a breakpoint, then step through and see where the change in value of Chrome's console.
After a while after using the Debugger for Chrome, when the code runs in Chrome, you can add directly in VSCode breakpoint, click Run, Chrome pages continue to run, execute to the breakpoint you add in the VSCode you can step through direct VSCode in.
Chrome on the use of debugging tools, you can refer to my sharing our knowledge of the planet in the original video tutorials "50 Chrome Developer Tools essential skills" courses share a front-end development of the necessary browser debugging tools use Chrome Developer Tools process the necessary 50 use and debugging techniques, such knowledge is that you become qualified personnel necessary front-end development skills.
Screenshot
2.6 Universal Language Runtime Code Runner
plugin name: Code Runner
plugin address: https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner
if you need to learn or in contact with a wide variety of development languages, then the Code Runner plugin so you do not build a variety of language development environment, directly through this plug-in can be directly run the code corresponding to the language, it is ideal for learning or testing a variety of development languages.
Supported 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, AutoHotkey, AutoIt, Kotlin, Dart, Free Pascal, Haskell, Nim, D, as well as some custom command.
Screenshot
2.7 Quick Notes Document This
plug-in name: Document This
plug-Address: https://marketplace.visualstudio.com/items?itemName=joelday.docthis
good code in addition to excellent performance, standardized format, the comment is also essential, and Notes should have a standard annotation methods, especially for the JavaScript language.
Document This can help you to quickly generate comments, some functions such as annotation and help you define the parameters extracted in the like, the tool is essential that you write the code specifications.
Screenshot
2.8 CSS class name smart tips
plug-in name: IntelliSense for CSS class names in HTML
plug-Address: https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion
call defined styles in HTML when the name is sometimes necessary to frequently switch between HTML and CSS files back and forth to see that you have defined CSS class name.
And with IntelliSense for CSS class names in the HTML plug-in, you may need to call the CSS class names of places in HTML, this plugin will intelligently give you tips CSS class names have been defined.
Screenshot
2.9 Code Spell Checker Code Spell Checker
plugin name: Code Spell Checker
plugin address: https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker
this plugin after installation and leave enough in your code when there are spelling mistakes, you will find its benefits, as we write code, after all, a large number of variable definitions of English words, plug-ins can also give advice misspelled word.
Screenshot
2.10 MEMO plug TODO Highlight
plugin name: TODO Highlight
plug-address: https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight
in a lot of other code editor has TODO annotation features, when you wrote the code as a part of the functional parts which need to come back later to realize that this is the type you can add a TODO comment in the corresponding code at, then the latter can quickly jump to this section continue to write, and when a lot of project time, TODO become more useful, because sometimes there may be dozens of TODO help you mark those functions need to continue to implement or optimize.
Screenshot
- Summary of
course, there is only necessary plug-ins introduce plug-in 10, in fact, according to the language you develop, there are many very able to improve the efficiency of development tools need to be installed, you can download and install the plugin on their own inquiries of the center VSCode.