FE Developer Share About Tools | Front-end Developer

本文来源语雀文章：🚀 FE | Front-end Developer Share Resources|语雀

In work, study, and daily life, it is often unavoidable to use some convenient tools, so this article will introduce some tools and essential gadgets that I think are commonly used by Front-end Developers.

在工作或学习以及日常生活中，经常避免不了会使用一些便捷工具，那么本文将介绍分享一些我个人认为的前端开发工作者常用的一些工具与必备小利器等。

Editor

WebStorm | JetBrains

The Version of WebStorm here is WebStorm 2023.2.4, for more about cracked versions of WebStorm, please click here.

本文相关 WebStorm 版本是 WebStorm 2023.2.4，更多关于 WebStorm 教程，请看🔓 前端软件： JetBrains WebStorm 2023.2 最新安装教程、前端开发必备神器：WebStorm。

The followings are some useful WebStorm plugins, plugins installation location is: File | Settings | Plugins.

以下内容则是一些好用的 WebStorm 插件（插件安装位置：WebStorm 左上角配置项中选择 File | Settings | Plugins）。

WebStorm Plugins

To know more about WebStorm's plugins, please refer to this article for details.

若想知道/了解 更多关于 WebStorm 好用插件的介绍 详见这篇：WebStorm 好用插件分享。

WebStorm 插件列表一览

  • .env files support

  • .ignore

  • AI assistant

  • Atom Material Icons

  • Better Comments

  • CamelCase

  • ChatGPT - EasyCode

  • Chinese (Simplified) Language Pack / 中文语言包

  • Code MinMap

  • CodeGlance

  • CodeGPT

  • CSV Editor

  • Dart

  • DevHelper

  • Extra ToolWindow Colorful Icons

  • File Expander

  • Github Markdown Emojis

  • GitToolBox

  • HighlightBracketPair

  • i18n Ally

  • i18n support

  • IDE Eval Reset

  • IdeaVim

  • ImagePreview

  • Import Cost

  • Indent Rainbow

  • IntelliVue

  • JSON Sorter

  • JsonToTs

  • Key Promoter X

  • LeetCode Editor

  • Markdown Editor

  • Markdown Image Support

  • Material Theme UI

  • MDX

  • Modern React Snippets

  • NPM Update Denpendencies

  • Presentation Assistant

  • Preview.js

  • Rainbow Brackets

  • Randomness

  • React Buddy

  • Regex Rename Files

  • Space

  • String Manipulation

  • Stylus

  • SVGA Support

  • Tabnine: AI Code Completion & Chat in Java JS/TS Python & More 1.11.1 Tabnine

  • Tailwind Formatter

  • todo4me

  • TONGYI Lingma - Your AI Coding Assistant

  • Translation

  • Unocss

  • Vitesse Theme

  • Vlang

  • WakaTime

  • WebStorm Help

  • Wechat mini program support

Other Editors

VS Code（Visual Studio Code）

Windows Products | Tools_Software

Programming and Work Usage

编程工作 Use：

Tool Name

Description

Chrome【Brower】

Firefox【Brower】

Safari【Brower】

Opera【Brower】

Microsoft Edge【Brower】

Chrome 默认只能安装在 C 盘（C:\Program Files\Google\Chrome\Application），需手动转移安装路径：

  • 直接复制 C 盘原路径下 Google 文件至其它盘目标文件夹

  • win+R 执行命令 mklink "谷歌浏览器原安装路径""谷歌浏览器新路径"

  • mklink "C:\Program Files\Google""E:\Chrome\Google"

  • 原快捷方式不可用，需通过目标文件夹下的 chrome.exe 新建新的快捷方式使用

Firefox 默认安装位置 C 盘（C:\Program Files\Mozilla Firefox）

Edge 浏览器默认安装位置 C 盘（C:\Program Files (x86)\Microsoft\Edge\Application）

官方消息： 2023年2月14日关闭IE浏览器，Edge 替代

SwitchHosts【Ladder】

管理、切换 hosts 工具，加速 GitHub 访问

Clash【Ladder】

代理加速，快速访问外网

WebStorm【CodeEditor | JetBrains】

￥需激活

IntelliJ IDEA【CodeEditor | JetBrains】

￥需激活

VSCode【CodeEditor】

微信开发者工具【CodeEditor】

钉钉小程序开发工具2.0【CodeEditor】

默认安装位置 C 盘（C:\Users\ 用户名 \AppData\Local\Programs\dingone），自行转移目标盘

Adobe系列$【Adobe】

￥需激活 官网购买，或自行搜索/其它下载可参考公众号_资源汇总

Notepad++、Typora_cn$【TextEditor】

￥Typora 需激活

Git、Git GUI-TortoiseGit、Git GUI-GitHub Desktop【RevisionControl】

GitHub Desktop 默认安装路径：C:\Users\ 用户名 \AppData\Local\GitHubDesktop 可自行剪切转移

VisualSVN Server、TortoiseSVN【RevisionControl】

XFTP、XSHELL | NetSarang 官网免费下载【ServerConnection | NetSarang】

Postman【SoftwareTest / QA】

默认安装位置 C 盘：C:\Users\ 用户名 \AppData\Local\Postman，自行转移

Navicat Premium 16【Database】

需激活，注意不同版本激活不一样

Jenkins 【DevOps | CI CD】

Figma | FigmaEX【Design】

可以先下载汉化版 FigmaEX 试用；

Figma 官网下载的 默认安装位置在 C 盘：C:\Users\ 用户名 \AppData\Local\Figma

PxCook_像素大厨【Design】

PPDuck_图片压缩神器【Tool | ImageCompress】

需￥69.9 购买激活码

默认安装路径 C 盘：C:\Users\ 用户名 \AppData\Local\Programs\PPDuck3，自行转移

软件打开显示「剩余10张可压缩」：每次打开软件最多能压缩10张，重启软件之后，又能再压缩10张

COSBrower_COS 对象存储【CodeTool | OOS】

Beyond Compare_cn | BCompare_en【CodeTool】

需激活，这里是参考可用的绿色版

ngrok【Server】

NAT Traversal 内网穿透

Nginx【Server】

Apache、Tomcat、Nginx

NodeJS【Server】

nvm【Package-Management】

使用 nvm 安装 node.js npm、cnpm、yarn、pnpm、nvm、nrm

Efficiency Tool

效率工具类：

Tool Name

Description

spacedesk【RemoteConnection】

屏幕/显示器扩展-无线&有线 win+P

Splashtop Wired XDisplay【RemoteConnection】

屏幕/显示器扩展-有线 默认安装在 C 盘路径

ToDesk、向日葵【RemoteConnection】

远程桌面软件/远程控制软件

Snipaste【Screenshot】

截图&贴图软件 直接下载后解压可用

FastStone Capture$ | FastStone_en【Screenshot】

屏幕捕捉和截图工具 $19.95 美元

WinSnap【Screenshot】

屏幕截图软件 需$19.95 购买

直接 exe 文件运行，可以自定义捕获图片的样式（阴影、反射、轮廓等）

ZoomIt 【Screenshot】

演示辅助软件

重点快捷键说明

  • ➢ Ctrl+1 放大

  • ➢ Ctrl+2 画图
    ➢ 画图时按住ctrl是矩形；按住tab是椭圆
    ➢ 画图的时候按字母可以改变颜色。    r红色 b蓝色 g绿色 p粉色 o是橙色

OBS Studio【ScreenRecorder】

录屏、直播软件

LICEcap 、ScreenToGif 【Tool | GifCapture】

GIF 动图制作与编辑软件

DiskGenius 【Tool】

数据恢复及分区管理软件

ShellMenuView 【Tool】

右键菜单清理工具

ShellMenuView是是NirSoft提供的用于专门清理右键菜单的一个免费的小工具，支持语言包下载，它列出所有的右键菜单扩展，并允许禁用或删除。

或注册表编辑：【regedit】-【HKEY_CLASSES_ROOT\Directory\Background\shellex\ContextMenuHandlers】

或自行在安装的应用【设置】中关闭某些右键菜单选项

Everything 【Document Software】

文件搜索工具

Everything是一个强大的文件搜索工具，它体积小巧，界面简洁易用，快速建立索引，能够以极快的速度帮助用户找到计算机上的文件和文件夹，并提供了许多定制化和扩展性的选项。同时占用极低的系统资源，实时跟踪文件变化，并且还可以通过http或ftp形式分享搜索。

Daily Usage

日常应用类：

Tool Name

Description

7-zip【Document Software】

WPS Office、Xmind【Office Software】

Xmind 默认安装在 C 盘（C:\Users\ 用户名 \AppData\Local\Programs\Xmind），若想更改直接剪切至目标文件夹即可

Foxmail、163_网易邮箱大师【Email】

推荐使用 Foxmail，可同时登录多个邮箱账号管理，画风简洁

若 Foxmail 无法登录 163 邮箱，需在网页登录 163 邮箱→设置中获取授权码 + MAP/SMTP服务、POP3/SMTP服务 务必开启

Rime、SogouInput_搜狗输入法【IME】

BaiduNetdisk_百度网盘【Netdisk】

quark-cloud-drive_夸克网盘 【Netdisk】

kdesk_元气桌面【Beautify】

Tile Genie 图片磁贴

微软应用商店安装的

Social and Entertainment

社交通讯&娱乐类：

Tool Name

Description

钉钉、飞书【Social】 TIM、微信、腾讯会议【Social | Tencent】

QQ音乐、喜马拉雅【Player】

PotPlayer【Player】

剪映、荐片【Player | Media Editor】

Chrome Extensions

Whether you are working or studying, you cannot without a browser. The most commonly used browser is Chrome. Here are some useful browser extensions.

不论是工作还是学习，都离不开浏览器，最常用的就是 Chrome 谷歌浏览器了，以下介绍一些好用的浏览器扩展程序插件等。

Chrome 浏览器迁移 备忘录
  • Google 密码管理工具（记得导出 csv 密码文件！）
  • 标签导航页 iTab 及时云备份~
  • 扩展选项 插件备份
  • ……

常用的扩展搜索网址：

Chrome - Chrome Plugins 插件管理安装

MacOS Products

Here are some Mac related products and tools in advance notes.

这里是一些 Mac 相关的产品、工具预先备忘小记。

参考来源：https://segmentfault.com/a/1190000021187124

  • Arc - [Browser] Arc is the Chrome replacement

  • Raycast - [Launcher] Supercharged productivity 启动器

  • Figma - [Design] The Collaborative Interface Design Tool

  • Better365 - [Screen | ScreenRecorder] Capture your screen

  • Kap - [Screen | ScreenRecorder] Capture your screen,GIF Recorder

  • OBS Studio - [Screen | ScreenRecorder] Screencap,Video recording and live streaming

  • MonitorControl - [Screen | ScreenMonitor] Control the monitor in macOS,for Apple Silicon and Intel Mac 平台下的显示器亮度控制工具

  • Picsee - [Beautify | Photo] File-based photo management 看图 & 照片管理

  • Paste - [Tool] Clipboard manager for Mac, iPhone, and iPad

  • TotalFinder - [Tool] Finder 增强软件

  • f.lux - [Tool] 护眼工具

  • Perculia - [Tool | Bluetooth] Bluetooth assistant

  • Command X - [Tool | Shortcut] Cut and paste files & folders

  • Thor Launcher- [Tool | Shortcut] Open the right application ASAP

  • RunCat - [Tool | Monitor] Cat living in the menubar 菜单栏 CPU 可视化监测工具

  • iTerm2 - [Terminal]

  • MockUPhone - [Tool] Free and simple screenshots device mockups generator 简单的屏幕截图设备模型生成器

未完待续……