前端拿到新电脑需要做环境的准备

代理工具

whistle – 浏览器端

基于Node实现的跨平台web调试代理工具，主要用于查看、修改HTTP、HTTPS、Websocket的请求、响应，也可以作为HTTP代理服务器使用。whistle采用的是类似配置系统hosts的方式，一切操作都可以通过配置实现，支持域名、路径、正则表达式、通配符、通配路径等多种匹配方式，且可以通过Node模块扩展功能。

配置

• 安装
  前置条件 - node

  npm install -g whistle
  w2 help // 测试是否安装成功
  w2 -n ** -w ** --host 127.0.0.1 start // 启动whistlewindow 浏览器设置
  

• chrome扩展插件 - Proxy SwitchyOmega
• 访问 http://localhost:8899 进行代理配置
• 如果出现https协议不安全问题，请下载相关证书
  whistle-抓取https

switchhost – 全局代理

node

nvm node版本管理器

常用命令

// 到安装的目录下执行
nvm install 14.19.0 // 下载应版本的node
nvm use 14.19.0 // 切换node到指定版本
nvm ls // 查看本机现存node的版本

npm-包管理工具

全局安装的相关包

+-- @vue/cli@5.0.8
+-- anywhere@1.6.0  // 项目启动
+-- babel-cli@6.26.0
+-- cnpm@8.4.0
+-- corepack@0.10.0
+-- cwebp-bin@8.0.0 // 图片转webp
+-- http-server@14.1.1
+-- jest@29.1.2
+-- lighthouse@9.6.6 // lighthouse
+-- mddir@1.1.1 // 生成文件结构树
+-- npm@8.11.0
+-- nrm@1.2.5 
+-- pm2@5.2.0
+-- pnpm@6.35.1
+-- ts-node@10.9.1 // 运行ts文件
+-- tyarn@0.3.8
+-- typescript@4.8.2
+-- vue@3.2.38
+-- whistle@2.9.28
+-- yarn@1.22.19

nrm 镜像管理器

nrm ls // 显示可用源
nrm use taobao // 切换下载源为taobaovue环境

vscode 配置

Extensions 插件篇

• Auto Close Tag - 自动闭合标签
• Auto Rename Tag - 标签成对
• Dev Containers - docker
• Docker
• ESLint
• Git History - git管理
• koroFileHeader - 函数文件头部注释
• Live Server
• Prettier ESLint
• Vetur
• vscode-proto3
• WSL

ESLint Setting

{
  "eslint.run": "onSave",
  "eslint.enable": true,
  "editor.formatOnSave": true,
  "eslint.alwaysShowStatus": true,
  "eslint.codeActionsOnSave.rules": null,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "html",
    "vue"
  ],
  // "eslint.run": "onSave",
  "editor.codeActionsOnSave": {
    "source.fixAll": true // 保存时使用eslint校验文件
  },
  "[typescript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "files.autoSave": "afterDelay",
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "editor.tabSize": 2,
  "explorer.confirmDelete": false,
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "[css]": {
    "editor.defaultFormatter": "vscode.css-language-features"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "eslint.execArgv": null,
  "terminal.integrated.defaultProfile.linux": "bash",
  "[less]": {
    "editor.defaultFormatter": "vscode.css-language-features"
  },
  "fileheader.cursorMode": {
    "description": "",
    "param": "",
    "return": ""
  },
  "fileheader.configObj": {
    "autoAdd": false,
  },
  "protoc": {},
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      //设置分号
      "semi": false,
      //双引号变成单引号
      "singleQuote": true,
      "trailingComma": "none"
    },
    "js-beautify-html": {
      "wrap_attributes": "force-expand-multiline",
      "wrap_line_length": 200,
      "end_with_newline": false,
      "semi": false,
      "singleQuote": true,
    },
    "prettyhtml": {
      "printWidth": 100,
      "singleQuote": false,
      "wrapAttributes": false,
      "sortAttributes": false
    }
  },
  "diffEditor.ignoreTrimWhitespace": false
}

git

nginx

Docker

Docker 是一个开源的应用容器引擎，让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中，然后发布到任何流行的 Linux或Windows操作系统的机器上，也可以实现虚拟化。容器是完全使用沙箱机制，相互之间不会有任何接口。

windows下安装docker

1. 安装docker客户端

官方下载地址：Docker Desktop Installer.exe 下载地址
国内镜像：Windows安装包下载地址

2. 确保电脑里已经安装wsl2
3. 安装完毕，打开客户端，如若出现wsl错误，更新wsl2

更新程序地址：下载软件地地址
微软官方文档

Docker常用指令

镜像（Image）：就相当于是一个 root 文件系统。比如官方镜像 ubuntu:16.04 就包含了完整的一套 Ubuntu16.04 最小系统的 root 文件系统。
容器（Container）：镜像和容器的关系，就像是面向对象程序设计中的类和实例一样，镜像是静态的定义，容器是镜像运行时的实体。
仓库（Repository）：仓库可看成一个代码控制中心，用来保存镜像。

docker pull <image-name> // 拉取获取镜像
docker run -it ubuntu /bin/bash // 启动镜像 -i:交互式操作 -t: 终端 /bin/bash 指令->进入shell
docker images // 查看镜像
docker rmi <image-id> // 删除镜像

docker ps -a // 查看所有容器
docker rm <container-id> // 删除容器
docker start <container-id> // 启动容器
docker stop <container-id> // 停止容器

docker logs 容器id // 查看日志

删除本地所有镜像：$ sudo docker rmi -f $(sudo docker images -aq)
删除本地所有容器：$ sudo docker rm -vf $(sudo docker ps -aq)
构建本地镜像：$ sudo docker build .

浏览器插件

• 掘金插件
• 金山文档插件开发工具
• jSON-handle
• Proxy SwitchyOmega
• Tampermonkey
• VisBug

VMware 虚拟机

辅助小工具

• snipaste - 截图工具
• utools - 桌面小工具集合
• postman - 接口调试工具
• 格式工厂 - 不同文件格式转换工具
• 声卡 maxxAudiopro
• EV录屏