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

一、开发环境

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下载地址；

以下主要还是记录vscode的内容：

vscode插件系列：

• 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

css动画演示   https://www.webhek.com/post/css3-animation-sniplet-collection/#/

常用开发小工具

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/

2. 渐变配色   http://color.oulu.me/

3. 头像生成  https://pfpmaker.com/

4. 表情符号  https://www.emojiall.com/zh-hans

5. 阿里巴巴图标库   https://www.iconfont.cn/

6. 图片设计  https://www.canva.cn/

7. 高清图片  https://unsplash.com/

8. 各类插图  https://www.manypixels.co/gallery

日常软件

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. 翻译、邮箱、通讯等。。。

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

除了一些软件、网站的分享，入职一家新公司，需要快速去熟悉什么，也来叨叨几句，去到一个新的环境，要熟悉的内容，做好笔记，总结经验，下面是仅是我个人的一些小见解，合则取

1. 熟悉 人

熟悉自己所处的团队，人际关系处好，熟悉团队的习性、技术栈、技术水平，不管是当技术管理还是技术开发，都要知道自己所处团队，能给团队带来什么？能从团队里获得什么？

2. 熟悉 目标

公司的目标是什么？ 部门的目标是什么？ 团队的目标是什么？ 自己的目标是什么？

3. 熟悉 流程

行政、人事、产研测流程等，熟悉各种流程，能让自己工作节省不少时间，特别产研测流程，只有熟悉流程才能够去分析是否合理，和过往比较是否能够给团队提出建议，或者好的流程也能让自己吸收作为经验；

加油，老铁们！