34、iTerms、Node版本管理工具、nrm等的使用方法

一些开发过程中需要使用的工具整理

iTerm2

快捷键

commond + t              // 新建标签页
commond + w              // 关闭标签
commond + enter          // 切换全屏(第一次切换至全屏，再commond + enter恢复到之前窗口) 
commond + 左右方向键       // 切换标签
commond + +              // 窗口和字体变大
commond + -              // 窗口和字体变小

Node版本管理工具

在开发的工程中，我们可能需要经常切换node版本来应对不同的开发环境，所以需要经常使用不同版本的node。

一、安装npm插件n ,通过n模块来管理node版本

1、全局安装n模块

1	`npm instlal -g n`

2、安装当前稳定版本

1	`n stable或者sudo n stable`

3、安装最新版本的

1	`n latest或者sudo n latest`

4、安装指定版本的node

1	`n v8.16.0`

5、卸载指定的node版本

1	`n rm v8.16.0`

二、使用nvm管理node版本
1、安装nvm

1	`brew install nvm`

2、使用nvm安装node版本

// 安装最新版本
nvm isntall node
// 安装指定版本
nvm install 8.16.0

3、查看所有版本

nvm ls

4、切换node版本

// 使用最新版本
nvm use node       
// 使用指定版本
nvm use 8.16.0

通常我会使用第二种方式
例如：

我在一个项目中使用的是node@6.13.2,

新项目使用的是node@8.16.0,

先要安装node@8.16.0 nvm install 8.16.0

然后nvm use 8.16.0

5、卸载指定版本的node

1	`nvm uninstall v6.13.2`

6、设置系统默认的node版本

1	`nvm alias default v8.16.0`

这样使用的node的默认版本为8.16.0

nrm切换npm源

因为在使用npm下载插件的过程中速度太慢了（npm源在国外），所以找到一个切换源的方法：nrm。

一、切换成淘宝源

1、config命令的使用

1	`npm config set registry https://registry.npm.taobao.org`

2、命令行指定

1	`npm i node --registry https://registry.npm.taobao.org info underscore`

3、编辑~/.npmrc，加入以下内容：

1	`registry = https://registry.npm.taobao.org`

二、nrm的使用

nrm是一个可以切换、添加/删除/测试源的工具

1、全局安装nrm

1	`npm install -g nrm // mac如果出现权限问题，加上sudo`

2、安装完成，查看所有的可用源

nrm ls

3、添加源

1	`nrm add 源的名称 https:// 地址`

4、删除原

1	`nrm del 源的名字`

5、切换到某个源

1	`nrm use 源的名字`

6、测试源速度

1	`nrm test`

例如，我需要使用淘宝源，只需nrm use taobao就可以了，cnpm不要使用，容易出现莫名其妙的错误。

前端常用的linux命令

常用的Linux命令

1、vim test.html   创建新的文件 
   vim + 文件名.后缀
2、ls     查看当前文件夹下的文件
    ls -a  列出所有文件，包括隐藏文件
    ls -1  每行列出一个文件，以单列形式列出
3、cat test.html  将该文件内容打印显示出来
   cat test1.html
   cat test2.html
   cat test1.html     test2.html>test3.html
   cat test3.html   将多个文件合并到目标文件中。

   cat test1.html
   cat test2.html
   cat test1.html test2.html>>test4.html  将几个文件附加到目录文件中
4、mv   移动或重命名文件和目录
mv file1.txt file2.txt   将file1文件命名为file2
用法：
 cat 1.txt
 mv 1.txt 2.txt
 mv file1.txt file2  将file1文本移动到file2目录  
5、touch  file   命令用于修改文件或者目录的时间属性，包括存取时间和更改时间。若文件不存在，系统会建立一个新的空白文件。
 touch newfile
6、mkdir file    创建文件夹
7、cd ../  返回当前文件夹的上一层
 cd /    返回到根目录下
8、rm -rf folder  删除文件夹

eslint的配置

常用的配置

module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/essential',
    '@vue/standard'
  ],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', // 生产环境 无console.log
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', // 生产环境 无debugger
    'indent': 'off',
    // 函数定义时括号前面要不要有空格
    'space-before-function-paren': 'off'
  },
  parserOptions: {
    parser: 'babel-eslint'
  }
}

git提交代码

一、初始化本地仓库，提交代码，提交到远程git仓库

1、初始化代码仓库

1	`git init`

2、将当前目录下的所有文件放到暂存区

1	`git add .`

3、查看文件状态

1	`git status`

4、添加提交的描述信息

1	`git commit -m "提交的描述信息"`

5、远程仓库地址

1	`git remote add origin "远程仓库地址"`

6、推送到远程仓库

1	`git push -u origin master`

二、创建分支，提交代码到分支

1、创建切换分支

git checkout -b dev  dev为分支名称
git add .
git commit -m '描述'
git push --set-upstream origin dev1   将分支推送到远程仓库
切换到主分支
git checkout master
git merge dev  将dev合并到主分支
git push origin master  推送到远程仓库

三、克隆指定分支

1 2	`git clone -b master git@gitee.com:username/projectname.git git clone -b admin git@gitee.com:username/projectname.git`

四、git reflog

1
2

查看所有分支的所有操作记录（包括已经被删除的 commit 记录和 reset 的操作）
执行 git reset --hard HEAD~1，退回到上一个版本，用git log则是看不出来被删除的commitid，用git reflog则可以看到被删除的commitid，我们就可以买后悔药，恢复到被删除的那个版本。

vscode快捷键

快捷键	功能
commond + B	显示/隐藏侧边栏
commond + shift + p	显示命令窗口
commond +	创建多个编辑器
commond + 1、2	聚焦到第1、第2个编辑器
commond + J 或者 Ctrl + `	显示隐藏控制台
commond + W	关闭当前文件
option + 左右方向键	单词之间移动光标
commond + 左右方向键	移动光标至最前、最后
commond + shift + \	代码块之间移动光标

fileheader插件的使用

commond+shift+p -> fileheader -> enter

/*
 * @Author: Jude 
 * @Date: 2020-07-24 16:39:41 
 * @Last Modified by: Jude
 * @Last Modified time: 2020-07-24 16:40:34
 */

Markdown语法

Markdown标题

使用#号标记，使用 # 号可表示 1-6 级标题，一级标题对应一个 # 号，二级标题对应两个 # 号，以此类推。

1、Markdown段落

段落的换行是使用两个以上空格加上回车。

字体:

*斜体文本*

_斜体文本_

1	`粗体文本`

1	`__粗体文本__`

1	`*粗斜体文本*`

1	`___粗斜体文本___`

分割线

***

* * *

*****

- - -

----------

删除线、下划线、脚注

1
2
3

~~删除线~~
<u>下划线</u>
[^Vue]:Vuejs是目前最流行的web开发框架之一。

2、Markdown列表

Markdown 支持有序列表和无序列表。

（1）、无序列表使用星号(*)、加号(+)或是减号(-)作为列表标记，这些标记后面要添加一个空格，然后再填写内容：

* 第一项
* 第二项
* 第三项

+ 第一项
+ 第二项
+ 第三项


- 第一项
- 第二项
- 第三项

（2）、有序列表：有序列表使用数字并加上 . 号来表示。

1
2
3

1. 第一项
2. 第二项
3. 第三项

（3）、列表嵌套：列表嵌套只需在子列表中的选项前面添加四个空格即可

1. 第一项：
    - 第一项嵌套的第一个元素
    - 第一项嵌套的第二个元素
2. 第二项：
    - 第二项嵌套的第一个元素
    - 第二项嵌套的第二个元素

4、Markdown区块

Markdown 区块引用是在段落开头使用 > 符号，然后后面紧跟一个空格符号

区块的嵌套

1
2
3

> 最外层
> > 第一层嵌套
> > > 第二层嵌套

区块中使用列表

> 区块中使用列表
> 1. 第一项
> 2. 第二项
> + 第一项
> + 第二项
> + 第三项

列表中使用区块

如果要在列表项目内放进区块，那么就需要在 > 前添加四个空格的缩进

* 第一项
    > vuejs
    > JavaScript框架
* 第二项

5、Markdown链接和图片

链接

[链接名称](链接地址)

或者

<链接地址>

图片

![alt 属性文本](图片地址)

![alt 属性文本](图片地址 "可选标题")

![RUNOOB 图标](http://static.runoob.com/images/runoob-logo.png)

![RUNOOB 图标](http://static.runoob.com/images/runoob-logo.png "RUNOOB")

6、Markdown表格

|  表头   | 表头  |
|  ----  | ----  |
| 单元格  | 单元格 |
| 单元格  | 单元格 |

我们可以设置表格的对齐方式：

-: 设置内容和标题栏居右对齐。

:- 设置内容和标题栏居左对齐。

:-: 设置内容和标题栏居中对齐。

HBuilder真机调试

1、小米手机开发者模式如何打开（MIUI 11.0.4）

步骤：设置–我的设备–全部参数–（点击）MINI版本;

2、手机连接Mac：

Mac的关于本机–系统报告–USB–你所连接的device–厂商ID

3、打开Mac终端：

在终端执行如下命令：

1	`echo xxxxxx >> ~/.android/adb_usb.ini （“xxxxxx”为厂商ID);`

4、重启HBuilderX;

这里如果出现了问题需要切换到HBuilderX自带的adb目录；

路径为：/Applications/HBuilderX-Alpha.app/Contents/HBuilderX/plugins/launcher/tools/adbs

在adbs目录下运行Terminal，输入：

1	`./adb kill-server`

Jude's blog