preface

There are two main tools involved in front-end development

  1. Coding tools
  2. Develop peripheral tools

Coding tools are what we use most. To do good work, we must sharpen our tools first, so a good coding tool can improve our development efficiency. Realistically, it is to finish work early and go home for dinner. I’ll focus on the following two tools, which you can choose to use.

Coding tools

1.webstorm- Charge/free of charge

The first tool I would like to recommend is webStorm, which is also the tool I am using. Many people say that JetBrains is made by JetBrains, and it must be excellent. The user experience is really good, and the plug-ins are also rich and high quality.

Most of JetBrains’ products are charged. Webstorm’s personal version is available for around 300 RMB, so of course you know all about it. Since it is my main development tool, I bought a personal license.

Because it is fully functional, and is based on Java development, so the configuration requirements of the computer will be a little high, low configuration computers will be a bit sluggish. My favorite features are:

  1. Smart code hints that are accurate because the project is indexed when it starts
  2. Find references. For modular projects, it is easy to see who references the module
  3. Refactoring, renaming variables or file names looks for references and synchronizes changes
  4. Accurate fast jump method/component definition location
  5. The version control tool, which uses the UI to manipulate Git, diff, merge, etc., is very user-friendly, especially for merge. You can also use the command line to merge git
  6. Setup synchronization (only licensed), login accounts, and Settings across multiple devices will automatically synchronize and handle operating system differences
  7. Upsource integration is simpler and easier to operate
  8. The local history function, which is so good that you can find it through it even if you have to delete some code
  9. The rest is for you to explore

2,vscode- free

Vscode is an open source tool of Microsoft, which is also very popular at present. The plug-ins are rich, fast to start, and relatively light. It is also favored by many developers, and many people write plug-ins for it.

Since Github was acquired by Microsoft, VSCode has made great adaptions to Github, including setting synchronization, Github code management, and even supports the deployment of vscode online versions on Github.

However, because it is small, some aspects may need to install plug-in support, not like Webstorm out of the box, ordinary development is enough, more attractive has the following features:

  1. Typescript support is great because typescript was also developed by Microsoft
  2. Plugins are plentiful and Chinese support is perfect
  3. Remote development is supported, with the remote Develop plug-in allowing you to modify code on the server over SSH
  4. By installing plug-ins corresponding to the development language, the prompt is more accurate
  5. To set up synchronization, you can use a Microsoft or GitHub account

Develop peripheral tools

1, picture compressiontinypng- free

Tinypng is an excellent image compression tool that can be used directly in the browser or downloaded from the client.

If you compress a small amount of pictures, you can use the client to compress them. The clients are all developed by the third party. Therefore, we need to apply for APIkey first. If not enough, you can apply for multiple uses;

TinyPNG – Third – Party Solutions

TinyPNG4Mac has the following advantages:

  1. Batch compression
  2. Replace the original image (there is a check under the Settings button)
  3. Simple page and easy to operate

Of course, we can also integrate tinyPNG into our IDE, there are plug-ins for vac ODE and WebStorm, just need to apply the APIkey to operate compression in the IDE, also very convenient.

2. Cutting toolPxCook- free

Pixels, amount for PS cut figure font more friends can have a try, pictured right can be directly generated code, measure distance are useful, because the PS requirements for computer is high also, open is a waste of memory, so usually cut pictures out, close the PS, and then in the development with pxcook directly to measuring size, etc.

PxCook – efficient and easy to use automatic annotation tool, generate front-end code, design and research collaboration tool

The tool is also free and currently supports Windows/MAC platforms.

3, caughtcharles- Charge/free of charge

When doing the mobile terminal development, cannot avoid to caught, because inside the browser simulator can’t cover all scenarios, some we want to debug in the App, grasp the request, links, cannot leave caught network simulation tools, although the caught tools available in the market is more, but personal recommendations, Charles, the UI is simple, powerful.

For HTTPS packet capture, you can search for relevant articles on Zhihu, but there is no more introduction here

Charles HTTPS packet capture – Search results

4. Switch networksswitchHosts- free

It is a tool for switching hosts, which is more practical for friends who want to switch network environment repeatedly. When debugging code, sometimes we want to switch different networks for debugging, we use different hosts configuration by controlling the switch above, Windows we need to use the administrator to run.

SwitchHosts currently has the following features:

  1. The configuration of multiple hosts is merged
  2. Hosts group. Only one group can be selected (it is very friendly to switch to different environments for the same project)
  3. Supports configuration import and export
  4. Remote configuration support (unified configuration can be assigned to the team for maintenance)
  5. Open source/cross-platform

5, figure of beduPic- free

At the time of writing, we may have a need to insert pictures in context, especially writing markdown friend, image storage is the problem, we usually put them into a url link, and then insert the article instead of the file is stored in the local folder for reference, or move the pictures after we hung up the article figure.

This is the best graph bed tool I have ever used. Although there is iPic on Mac, advanced functions need to be charged. UPic is completely open source and free, and many graph beds are supported, but only on Mac platform.

Currently supported map beds are: smms,UPYUN USS,qiniu KODO,Aliyun OSS,TencentCloud COS,BaiduCloud BOS,Weibo,Github,Gitee,Amazon S3,Imgur,custom upload api, …

Supports the following rich functions:

  1. Mac access extension, directly right-click upload
  2. Support clipboard upload, generally is directly uploaded after wechat screenshots
  3. File upload copies the URL directly to the clipboard
  4. Supports multiple file uploads, and copies all successfully uploaded links to the clipboard
  5. Support is not limited to image files, can be JS/HTML/MP4, etc

The above are some tools for personal use, if you have a very useful tool, also welcome to leave a message in the comments section.

Zhihu links: zhuanlan.zhihu.com/p/413960757