女王控的博客

  • 首页
  • 标签
  • 关于
  • 搜索

    • 前端开发环境配置

    • 女王控
    阅读时间：12分钟 文章字数：424字

    wsl

    wsl1 或 2 或类 linux 环境

    1. 配置步骤：https://docs.microsoft.com/zh-cn/windows/wsl/setup/environment 和 https://docs.microsoft.com/zh-cn/windows/dev-environment/javascript/nodejs-on-wsl

    2. 注意 wsl2 需要项目路径为 wsl2 的路径，推荐放在 /home/用户名/project 下面；wsl1 没有这个问题，可以直接放在 window 系统，通过 /mnt 访问。原因：安装了 wsl2 之后项目文件却在 windows 系统的情况下会造成文件改动后不能热更新。建议安装 Ubuntu18.04 的 wsl2

    3. 开机启动时使用 vscode remote 连接 wsl2 有可能连接失败，可以尝试重启 wsl2，即需要打开 powershell 控制台运行以下命令

      bash 复制代码 
      wsl --shutdown
wsl

    windows terminal

    windows terminal（windows 应用商店安装，以上配置步骤有，设置里面默认启动 Ubuntu18.04）

    ohmyzsh

    git 状态显示、命令配色/补全等多项功能，安装步骤：https://github.com/ohmyzsh/ohmyzsh/wiki

    autojump

    可以让在任意目录之间进行跳转

    bash 复制代码 
    $ brew install autojump
$ vim ~/.zshrc

61 plugins = (
62  git
63  autojump
64 )

$ source ~/.zshrc

    使用 autojump

    j + 目录缩写 快速去到你曾经进入过的目录

    autojump 会自动对你进入过的目录进行记录并且定义权重，使用 j 命令可以迅速进入目录

    bash 复制代码 
    $ j hub # 等价于 cd ~/workspace/github
$ j hub # 如果当前目录不对，可以重复执行该命令，会自动根据权重依次匹配
$ d # 会列出你曾经进入过的目录，输入前面的序号可以直接进入该目录

    zsh-syntax-highlighting

    命令高亮，安装步骤：https://github.com/zsh-users/zsh-syntax-highlighting/blob/master/INSTALL.md

    zsh-autosuggestions

    它能够根据你的命令历史记录即时提示，安装步骤：https://github.com/zsh-users/zsh-autosuggestions/blob/master/INSTALL.md

    powerlevel10k

    高性能 zsh 主题，安装步骤：https://github.com/romkatv/powerlevel10k

    vs code

    主要是 vs code remote 的安装（连接到 wsl2 开发）

    vs remote

    可以远程连接 ssh 进行开发，使用 vs remote 注意 ssh 密钥只能在 window 下不在 wsl 下，且 -i 参数后带的是私钥

    nvm

    管理 Node.js 版本，通过 nvm 我们可以同时安装/切换不同的 Node.js 版本，安装步骤：https://github.com/nvm-sh/nvm

    在 /home/用户名/.zshrc 下添加以下脚本，才可以在 zsh 中正常运行，否则找不到命令

    bash 复制代码 
    export NVM_DIR="\$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "\$NVM_DIR/bash_completion" # This loads nvm bash_completion

    使用命令

    bash 复制代码 
    $ nvm ls-remote # 列出所有支持的 Node.js 版本
$ nvm ls # 列出本地已安装的 Node.js 版本
$ nvm install 11.5.0 # 安装指定的 Node.js 版本
$ nvm alias default 11 # 设置默认使用的版本

    针对 zsh 启动性能的优化

    由于 nvm 以上脚本导致在启动 zsh 时延时较高，所以优化脚本如下

    bash 复制代码 
    if [ -s "$HOME/.nvm/nvm.sh" ]; then
  export NVM_DIR="$HOME/.nvm"
  nvm_cmds=(nvm node npm yarn wsl-open)
  for cmd in $nvm_cmds ; do
    alias $cmd="unalias $nvm_cmds && unset nvm_cmds && . $NVM_DIR/nvm.sh && $cmd"
  done
fi

    大致原理就是在运行 nvm/node/npm/yarn/wsl-open 相关命令时触发 nvm 的初始化

    nrm

    使用 nrm 可以让我们来切换不同的 npm 源而不用单独安装 cnpm 之类的库，安装步骤：https://github.com/Pana/nrm

    使用命令

    bash 复制代码 
    $ nrm ls # 列出当前支持切换的源
$ nrm use taobao # 使用 taobao 的源作为默认的 npm 源

    volta

    volta 管理前端开发环境，切换目录即切换开发环境

    bash 复制代码 
    # install Volta
curl https://get.volta.sh | bash

# 安装 node 默认版本，和 nvm alias default 有一定的冲突
volta install node

# start using Node
node

# 安装 node 最新版本到 example 项目下，并更新依赖到 package.json
cd example
volta pin node

    Python 环境

    1. pyenv 安装

    2. python 版本调整到 3.7 版本以上，vscode 的 python 拓展才可正常使用

    3. Python PIP 升级后执行命令报错：sys.stderr.write(f"ERROR: {exc}") 解决方法

      bash 复制代码 
      wget https://bootstrap.pypa.io/pip/3.5/get-pip.py && chmod a+x ./get-pip.py && ./get-pip.py

    sass 编译

    如果项目中有 sass 存在则需要 python 编译，需要以下处理

    • 安装 python2 sudo apt-get install python2.7

    • 在 /home/用户名/.zshrc 下添加以下脚本

      bash 复制代码 
      alias python="/usr/bin/python2.7" # 解决 sass 编译问题，需提前安装
python2 alias python2="/usr/bin/python2.7" # 解决 sass 编译问题，需提前安装 python2

    ssh 免密登录

    1. ssh-copy-id -i /home/tubt/.ssh/id_rsa.pub 用户名@ip
    2. 输入具体密码
    3. ssh 用户名@ip 这里即可免密登录

    命令行打开程序

    xdg-open

    命令行打开文件、目录、网址等等，但是打开文件时没有使用 windows 的默认打开方式

    bash 复制代码 
    # 安装 xdg-utils 工具包
sudo apt-get install xdg-utils
# 打开目录
xdg-open .
# 打开文件（这里没有调用 windows 的记事本打开）
xdg-open example.txt
# 打开网址
xdg-open https://baidu.com

    以下使用 wsl-open 可以做到用 windows 的默认方式打开

    wsl-open

    用 windows 的默认方式打开

    bash 复制代码 
    # 安装 wsl-open
npm install -g wsl-open
# 打开目录
wsl-open .
# 打开文件
wsl-open example.txt
wsl-open example.png
# 打开网址
wsl-open https://baidu.com

    可以在 .zshrc 设置如下一行，直接使用 open 命令

    bash 复制代码 
    alias open='wsl-open'

    外网访问 wsl

    设置端口转发到 wsl

    查看、复制 ip

    需要在 windows 上做端口转发，否则同一局域网内不能访问到 wsl，以下使用 powershell 命令

    首先在 wsl 查看 ip

    bash 复制代码 
    hostname -I | awk '{print $1}'

    同样也可以在 .zshrc 中配置别名，这里顺便把获取 windows 的地址配置了，也实现了复制 ip 的功能

    bash 复制代码 
    alias wsl_ip="hostname -I | awk '{print $1}'"
alias windows_ip="cat /etc/resolv.conf | grep nameserver | cut -d ' ' -f 2"
alias copy_wsl_ip="wsl_ip | clip.exe"
alias copy_windows_ip="windows_ip | clip.exe"
alias cwsl="copy_wsl_ip"
alias cwin="copy_windows_ip"

    设置端口转发

    在 powershell 命令行上操作，powershell 新窗口打开提升管理员权限

    powershell 复制代码 
    powershell start-process cmd -verb runas

    端口转发，这样设置后就能通过访问 http://{windows的ip}:3000 进而访问 wsl，当然端口号不一定要一样，你也可以用 7101 转发 7001

    powershell 复制代码 
    netsh interface portproxy add v4tov4 listenaddress=0.0.0.0 listenport=3000 connectaddress=wsl的ip connectport=3000

    显示所有转发端口

    powershell 复制代码 
    netsh interface portproxy show all

    如果要删除某一条规则，命令如下

    powershell 复制代码 
    netsh interface portproxy delete v4tov4 listenaddress=0.0.0.0 listenport=14000

    如果要清空列表，使用以下命令

    powershell 复制代码 
    netsh interface portproxy reset

    如果此时还不能访问，还需要注意的步骤有（以下假设需要用手机去访问同一局域网的电脑）

    1. 关闭 windows 防火墙
    2. 手机，电脑在同一局域网

    移动端真机调试

    背景

    wsl2 运行 spy-debugger 命令后，windows 上的浏览器却打不开调试界面

    产生原因

    经分析是 spy-debugger 在 windows 上访问了 127.0.0.1 网址，而这个网址是不能访问到 wsl2 的

    解决方案

    针对 wsl2 运行 spy-debugger 却不能代理的问题，直接在 windows 上运行 spy-debugger 来代替（这里同样需要配置端口转发，因为项目是跑在 wsl2 上）

    快捷键

    window terminal

    • ctrl + shift + t：打开 window terminal（快捷方式自定义命令）
    • ctrl + tab：切换命令行 tab
    • ctrl + shift + d：复制已有的命令行 tab
    • ctrl + shift + 1/4：打开新的 powershell/wsl 命令行 tab
    • ctrl + shift + w：关闭当前命令行 tab

    git

    以下是 zsh 的 git 插件提供的快捷命令

    bash 复制代码 
    alias g='git'

alias ga='git add'
alias gaa='git add --all'
alias gapa='git add --patch'
alias gau='git add --update'
alias gap='git apply'

alias gb='git branch'
alias gba='git branch -a'
alias gbd='git branch -d'
alias gbda='git branch --no-color --merged | command grep -vE "^(\*|\s*(master|develop|dev)\s*$)" | command xargs -n 1 git branch -d'
alias gbl='git blame -b -w'
alias gbnm='git branch --no-merged'
alias gbr='git branch --remote'
alias gbs='git bisect'
alias gbsb='git bisect bad'
alias gbsg='git bisect good'
alias gbsr='git bisect reset'
alias gbss='git bisect start'

alias gc='git commit -v'
alias gc!='git commit -v --amend'
alias gcn!='git commit -v --no-edit --amend'
alias gca='git commit -v -a'
alias gca!='git commit -v -a --amend'
alias gcan!='git commit -v -a --no-edit --amend'
alias gcans!='git commit -v -a -s --no-edit --amend'
alias gcam='git commit -a -m'
alias gcsm='git commit -s -m'
alias gcb='git checkout -b'
alias gcf='git config --list'
alias gcl='git clone --recursive'
alias gclean='git clean -fd'
alias gpristine='git reset --hard && git clean -dfx'
alias gcm='git checkout master'
alias gcd='git checkout develop'
alias gcmsg='git commit -m'
alias gco='git checkout'
alias gcount='git shortlog -sn'
compdef _git gcount
alias gcp='git cherry-pick'
alias gcpa='git cherry-pick --abort'
alias gcpc='git cherry-pick --continue'
alias gcs='git commit -S'

alias gd='git diff'
alias gdca='git diff --cached'
alias gdcw='git diff --cached --word-diff'
alias gdct='git describe --tags `git rev-list --tags --max-count=1`'
alias gdt='git diff-tree --no-commit-id --name-only -r'
alias gdw='git diff --word-diff'

alias gf='git fetch'
alias gfa='git fetch --all --prune'
alias gfo='git fetch origin'

alias gg='git gui citool'
alias gga='git gui citool --amend'

alias ggpur='ggu'

alias ggpull='git pull origin $(git_current_branch)'

alias ggpush='git push origin $(git_current_branch)'

alias ggsup='git branch --set-upstream-to=origin/$(git_current_branch)'
alias gpsup='git push --set-upstream origin $(git_current_branch)'

alias ghh='git help'

alias gignore='git update-index --assume-unchanged'
alias gignored='git ls-files -v | grep "^[[:lower:]]"'
alias git-svn-dcommit-push='git svn dcommit && git push github master:svntrunk'

alias gk='\gitk --all --branches'
alias gke='\gitk --all $(git log -g --pretty=%h)'

alias gl='git pull'
alias glg='git log --stat'
alias glgp='git log --stat -p'
alias glgg='git log --graph'
alias glgga='git log --graph --decorate --all'
alias glgm='git log --graph --max-count=10'
alias glo='git log --oneline --decorate'
alias glol="git log --graph --pretty='%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset'"
alias glod="git log --graph --pretty='%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%ad) %C(bold blue)<%an>%Creset'"
alias glods="git log --graph --pretty='%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%ad) %C(bold blue)<%an>%Creset' --date=short"
alias glola="git log --graph --pretty='%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset' --all"
alias glog='git log --oneline --decorate --graph'
alias gloga='git log --oneline --decorate --graph --all'
alias glp="_git_log_prettily"
compdef _git glp=git-log

alias gm='git merge'
alias gmom='git merge origin/master'
alias gmt='git mergetool --no-prompt'
alias gmtvim='git mergetool --no-prompt --tool=vimdiff'
alias gmum='git merge upstream/master'
alias gma='git merge --abort'

alias gp='git push'
alias gpd='git push --dry-run'
alias gpoat='git push origin --all && git push origin --tags'
compdef _git gpoat=git-push
alias gpu='git push upstream'
alias gpv='git push -v'

alias gr='git remote'
alias gra='git remote add'
alias grb='git rebase'
alias grba='git rebase --abort'
alias grbc='git rebase --continue'
alias grbd='git rebase develop'
alias grbi='git rebase -i'
alias grbm='git rebase master'
alias grbs='git rebase --skip'
alias grh='git reset'
alias grhh='git reset --hard'
alias grmv='git remote rename'
alias grrm='git remote remove'
alias grset='git remote set-url'
alias grt='cd $(git rev-parse --show-toplevel || echo ".")'
alias gru='git reset --'
alias grup='git remote update'
alias grv='git remote -v'

alias gsb='git status -sb'
alias gsd='git svn dcommit'
alias gsi='git submodule init'
alias gsps='git show --pretty=short --show-signature'
alias gsr='git svn rebase'
alias gss='git status -s'
alias gst='git status'
alias gsta='git stash save'
alias gstaa='git stash apply'
alias gstc='git stash clear'
alias gstd='git stash drop'
alias gstl='git stash list'
alias gstp='git stash pop'
alias gsts='git stash show --text'
alias gsu='git submodule update'

alias gts='git tag -s'
alias gtv='git tag | sort -V'

alias gunignore='git update-index --no-assume-unchanged'
alias gunwip='git log -n 1 | grep -q -c "\-\-wip\-\-" && git reset HEAD~1'
alias gup='git pull --rebase'
alias gupv='git pull --rebase -v'
alias glum='git pull upstream master'

alias gwch='git whatchanged -p --abbrev-commit --pretty=medium'
alias gwip='git add -A; git rm $(git ls-files --deleted) 2> /dev/null; git commit --no-verify -m "--wip-- [skip ci]"'

    日常工作顺序

    ctrl + shift + t（打开 window terminal）+ j hub（使用 autojump 的 j 命令快速跳转到 github 目录）+ yarn start（执行脚本）+ ctrl + shift + d（复制已有的命令行 tab） + code .（在 vscode 打开） + f11（窗口全屏）

    注：ctrl + shift + t 需要将 window terminal 快捷方式拖到桌面并设置此快捷键，否则按下没反应

    完整的 .zshrc 配置

    bash 复制代码 
    # 开启 powerlevel10k 主题的即时提示功能
if [[ -r "${XDG_CACHE_HOME:-$HOME/.cache}/p10k-instant-prompt-${(%):-%n}.zsh" ]]; then
  source "${XDG_CACHE_HOME:-$HOME/.cache}/p10k-instant-prompt-${(%):-%n}.zsh"
fi

# ZSH 安装路径
export ZSH=$HOME/.oh-my-zsh

# nvm 初始化脚本（延时触发）
if [ -s "$HOME/.nvm/nvm.sh" ]; then
  export NVM_DIR="$HOME/.nvm"
  nvm_cmds=(nvm node npm yarn)
  for cmd in $nvm_cmds ; do
    alias $cmd="unalias $nvm_cmds && unset nvm_cmds && . $NVM_DIR/nvm.sh && $cmd"
  done
fi

# 主题设置为 powerlevel10k
ZSH_THEME="powerlevel10k/powerlevel10k"

# 插件列表
plugins=(git autojump zsh-syntax-highlighting zsh-autosuggestions)

# 运行 zsh 配置
source $ZSH/oh-my-zsh.sh

# 别名设置

# 解决 sass 编译问题，需提前安装 python2
alias python="/usr/bin/python2.7"
# 解决 sass 编译问题，需提前安装 python2
alias python2="/usr/bin/python2.7"
# 打开方式别名
alias open="wsl-open"

# ip 命令别名
alias wsl_ip="hostname -I | awk '{print $1}'"
alias windows_ip="cat /etc/resolv.conf | grep nameserver | cut -d ' ' -f 2"
alias copy_wsl_ip="wsl_ip | clip.exe"
alias copy_windows_ip="windows_ip | clip.exe"
alias cwsl="copy_wsl_ip"
alias cwin="copy_windows_ip"

# 运行 powerlevel10k 主题配置
[[ ! -f ~/.p10k.zsh ]] || source ~/.p10k.zsh

    评论

    阅读上一篇

    TypeScript 入门学习
    2021-10-22 13:47:44

    背景知识 TypeScript 入门教程 深入理解 TypeScript 一份不可多得的 TS 学习指南 React 中的用法 组件声明 类组件 类组件的定义形式有两种： 和 ，它们都是泛型接口，接收两个参数，第一个是 props 类型的定义，第二个是 state…

    阅读下一篇

    目录
    0%