preface
Recently, when I was sorting out my notes, I found that the notes of the plugins I collected and used were quite messy. I just took time to sort them out and put some essence parts here for my own convenience as well as for my friends to check.
Here I divide the categories into the following three categories:
- Dependencies or libraries used in development
- Vscode plug-in
- Other/Black Tech
Dependencies or libraries used in development
echart
Echart is a visualization chart library developed based on JS. Echart does a very good job in this area, with all kinds of charts available. If you have more complex requirements, you can use it, and it is relatively easy to get started.
Recommend index: ⭐
Website address: https://echarts.apache.org/zh…
vconsole
VConsole, the mobile debugging tool for the front end developer debugging panel, is also very simple to use. If you want to do simple debugging, I recommend it. If you need more complex needs, I recommend Whistle, you can find your own search engine.
Recommend index: ⭐
Website address: https://gitee.com/Tencent/vCo…
momentjs
MomentJS is a very powerful and time-focused library, recommended for those with a strong need for time. However, for me, MomentJS is relatively small in number of methods, and in most cases it encapsulates its own methods. It’s quite a bit bigger than this one. Therefore, if the time processing related requirements are not large, it is recommended to encapsulate by yourself.
Recommend index: ⭐ at Daisy
Official website: http://momentjs.cn/
lodash
Lodash is a very practical tool for js library, mainly dealing with arrays, strings, objects, etc., using relatively simple indeed, method is also very much, so he is the size of the entire package has reached more than 1 MB, to simplify the process and increase the volume of the project is also need people to measure the current needs of the project, large project proposal is not easily to use the library.
Recommend index: ⭐ at
Website address: https://www.lodashjs.com/
qiankun
Qiankun, as a popular micro-front-end framework, is really quite eye-opening. It has nothing to do with the technology stack, is easy to use, and the official documents are relatively complete. I hope that the micro-front-end can always carry forward, and it also needs the big men to expand their borders and produce relatively mature solutions to export to the community, so as to expand the micro-front-end ecosystem. Small and medium-sized projects or recommendations to unify the technology stack.
Recommend index: ⭐ at Daisy
Website address: https://qiankun.umijs.org/zh/…
mockjs
Mockjs analog data, on the back end out before, haven’t provided interfaces front-end classmate can use him to simulate the background data transmission, and provides many mock placeholder methods to randomly generated the corresponding data, the only need to pay attention to is the mock will intercept the real request, so the alignment phase oh ~ remember to shield the mock data
Recommend index: ⭐ at Daisy
Official website: http://mockjs.com/
file-saver
File – Saver is a download method based on JS encapsulation, the size is only 36KB, you can download blob type, file stream, URL, etc., the package size is not large, and the compatibility of the browser is also handled well, students who want to know, can try to use.
Recommend index: ⭐ at Daisy
Website address: https://github.com/eligrey/Fi…
vue-dark-photo
Vue-Dark-Photo is a lightweight and simple image preview component based on Vue2. X package, supporting zoom in, zoom out, download, print and other functions. It is the author’s open source project. At present, STAR 100+, if you are interested, you can go and have a look. If you have any problems and want to feedback, please leave a message to me or raise issues to me.
Recommend index: ⭐
Website address: https://github.com/Dark2017/v…
Online demo: https://dark2017.github.io/vu…
Vscode plug-in
any-rule
Any-Rule provides many common regular matches and is easy to use, one-click, and you can customize your regular expressions to fit your project needs.
Recommend index: ⭐
Git Graph
This is a can view the history of the git plug-in, use very convenient, after installation can view a file of each part to submit records, and time, corresponding submitted for requirements specification git and optimize submit records such as friendly and straight pipe, of course, also can use sourcetree, specific see individual be fond of.
Recommend index: ⭐ at Daisy
project-tree
This is a plugin that automatically generates the structure of a project. For those who need to describe the output of the project and the overall structure, it should be very helpful.
Recommend index: ⭐ at Daisy
Todo Tree
Todo Tree is a simple plugin that prompts you Todo something. Comment out // Todo in your code. The word Todo will appear prominently in your code, and you will see a prompt in your sidebar.
Recommend index: ⭐ at Daisy
NGINX Configuration
It is recommended for students who configure NGINX frequently. The syntax of NGINX is highlighted, and it is extremely comfortable to use
Recommend index: ⭐ at
koroFileHeader
Every time you create a new file, it automatically generates author information, creation time, update time, etc., in the header, and the update time is automatically refreshed according to the last time you saved ~ There are also some interesting header notes (such as Buddha, dragon, etc.) here
Recommend index: ⭐ at Daisy
Other/Black Tech
postman
Before and after the students can use, interface debugging tool, debugging is not too simple ~
Recommend index: ⭐
Official website: https://www.postman.com/
snipaste
Screenshot artifact, than your QQ or WeChat screenshot with N times, do not believe their next play.
Recommend index: ⭐
Official website: https://zh.snipaste.com/
Navicat Premium
Visual database management, for such as I will only add, delete, change check the front end is not too friendly, easy to use, database management minutes.
Recommend index: ⭐
Website address: http://www.navicat.com.cn/pro…
lucky-canvas
It is an open source lottery plug-in for big wheel, developed based on JS + Canvas. For students with operational activities requirements, you can use it. It has nine grids and big wheel, and make decisions according to your own needs.
Recommend index: ⭐ at Daisy
Website address: https://100px.net/demo/wheel/…
wangEditor
A powerful rich text box editor, and an open source team is maintaining the project. Overall, it’s pretty good, and those who need it recommend using this plugin as a priority.
Recommend index: ⭐ at Daisy
Website address: https://www.wangeditor.com/
ImageHover Effects 🐶
This is an out-of-the-box CSS animation site, quite interesting, mainly processing animation transition effects, you can directly copy CSS code into your project, don’t have to worry about the animation is not good ~
Recommend index: ⭐ at Daisy
Website address: https://turkyden.com/image-ho…
JS 2020
This is a summary of the global JS 2020 (updated every year) including technical trends, practitioners, etc., is very suitable to understand the overall trend of the entire JS industry and his huge ecosystem ~
Recommend index: ⭐
Website address: https://2020.stateofjs.com/en…
Chrome Cleans Cache
Here you can clear some sites of the DNS cache, especially suitable for the need to proxy projects to local development of students, with the SwitchHost use better ~
Recommend index: ⭐ at Daisy
Chrome ://net-internals/# HSTS
switchhost
SwitchHosts is a tool for managing and switching multiple hosts schemes. If you want to modify the host file, but do not use it, you will have to manually modify the host file in C disk, which is quite troublesome. Use it to save your time
Recommend index: ⭐ at Daisy
Website address: https://github.com/oldj/Switc…
Visualize the NGINX configuration
All you need to do is click the mouse and select the configuration you want. It will generate the corresponding template and download it directly to your nginx configuration file
Recommend index: ⭐ at Daisy
Website address: https://www.digitalocean.com/…
Online transfer GIF
Uuploading and intercepting your recorded video can generate the corresponding GIF file ~ and it is free of charge. The disadvantage is that it can only intercept 5 seconds. If the pixel is too large, the conversion time may be longer, which is suitable for DEMO renderings ~
Recommend index: ⭐ at
Website address: https://app.xunjiepdf.com/
NPM figure link
If you want to publish an NPM package and show the latest release date and version on GitHub or elsewhere, then this is for you
Recommend index: ⭐ at
Official website: https://nodei.co/
The last
The above recommended index is only personal recommendation without any other meaning if you have any questions or add welcome to leave a message ~ this article will continue to update, continue to add suggestions to collect ~