🛬🛬🛬前端仔电脑里的秘密

前言

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

这篇文章除了记录一些作为前端常用的一些开发环境、软件、网站等，还跟大家分享一下入职新公司需要了解的一些方向

一、开发环境

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的内容：

1. 安装
vscode下载地址
下载过程中如果遇到下载较慢可以通过两种方式解决。一是梯子
二是替换下载镜像链接，在vscode官网上找到对应要下载的版本，点击下载的时候会有一个下载链接
如：可以将红框中的下载链接替换成国内的镜像
替换后的链接： https://vscode.cdn.azure.cn/stable/f80445acd5a3dadef24aa209168452a3d97cc326/VSCode-darwin-universal.zip

vscode好用的插件系列

git相关插件：gitLens、Git History、Git History Diff、Git Graph
汉化插件： 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