前端仔电脑里的秘密

# 开发环境

git/svn

版本控制首选，git下载 (opens new window)、svn下载 (opens new window)
node(nvm)

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

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

现在前端很多npm包都会用到python的编译，比如node-sass，我们自己开发node脚本也会常用到python，所以python基本上也成了前端电脑上必装的环境了，python下载地址 (opens new window)。

提示：在安装node的时候，可以勾选上一起安装python
vscode/webstorm/HBuilder

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

主要还是记录vscode的内容：
- 安装
  
  vscode下载地址 (opens new window)
- 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
docker

docker可以帮助前端快速获取一些偶尔使用的环境（偶尔使用的环境，又不想在电脑上安装一大堆），如：nginx、mysql、redis等之类的，之前发过一篇简单的使用，可以参考一下，地址 (opens new window)

# 开发环境

# 好网站

# 开发文档

# 在线IDE/代码美化

# 响应式开发、多平台测试、性能分析

# css

# 常用开发小工具

# 简历

# AI

# CDN

# 资料