vscode is VSCode plug must be installed must be installed efficient development plug 10

Others 2019-10-17 22:20:03 views: null

10 will be installed VSCode efficient development widget

 

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/

1. VSCode basic use video tutorials

In our knowledge planet community in 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 - Course Description
  • 002 - How to make your file types at a glance
  • 003 - How to manage projects more efficiently
  • 004 - automatic formatting your code
  • 005 - How to set up a key test all kinds of language learning environment
  • 006-- How linkage debugging and Chrome
  • 007 - How to automatically detect your real-time code specification and code errors
  • 008-- how to improve the efficiency of front-end development React etc.
  • 009 - How to integrate and beautify your terminal to the VSCode
  • 010 - Visual Studio heavy users how to migrate to VSCode

Video Tutorial Address: https://devopen.club/course/vscode .

2.10 editor must be installed plugin

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

First order we have an efficient, easy to use interface coding, we need some unclear 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.

 

 

 

2.2 One Dark Pro dark theme

Long coding, dark color coding environment are less likely to make eye fatigue, but also can allow himself to be 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.

 

 

 

2.3 Code beautify Beautify

Beautify plugin can quickly format your code format that allows you to write code messy code instantly becomes very regular structure, 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.

 

2.4 Tag checker ESLint

ESLint is a grammar rules and code style checking tool that can be used to ensure write grammatically correct, unified style 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.

 

2.5 debug tools necessary 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" , shared front-end development courses in essential 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.

 

 

2.6 Universal Language Runtime Code Runner

If you need to learn or in contact with a wide variety of development language, 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 a variety of learning or testing Development language.

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.

 

 

 

2.7 Quick Notes Document This

Good code in addition to excellent performance, standardized format, the comment is also indispensable, but the comment 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.

 

 

2.8 CSS class name Smart Tips

When you call the style name defined in HTML, sometimes frequently switch between HTML and CSS file to switch 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.

 

2.9 Code Spell Checker Code Spell Checker

This plug-in after installation do not control enough, when there are spelling mistakes, you will find that its benefits in your code, because we write code, after all, a large number of variable definitions of English words, plug-ins can also give spelling errors recommended word.

 

 

2.10 MEMO plug TODO Highlight

In a lot of other code editor has TODO annotation capabilities, such as a certain part of the code you wrote, which requires functional parts come to realize later 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 .

 

 

3. Summary

Of course, plug-ins presented here is only necessary 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.

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/

1. VSCode basic use video tutorials

In our knowledge planet community in 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 - Course Description
  • 002 - How to make your file types at a glance
  • 003 - How to manage projects more efficiently
  • 004 - automatic formatting your code
  • 005 - How to set up a key test all kinds of language learning environment
  • 006-- How linkage debugging and Chrome
  • 007 - How to automatically detect your real-time code specification and code errors
  • 008-- how to improve the efficiency of front-end development React etc.
  • 009 - How to integrate and beautify your terminal to the VSCode
  • 010 - Visual Studio heavy users how to migrate to VSCode

Video Tutorial Address: https://devopen.club/course/vscode .

2.10 editor must be installed plugin

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

First order we have an efficient, easy to use interface coding, we need some unclear 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.

 

 

 

2.2 One Dark Pro dark theme

Long coding, dark color coding environment are less likely to make eye fatigue, but also can allow himself to be 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.

 

 

 

2.3 Code beautify Beautify

Beautify plugin can quickly format your code format that allows you to write code messy code instantly becomes very regular structure, 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.

 

2.4 Tag checker ESLint

ESLint is a grammar rules and code style checking tool that can be used to ensure write grammatically correct, unified style 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.

 

2.5 debug tools necessary 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" , shared front-end development courses in essential 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.

 

 

2.6 Universal Language Runtime Code Runner

If you need to learn or in contact with a wide variety of development language, 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 a variety of learning or testing Development language.

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.

 

 

 

2.7 Quick Notes Document This

Good code in addition to excellent performance, standardized format, the comment is also indispensable, but the comment 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.

 

 

2.8 CSS class name Smart Tips

When you call the style name defined in HTML, sometimes frequently switch between HTML and CSS file to switch 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.

 

2.9 Code Spell Checker Code Spell Checker

This plug-in after installation do not control enough, when there are spelling mistakes, you will find that its benefits in your code, because we write code, after all, a large number of variable definitions of English words, plug-ins can also give spelling errors recommended word.

 

 

2.10 MEMO plug TODO Highlight

In a lot of other code editor has TODO annotation capabilities, such as a certain part of the code you wrote, which requires functional parts come to realize later 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 .

 

 

3. Summary

Of course, plug-ins presented here is only necessary 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.

Guess you like

Origin www.cnblogs.com/benjamin77/p/11695296.html
Recommended
Apache Doris version 2.0.10 is officially released!
Open Source Daily | Big models go to war; big model unicorns are revealed to be selling themselves; Zhou Hongyi suggests that Google open source all its products; the largest open source AI community provides $10 million to share GPUs
Ranking
JS inheritance and monitoring
[ProblemSolving][Ubuntu][LyX] The selected document class ... requires external files that are not available...
Java threads sharing static variable
balancap/SSD-Tensorflow使用及训练预测自己的数据集
Detailed core ES6
JS --- reverse traversal achieved Array array, the array is connected string
How to Uninstall (or Reinstall) Windows 10’s Ubuntu Bash Shell
Linux modify the hostname method
Charging Specification BC v1.2
node的性能和java对比分析
Daily
More
2024-05-17(6)
2024-05-16(23)
2024-05-15(5)
2024-05-14(9)
2024-05-13(8)
2024-05-12(28)
2024-05-11(32)
2024-05-10(34)
2024-05-09(32)
2024-05-08(18)

Code World

© 2018 codetd.com