前端人员电脑上需要准备的武器

发布于3/23/2023, 4:54:12 PM 阅读 117

作为一名前端开发人员，当你入职一家公司，拿到新发的电脑，你会对电脑干点啥，装开发环境？装软件？你是否铺天盖地到处找之前电脑备份的东西？又或者是想不起来有什么上一台电脑好用的软件叫什么名？

一、开发环境

1.git/svn

版本控制首选，git下载、svn下载

2.node（nvm）

作为前端，必备的一个环境，不用多解释了，node官网、node github地址、node中文地址 。 nvm是node的多版本管理器，如有需要在多版本node之间切换可使用nvm，安装教程

3.包管理器

视自身需求选择 cnpm、pnpm、yarn

4.python

现在前端很多npm包都会用到python的编译，比如node-sass，我们自己开发node脚本也会常用到python，所以python基本上也成了前端电脑上必装的环境了，python下载地址。提示：在安装node的时候，可以勾选上一起安装python

5.vscode/webstorm/HBuilder

前端用的最多的两款编辑器就是vscode/webstorm，webstorm收费，我平时用vscode比较多，这里就不多介绍webstorm了，下载地址也留下，webstorm下载。 HBuilder下载地址；

• git相关插件：gitLens、Git History、Git History Diff

• 汉化插件： Chinese (Simplified)

• 开发提示相关插件： Tabnine AI（强推）、Path Intellisense（路径提示）、Vetur、Volar、Auto Close Tag、Auto Complete Tag、Auto Rename Tag、HTML Snippets、Wrap Console Log Lite

• 浏览器调试插件： JavaScript Debugger、Debug Visualizer、scode-js-debug

• 静态服务器：Live Server

• 代码运行器： Code Runner

• 正则提示插件： any-rule、Regex Previewer（辅助验证正则结果）

• Docker插件： Docker

• 格式化类插件： EditorConfig for VS Code、ESLint

• 进制文件查看： Hex Editor

• TODO提示： Todo Tree

• 流程图绘制： drawio

• PDF查看： vscode-pdf

• Markdown预览：Markdown Preview Enhanced

• SVG文件预览：SVG Viewer

• 图片预览（在html或者css写地址的时候可直接预览）：Image Preview

• 文件依赖分析（如：.vue文件可以通过该插件看到引用了哪些依赖）：Dependency Cruiser Extension

• 颜色选择、设置：Color Highlight、Color Picker

• 快速生成注释：vscode-fileheader 和 koroFileHeader

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

• 接口请求：REST Client

二、网站系列

图片相关

1. 代码图生成 carbon https://carbon.now.sh/

2. 代码图生成 ray https://ray.so/

3. 图片压缩-tinypng https://tinypng.com/

4. 图片压缩-picdiet https://picdiet.eula.club/

5. 图片压缩-compresspng https://compresspng.com/zh/

6. 图片背景消除 https://www.remove.bg/zh

开发文档

1. 聚合类开发文档 https://devdocs.io/

2. 聚合类开发文档-overapi https://overapi.com/

3. docschina.org https://docschina.org/

4. 菜鸟教程 https://www.runoob.com/

5. roadmap.sh https://roadmap.sh/

在线IDE、代码美化

1. codepen.io https://codepen.io/

2. codesandbox.io https://codesandbox.io/

3. code.juejin.cn https://code.juejin.cn/

4. stackblitz.com https://stackblitz.com/

5. 代码美化 https://codebeautify.org/

css

常用开发小工具

1. smalldev https://smalldev.tools/

2. tool https://tool.lu/

AI系列

1. AI视频生成 https://www.synthesia.io/

2. AI代码 https://www.tabnine.com/

CDN系列

1. cdnjs.com https://cdnjs.com/

2. www.bootcdn.cn https://www.bootcdn.cn/

3. www.jsdelivr.com https://www.jsdelivr.com/

4. cdn.baomitu.com https://cdn.baomitu.com/

正则系列

1. regexr.com/ https://regexr.com/

设计系列

1. 配色 https://colorhunt.co/

日常软件

1. wps

2. 截图软件 snipaste https://www.snipaste.com/download.html

3. 轻量级gif录屏 LICEcap https://licecap.en.softonic.com/

4. 视频录制软件 - 野葱 https://www.yecong.com/

5. 录屏大师

6. 复制历史

7. mac需要安装软件： clipMenu、 Paste

8. window自带，快捷键 win+v 开启

9. 时序图

10. mac推荐一款叫 OmniGraffle

11. window Visio

12. 推荐一款在线的思维导图： 知犀思维导图 https://www.zhixi.com/

13. 推荐一款在线的PPT： 吾道 https://www.woodo.cn/

14. 有道云笔记 https://note.youdao.com/

15. notion https://www.notion.so/desktop

16. oneNote https://www.onenote.com/signin?wdorigin=ondc

17. 翻译、邮箱、通讯等。。。

四、梳理总结积累 - 新环境熟悉

https://www.devbbq.cn/blog/details/1679561651585