开发环境的配置

754 阅读1分钟

一、 node.js安装

1. 安装nrm

npm i -g nrm

nrm是一个源管理系统,可以将npm的包下载源进行切换,由于默认是国外,我们需要将它转到国内的下载源

nrm use taobao

将下载源换到taobao

2. 安装http-server

npm i -g http-server

3. 安装yarn

官网下载

4. 安装yrm

yarn global add yrm
yrm ls

可以查看所有的源

yrm use taobao

同样我们将源转到taobao

二、 git配置

1. 基础配置

git config --global user.name 你的英文名
git config --global user.email 你的邮箱
git config --global push.default simple
git config --global core.quotepath false
git config --global core.editor "code --wait"
//这里是git commit 的时候默认打开的编辑器code===vscode
git config --global core.autocrlf input

2. git上传配置

ssh-keygen -t rsa -b 4096 -C 你的邮箱

接下来会问你设置密码以及公钥及私钥保存路径,回车则默认路径

cd /path
//也就是刚刚的默认路径
cat .ssh/id_rsa.pub

复制公钥内容,到github的setting中的ssh这里,添加公钥

ssh -T git@github.com

与github建立连接

3. 添加alias

touch ~/.bashrc
echo 'alias ga="git add"'>> ~/.bashrc
//添加
echo 'alias gc="git commit -v"'>> ~/.bashrc
//提交
echo 'alias gl="git pull"'>> ~/.bashrc
//和github同步
echo 'alias gp="git push"'>> ~/.bashrc
//push到github
echo 'alias gco="git checkout"'>> ~/.bashrc
// 转换分支
echo 'aliasgst="git status -sb"'>> ~/.bashrc
//提交状态
echo'alias glog="git log --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset' --abbrev-commit -- | less"'>> ~/.bashrc
//美化历史记录

三、 webstorm配置

1. 官网下载安装激活

Cmder

配置默认bash

2. git和bash配置

将提示符从 λ 改为 $,C:\自己找路径\cmder\vendor\git-for-windows\etc\profile.d\git-prompt.

3. 更换主题

File => Settings => Plugins => Marketplace => 搜索 Material Theme UI 并安装,安装完成后进入 File => Settings => Appearance & Behavior => Material Theme

其他设置

更多样式

  1. Show tree indent guides,这个功能会在编辑器里添加竖线,方便代码对齐
  2. Show method separators,这个功能会在每个方法上面添加横线,便于阅读代码
  3. Breadcrumbs,搜索这个选项,然后选择 Dont't Show
  4. Show CSS color preview as background
  5. Show gutter icons
  6. Soft wrap,用于折行

4. 常用快捷键

1. shift shift

可以快速调出搜索操作界面,搜索相应操作的英文

2. 自行修改快捷键

常用快捷键(我的)
  1. 格式化 ctrl+alt+L
  2. settings ctrl+alt+s
  3. terminate alt+2
  4. ctrl +click跳转到自定义组件的文件位置

设置好以后可以导出设置文件,在其他设备上安装后直接导入就不用重新设置

3. 格式化样式

Editor => Code Style => TypeScript

5. live template

如何自定义一个template

在live template中选择新建一个template group,然后新建一个live template

填写你的模板,选择适用范围及快捷键,我选择TSX,这样在模板中输入TSX回车即可导入模板,$name$代表光标停止位置,可以用任意名称代替,以便于导出