携手创作，共同成长！这是我参与「日新计划 8 月更文挑战」的第21天，点击查看活动详情。

前言：大家好，我是 那个曾经的少年回来了。10年前我也曾经年轻过，如今已步入被淘汰的年龄，但如下幡然醒悟，所以活在当下，每天努力一点点，来看看2024年的时候自己会是什么样子吧，2024年的前端又会是什么样子，而2024年的中国乃至全球又会变成什么样子，如果你也有想法，那还不赶紧行动起来。期待是美好的，但是更重要的是要为美好而为之奋斗付诸于行动。

最近重装了系统，于是顺便整理了一下自己经常使用过哪些工具。

window 10 系统桌面图如下：

前端装机工具指南window真香版

1、首要工具

注意：腾讯电脑管家可能有些人不使用，这里就可以忽略掉，我自己是一直在使用。

  1. 驱动精灵：安装电脑驱动的 www.drivergenius.com

  2. 腾讯电脑管家: guanjia.qq.com

  3. kx上网这里就不多说了

2、电脑管家下载常用工具

注意： 可能有些人不使用腾讯电脑管家，以下所有都有链接可以下载的。前面几个真的人人皆知我就不说了。

  1. 腾讯桌面整理： 简单整理桌面快捷键和分组

  2. 谷歌浏览器：前端程序必备吧

  3. 微信：自己日常聊天用的

  4. 企业微信：公司日常工作交流

  5. WINRAR：压缩解压工具

  6. 搜狗拼音法

  7. WPS Office

  8. 向日葵：远程工具（TeamViewer很久没用了）sunlogin.oray.com

  9. 百度网盘：大家都懂的 pan.baidu.com

  10. 阿里云盘： 速度真的快了好多 www.aliyundrive.com

  11. XMind: 思维导图 www.xmind.cn

  12. Axure: 原型输出，偶尔一些流程图也在这里画 www.axure.com.cn

  13. snipaste：截图工具，前端真香 www.snipaste.com

  14. everything: 查找文件或文件夹，速度非常快 www.voidtools.com/zh-cn

3、常用其他工具网址

  1. 火绒：桌面拦截广告的 www.huorong.cn

  2. notepad++: 文本阅读器 www.notepadplus.com.cn

  3. wolai: 笔记记录 www.wolai.com

  4. notion: 国际版笔记记录 www.notion.so

  5. 语雀：笔记也不错，我的各种图现在都在这里画了 www.yuque.com

  6. 飞书文档：docs.feishu.cn

  7. Clover: window文件资源管理器文件夹多标签 clover.en.softonic.com

  8. PowerToys: 快捷方式和文件查找 github.com/microsoft/P…

  9. whatpulse: 统计键盘和鼠标输入情况 whatpulse.org

4、开发相关

  1. git 命令行工具：git-scm.com

  2. gitextensions图形操作界面： github.com/gitextensio…

  3. github Desktop桌面客户端：desktop.github.com

  4. visual studio code： code.visualstudio.com

  5. webstorm 有些前端比较喜欢：www.jetbrains.com/webstorm

  6. visual studio 2022：visualstudio.microsoft.com/zh-hans

  7. tapd.cn 需求bug：www.tapd.cn

  8. codesign 产品原型和UI：codesign.qq.com

  9. code.fun UI智能输出代码 code.fun

  10. 源码托管平台: code.aliyun.com

  11. code.aliyun升级版： codeup.aliyun.com

  12. apipost 接口测试Postman+Swagger+Mock: www.apipost.cn

  13. nginx 本机部署前端网站的 nginx.org/en/download…

  14. nodejs多版本管理工具nvm：我前几天整理的

  15. nrm yrm管理npm镜像源：我前几天整理的

5、chrome浏览器插件合集

截图非常清晰我就不一一列举了，有需要的话就拿走。

记得注册谷歌账号，不同电脑会同步插件的。

前端装机工具指南window真香版

6、vscode插件合集

先来看我电脑上装的，当然有些可能就是简单尝试一下，并没有卸载。

vscode中也可以同步配置，还是挺香的，不同每次重装电脑了都装一遍各种插件。

前端装机工具指南window真香版

前端装机工具指南window真香版

下面是我使用比较多的，我自己整理了一下,不分先后顺序

  • 0、韭菜盒子：偶尔看看股票基金，不用浪费时间捯饬来捯饬去

  • 1、Chinese (Simplified) Language Pack for Visual Studio Code：vscode汉化

  • 2、Auto Close Tag：html 自动闭合标签

  • 2、Auto Rename Tag：自动重命名成对的html

  • 3、GitLens：方便查看 git 日志，git 重度使用者必备

  • 4、Git History：查看文件变更历史，或者文件行变更历史

  • 4、Vetur：代码高亮

  • 5、Shades of Purple、Cyberpunk UMBRA：主题

  • 6、prettier：自动格式化代码

  • 7、material icon theme：左侧文件图标主题

  • 8、TODO：方便记录 TODO 记录（如 bug、注释、变更、待修复等问题、重点备注等）

  • 9、Volar ：Vue3 插件

  • 10、npm Intellisense：npm模块导入智能提示

  • 11、Path Intellisense：路径提示

  • 12、Import Cost：查看import依赖的大小

  • 13、Html Snippets：此插件能快速的输出html代码， 效率就是懒出来的，你们说对吧。

  • 14、Quokka.js：直接显示变量结果

  • 15、Tabnine AI：代码完成插件（真省事）

  • 16、Markdown Preview Enhanced：markdown编辑和预览

  • 17、JSON to TS：json转为TS申明

  • 18、Code Spell Checker：拼写检查

  • 19、Bracket Pair Colorizer 2 ：括号对齐利器

  • 20、Turbo Console Log ：快速日志

  • 21、……

7、linux服务器

平时自己会搞个腾讯云服务器或者阿里云服务器或者华为云服务器玩玩

  1. xshell：远程linux服务器www.xshellcn.com/xiazai.html

  2. xftp：linxu服务器传送文件 www.xshellcn.com/xiazai.html

  3. fileZIilla: 远程linux和文件传输 www.filezilla.cn

  4. Navicat Premium 数据库管理 www.formysql.com/chanpin.htm…

  5. redis: QuickRedis管理 quick123.net

  6. VisualStudio 2022: 有时候写几个.net core 接口玩玩

8、常用工具截图

8.1、生成tree

//window 10下
// https:///post/7046287977000992781
npm i tree-node-cli -g
tree -L 3 -I "node_modules"
  • L为 展示的深度层级
  • I为 排出文件夹

前端装机工具指南window真香版

  • h为 命令行帮助信息

前端装机工具指南window真香版

8.2、发博客小工具

  • ScreenToGif 屏幕录制转换为gif： www.screentogif.com

  • html2md html转换为md： www.helloworld.net/html2md

  • canva 封面图制作：www.canva.cn

8.3、clover

  • window多标签文件夹工具

前端装机工具指南window真香版

8.4、PowerToys 快速查找文件快捷打开

前端装机工具指南window真香版

8.5、Navicat Premium

什么数据库都可以管理，真的非常棒，也很省事。

自己的mysql数据库就用这个来当客户端的

前端装机工具指南window真香版

8.6、Everything查询

查询文件

前端装机工具指南window真香版

查询路径

前端装机工具指南window真香版

8.7、whatpulse

查看鼠标以及键盘按键次数 常规检查

前端装机工具指南window真香版

查看具体软件使用情况

前端装机工具指南window真香版

8.8、wakaTime

vscode中安装并配置一下这个插件，可以看到每个项目每天自己投入的时间。

说真的还是很有参考意义。

前端装机工具指南window真香版

9、总结

这里总结的都是我自己平常使用的，如果你也有很好的工具，可以评论区推荐给我，我们可以共同积累，加速成长。

我的个人博客：vue.tuokecat.com/blog

我的个人github：github.com/aehyok

我的前端项目：pnpm + monorepo + qiankun + vue3 + vite3 + 工具库、组件库 + 工程化 + 自动化
不断完善中,整体框架都有了
在线预览：vue.tuokecat.com
github源码：github.com/aehyok/vue-…