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

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

image.png


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


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


window 10 系统桌面图如下:


image.png


1、首要工具


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


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


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


3.科学上网这里就不多说了


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浏览器插件合集


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


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


image.png


6、vscode插件合集


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


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


image.png

image.png


image.png


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


  • 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://juejin.cn/post/7046287977000992781
npm i tree-node-cli -g
tree -L 3 -I "node_modules"


  • L为 展示的深度层级


  • I为 排出文件夹


image.png


  • h为 命令行帮助信息


image.png


8.2、发掘金博客小工具





8.3、clover


  • window多标签文件夹工具


image.png


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


image.png


8.5、Navicat Premium


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


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


image.png


8.6、Everything查询


查询文件


image.png


查询路径


image.png


8.7、whatpulse


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


image.png


查看具体软件使用情况


image.png


8.8、wakaTime


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


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


image.png


9、总结


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


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


我的个人github:github.com/aehyok


我的前端项目:pnpm + monorepo + qiankun + vue3 + vite3 + 工具库、组件库 + 工程化 + 自动化


不断完善中,整体框架都有了


在线预览:vue.tuokecat.com


github源码:github.com/aehyok/vue-…

目录
相关文章
|
2月前
|
前端开发
Github项目分享——免费的画图工具drow,最新前端面试题整理
Github项目分享——免费的画图工具drow,最新前端面试题整理
|
13天前
|
前端开发 JavaScript
前端模拟接口工具推荐——Apifox(mock数据)【图解教程】
前端模拟接口工具推荐——Apifox(mock数据)【图解教程】
110 1
|
15天前
|
Web App开发 缓存 前端开发
前端性能优化技巧与工具
【6月更文挑战第30天】前端性能优化旨在提升Web应用速度和响应性,关乎用户体验、转化率及SEO。关键技巧包括减少HTTP请求、压缩资源、利用缓存、异步加载和优化DOM操作。工具如Lighthouse、PageSpeed Insights、Webpack Bundle Analyzer及Chrome DevTools提供性能分析和优化建议。优化是持续的过程,适应复杂Web需求。
|
20天前
|
移动开发 前端开发 JavaScript
前端学习加速器:高效软件工具与实用设置攻略
前端学习加速器:高效软件工具与实用设置攻略
前端学习加速器:高效软件工具与实用设置攻略
|
20天前
|
存储 JavaScript 前端开发
vue 快速入门+vite前端构建工具
vue 快速入门+vite前端构建工具
29 0
|
1月前
|
Web App开发 前端开发 网络协议
性能工具之常见压力工具是否能模拟前端
【6月更文挑战7天】性能工具之常见压力工具是否能模拟前端
17 0
|
2月前
|
资源调度 JavaScript 前端开发
Vite:下一代前端构建工具的快速上手
Vite 是由 Vue.js 的作者尤雨溪开发的下一代前端构建工具,它以其快速的冷启动、按需编译和热更新能力而受到广泛关注。Vite 通过利用浏览器原生的 ES 模块导入功能,提供了几乎即时的开发环境启动速度和高度优化的开发体验。
51 2
|
2月前
|
缓存 前端开发 JavaScript
如何优化前端性能:最佳实践与工具推荐
在当今互联网时代,用户对网页加载速度和性能的要求越来越高。本文将介绍一些优化前端性能的最佳实践,包括代码压缩、资源合并、懒加载等技术,并推荐一些实用的工具,帮助开发者提升网页加载速度和用户体验。
|
2月前
|
前端开发 持续交付 开发工具
【专栏:工具与技巧篇】版本控制与Git在前端开发中的应用
【4月更文挑战第30天】Git是前端开发中的必备工具,它通过分布式版本控制管理代码历史,支持分支、合并、回滚等操作,促进团队协作和冲突解决。在前端项目中,Git用于代码追踪、代码审查、持续集成与部署,提升效率和质量。优化协作包括制定分支策略、编写清晰提交信息、定期合并清理分支及使用Git钩子和自动化工具。掌握Git能有效提升开发效率和代码质量。
|
2月前
|
Dart 前端开发 开发者
【Flutter前端技术开发专栏】Flutter中的性能分析工具Profiler
【4月更文挑战第30天】Flutter Profiler是用于性能优化的关键工具,提供CPU、GPU、内存和网络分析。它帮助开发者识别性能瓶颈,如CPU过度使用、渲染延迟、内存泄漏和网络效率低。通过实时监控和分析,开发者能优化代码、减少内存占用、改善渲染速度和网络请求,从而提升应用性能和用户体验。定期使用并结合实际场景与其它工具进行综合分析,是实现最佳实践的关键。
【Flutter前端技术开发专栏】Flutter中的性能分析工具Profiler