4、git管理代码的流程、gitLab改http、冲突提示、VSCode设置|快捷键|加注释块|加代码块、.eslintrc.js使用示例、webStorm设置、淘宝npm镜像使用方法、yapi、node之url解析、业务逻辑

一、git管理代码的流程（master为公司的主分支）
1、克隆项目：git clone https://github.com/AAA/BBB.git
2、连接到远程仓库：git remote add origin https://github.com/AAA/BBB.git
3、建立分支：git branch branch_1
4、切换到分支：git checkout branch_1
5、====写代码。3和4可以合并为git checkout -b branch_1
6、添加到暂存区：git add README.md
7、添加到历史区：git commit -m "first branch_1"
/////////////////////////////////////////////////////////
8、切换到master分支：git checkout master（把2放到在8、9之间操作，似乎也行）
9、拉取master分支内容：git pull origin master（这个操作很重要，最新代码将覆盖旧代码）
10、把branch_1分支的内容合并到master分支：git merge branch_1（可能会发生冲突）
11、推送到远程仓库：git push -u origin master（从第2次开始，使用git push即可）
12、切换到branch_1分支：git checkout branch_1
13、把master分支的内容合并到branch_1分支：git merge master（不会发生冲突）
14、合并说明
（1）在本地master上，pull最新master版本master_1、master_1将覆盖master的原有；
（2）在本地master_1上，merge我开发的master分支branch_1,branch_1的当前提交将取代master的原有,可能与master_1发生冲突，解决这个冲突并push master_1；
（3）在本地branch_1的当前提交上，merge master_1，因master_1刚merge了branch_1的当前提交，所以master_1将覆盖branch_1的当前提交，且不发生冲突，同时不需要push branch_1

二、gitLab的提交地址由http改为https后，下拉代码不成功，解决方案如下：
过程：audit-html文件夹下空白处--右键单击---鼠标置于TortoiseGit(t)上---单击设置---单击确定--单击“编辑本地.git/config(L)”---把第9行代码中的http改成https，即可。

三、冲突提示
<<<<<<< HEAD
本地向服务器提交的内容（我写的）
=======
服务器下载到本地的内容（人家写的）
>>>>>>>b0ef58d69851fedad4169878a62033c0ce16246c

四、VSCode设置
1、VSCode关闭右侧预览功能
file----preference----setting----搜索"editor.minimap.enabled"
2、VSCode修改字体大小
file----preference----setting----Font Zize
3、VSCode修改字体
file----preference----setting----Font Family
4、vscode设置颜色主题
file----preference----Color Theme
5、vscode同时打开多个文件
问题：单击，新的文件覆盖旧文件；双击，新的文件不会覆盖旧文件
需求：不管单击还是双击，新的文件都不会覆盖旧文件
实现：file----preference----setting----搜索"Workbench>Editor:Enable Preview"
6、VSCode设置成中文语言环境
打开vscode =>Ctrl+Shift+p=>configure display language=>确定=>“locale”:“zh-CN”=>重启vscode工具=>商店(最左侧最下方图标)=>Chinese（Simplied） Lang=>安装。
7、VSCode菜单栏隐藏与显示
隐藏：查看=>切换菜单栏 
显示：ctrl+shift+p=> view:toggle menu bar
8、VSCode活动栏隐藏与显示
隐藏：右键资源管理器=>隐藏活动栏 
显示：查看——外观——显示活动栏
左右切换：右键资源管理器=>将侧边栏移到左/右侧
9、vscode 自动折行
文件=>首选项=>设置=>on(editor:word wrap)
10、VSCode改左侧窗口字体大小
在vscode安装目录下:C:Program FilesMicrosoft VS Code
esourcesappoutvsworkbench
找到workbench.main.css文件，打开并找到“.part>.content{font-size:”进行修改
11、vs code预览
安装view in browser--右键html--点击view in browser
12、vscode 快速生成html
点击新建文件--命名1.html--在空html中输入"!"--按下tab键。
13、vscode 修改选项卡字体
在vscode安装目录下:C:Program FilesMicrosoft VS Code
esourcesappoutvsworkbench
找到workbench.main.css文件，打开并找到“.title .title-label a{text-decoration:none;font-size:”进行修改
14、VSCode滚轮改变字体大小
file----preference----setting----搜索"mouseWheelZoom"(单词之间没有空格)----勾选
15、vscode设置缩进2个空格
file----preference----setting----Editor:Tab Size----2
16、vscode设置选项卡高度
在vscode安装目录下:C:Program FilesMicrosoft VS Code
esourcesappoutvsworkbench
找到workbench.main.css文件，打开并找到下列三项，进行设置。
.title .editor-actions{cursor:default;flex:initial;padding-left:4px;height:
.tab{position:relative;display:flex;white-space:nowrap;cursor:pointer;height:
.title .tabs-container{display:flex;height:
17、Visual Studio Code修改颜色主题
文件——首选项——颜色主题；
18、vscode如何用谷歌浏览器预览html文件
(1)安装“view in browser”
(2)安装“open in browser”
(3)文件---首选项---设置---输入"open-in-browser.default"---“Chrome”
(4)右键“x.html”---“Open in Default Browsers”
19、VS Code中怎么运行js文件
(1)安装插件code runner
(2)安装node环境
(3)F5
20、恢复默认设置
右键快捷图标-点击打开文件所在位置-在顶部导航框里，按照如下路径找到这个文件AppDataRoamingCodeUsersettings.json-删除settings.json即可
git管理代码的流程、gitLab改为https、冲突提示、VSCode设置|快捷键

五、vscode快捷键
来源：https://www.cnblogs.com/weihe-xunwu/p/6687000.html
1、注释：
　　a) 单行注释：[ctrl+k,ctrl+c] 或 ctrl+/
　　b) 取消单行注释：[ctrl+k,ctrl+u] (按下ctrl不放，再按k + u)
　　c) 多行注释：[alt+shift+A]
　　d) 多行注释：ctrl+/ (双斜线)
2、移动行：alt+up/down
3、显示/隐藏左侧目录栏 ctrl + b
4、复制当前行：shift + alt +up/down
5、删除当前行：shift + ctrl + k
6、控制台终端显示与隐藏：ctrl + ~
7、查找文件/安装vs code 插件地址：ctrl + p
8、代码格式化：shift + alt +f
9、新建一个窗口 : ctrl + shift + n
10、行增加缩进: ctrl + [
11、行减少缩进: ctrl + ]
12、裁剪尾随空格(去掉一行的末尾那些没用的空格) : ctrl + shift + x
13、字体放大/缩小: ctrl + ( + 或 - )
14、拆分编辑器 : ctrl + 1/2/3
15、切换窗口 : ctrl + shift + left/right
16、关闭编辑器窗口 : ctrl + w
17、关闭所有窗口 : ctrl + k + w
18、切换全屏 : F11
19、自动换行 : alt + z
20、显示git : ctrl + shift + g
21、全局查找文件：ctrl + shift + f
22、显示相关插件的命令(如：git log)：ctrl + shift + p
23、选中文字：shift + left / right / up / down
24、折叠代码： ctrl + k + 0-9 (0是完全折叠)
25、展开代码： ctrl + k + j (完全展开代码)
26、删除行 ： ctrl + shift + k 
27、快速切换主题：ctrl + k / ctrl + t
28、快速回到顶部 ： ctrl + home
29、快速回到底部 : ctrl + end
30、格式化选定代码 ：ctrl + k / ctrl +f
31、选中代码 ： shift + 鼠标左键
32、多行同时添加内容（光标） ：ctrl + alt + up/down
33、全局替换：ctrl + shift + h
34、当前文件替换：ctrl + h
35、打开最近打开的文件：ctrl + r
36、打开新的命令窗：ctrl + shift + c
37、函数代码块的注释生成方法：安装插件“Document This”；将光标放置于function上面，快捷键Ctrl+Alt+D；
38、代码正则替换：在Ctrl+H后，会出现两行搜索框，上行搜索框的右侧有雪花号，点击雪花号，正则替换可以使用了
39、编辑器设置背景
"update.enableWindowsBackgroundUpdates": true,
"background.customImages": [
  "D:/meinv.png",
],
"background.style": {
"content": "''",
"pointer-events": "none",
"position": "absolute",
"width": "100%",
"height": "120%",
"z-index": "99999",
"background.repeat": "repeat-Y",
"background-size": "cover",
"opacity": 0.2
},
"background.useFront": true,
"background.useDefault": false

六、vscode加注释块的方法
1、安装插件KoroFileHeader
2、在"setting.json"中添加
// 文件头部注释
  "fileheader.customMade": {
    "Descripttion":"",
    "version":"",
    "Author":"sueRimn",
    "Date":"Do not edit",
    "LastEditors":"sueRimn",
    "LastEditTime":"Do not Edit"
  },
  //函数注释
  "fileheader.cursorMode": {
    "name":"",
    "test":"test font",
    "msg":"",
    "param":"",
    "return":""
  }
3、快捷键：
（1）文件头部：crtl+alt+i
（2）函数注释：crtl+alt+t
///////////////////////////////////////////////////////////

七、vscode加代码块的方法
打开vscode>文件>首选项>用户代码片段>
1、html
{
  "jq": {
    "prefix": "jq",
    "body": [
      "<!DOCTYPE html>",
      "<html lang='en'>",
      "<head>",
      "  <meta charset='UTF-8'>",
      "  <title>jq</title>",
      "  <script src='https://cdn.bootcss.com/jquery/1.9.1/jquery.js'></script>",
      "</head>",
      "<body>",
      "  <div>",
      "  $1",
      "  </div>",
      "</body>",
      "</html>",
      "<script type='text/javascript'>",
      "  ",
      "</script>"
    ],
    "description": "jq"
  },
  "echarts": {
    "prefix": "echarts",
    "body": [
      "<!DOCTYPE html>",
      "<html lang='en'>",
      "<head>",
      "  <meta charset='UTF-8'>",
      "  <title></title>",
      "  <script src='https://cdn.bootcss.com/echarts/3.7.1/echarts.js'></script>",
      "</head>",
      "<body>",
      "  <div id='myEchartsId' style='height:300px;'></div>",
      "</body>",
      "</html>",
      "<script type='text/javascript'>",
      "  var myEcharts = echarts.init(document.getElementById('myEchartsId'));",
      "  var myEchartsOption = { ",
      "  };",
      "  myEcharts.setOption(myEchartsOption);",
      "</script>",
    ],
    "description": "echarts"
  },
  "ng": {
    "prefix": "ng",
    "body": [
      "<!DOCTYPE html>",
      "<html lang='en' ng-app='myModel'>",
      "<head>",
      "  <meta charset='UTF-8'>",
      "  <title>ng</title>",
      "  <script src='https://cdn.bootcss.com/angular.js/1.6.2/angular.js'></script>",
      "</head>",
      "<body>",
      "  <div ng-controller='firstCtrl'>",
      "  $1",
      "  </div>",
      "</body>",
      "</html>",
      "<script type='text/javascript'>",
      "  var app = angular.module('myModel', []);",
      "  app.controller('firstCtrl', function ($scope){",
      "  ",
      "  });",
      "</script>"
    ],
    "description": "ng"
  },
  "bt": {
    "prefix": "bt",
    "body": [
      "<!DOCTYPE html>",
      "<html lang='en'>",
      "<head>",
      "  <title>两列高度自适应</title>",
      "  <link rel='stylesheet' href='https: //cdn.staticfile.org/twitter-bootstrap/4.1.1/css/bootstrap.min.css'>",
      "  <style>",
      "    .row>div {",
      "      background: #cccccc;",
      "    }",
      "  </style>",
      "</head>",
      "<body>",
      "  <div class='container'>",
      "    <div class='row'>",
      "      <div class='col-xl-6'>col-xl-6;col-xl-6;col-xl-6;</div>",
      "      <div class='col-xl-5'>col-xl-6</div>",
      "    </div>",
      "  </div>",
      "</body>",
      "</html>",
    ],
    "description": "bt"
  },
}
2、js
{
  "c1": {
    "prefix": "c1",
    "body": [
      "console.log($0);"
    ],
    "description": "console.log($0)"
  },
  "c2": {
    "prefix": "c2",
    "body": [
      "console.log('$0');"
    ],
    "description": "console.log('$0')"
  },
  "fn": {
    "prefix": "fn",
    "body": [
      "function $0(){",
      "  ",
      "}",
    ],
    "description": "function $0()"
  },
  "ng": {
    "prefix": "ng",
    "body": [
      "(function () {",
      "  angular",
      "    .module('$0')",
      "    .controller('', function ($scope) {",
      "  ",
      "    });",
      "})();",
    ],
    "description": "ng"
  }
}
3、jQuery
<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <title>jq</title>
  <script src='https://cdn.bootcss.com/jquery/1.9.1/jquery.js'></script>
</head>
<body>
  <div>

  </div>
</body>
</html>
<script type='text/javascript'>

</script>
4、echarts
<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <title></title>
  <script src='https://cdn.bootcss.com/echarts/3.7.1/echarts.js'></script>
</head>
<body>
  <div id='myEchartsId' style='height:300px;'></div>
</body>
</html>
<script type='text/javascript'>
  var myEcharts = echarts.init(document.getElementById('myEchartsId'));
  var myEchartsOption = { 
  };
  myEcharts.setOption(myEchartsOption);
</script>
5、angular1
<!DOCTYPE html>
<html lang='en' ng-app='myModel'>
<head>
  <meta charset='UTF-8'>
  <title>ng</title>
  <script src='https://cdn.bootcss.com/angular.js/1.6.2/angular.js'></script>
</head>
<body>
  <div ng-controller='firstCtrl'>

  </div>
</body>
</html>
<script type='text/javascript'>
  var app = angular.module('myModel', []);
  app.controller('firstCtrl', function ($scope){

  });
</script>
6、bootstrap
<!DOCTYPE html>
<html lang='en'>
<head>
  <title>两列高度自适应</title>
  <link rel='stylesheet' href='https: //cdn.staticfile.org/twitter-bootstrap/4.1.1/css/bootstrap.min.css'>
  <style>
    .row>div {
      background: #cccccc;
    }
  </style>
</head>
<body>
  <div class='container'>
    <div class='row'>
      <div class='col-xl-6'>col-xl-6;col-xl-6;col-xl-6;</div>
      <div class='col-xl-5'>col-xl-6</div>
    </div>
  </div>
</body>
</html>
 
八、.eslintrc.js使用示例
ESLint最初是由Nicholas C. Zakas 于2013年6月创建的开源项目。它的目标是提供一个插件化的javascript代码检测工具。
module.exports = {
  "env": {
    "browser": true,
    "node": true
  },
  "globals": {//不在这里配置而使用下列变量，则会报错
    "angular": true,
    "WebUploader": true,
    "editormd": true,
    "$": true,
    "Swiper": true,
    "echarts": true,
    "phantom": true,
    "NProgress": true,
    "html2canvas": true,
    "$scope": true,
    "laydate": true,
    "layer": true,
    "Mock": true,
    '_': true,
    'alasql': true
  },
  "extends": "eslint:recommended",
  "rules": {
    "indent": [
      "error",
      2
    ],
    "linebreak-style": 'off',
    "quotes": [
      "error",
      "single"
    ],
    "semi": [
      "error",
      "always"
    ],
  }
};
 
九、webStorm设置 
1、Ctrl+滚轮：放缩字体大小
file----setting----editor----general----(勾选)change font size (zoom) with ctrl+mousewheel----(点击)OK
2、去掉右侧竖线
file----setting----editor----general----appearance----show right margin (configured in code style options)
3、设置字体大小（Consolas, 'Courier New', monospace）
file----setting----editor----color&font----font
4、创建文件名后缀
file----new----edit file templates...----(点击)+----Name(任意填)，Extension(填后缀名)----(点击)OK
5、webstorm设置ES6
file----setting----languages&frameworks----javascirpt----templates----language for comments----ECMAscript6----(点击)OK
6、设置快捷键
file----setting----editor----live templates----(点击右侧)+----(点击)1.live templates
7、取消撤销: ctrl + shift + z （使用前需要把搜狗输入法调至英文输入状态）
8、Ctrl+Alt+L:格式化代码
9、Ctrl+N:搜索类
10、Ctrl+H:查看类继承关系
11、Ctrl+Shift+N:按文件名搜索
12、Alt+F7:查找函数或变量在哪被使用
13、Shift+Shift:(A)类，文件，配置项，快捷键，函数，路径等等都能搜索。(B)搜索时，搜索字符串带/就可以搜索路径了
14、WebStorm手机端页面适配快捷键
（1）输入: meta:vp
（2）再按tab键就出来了.
（3）这行代码,会将HTML5自动适配成手机端页面
15、常用快捷键，https://www.cnblogs.com/wanglexueshilengde/p/8390730.html
16、设置自定义代码块：file--setting--editor--live template--"+"
17、WebStorm更换背景颜色的方法：file--setting--Appearance & Behavior--Appearance--点击下拉箭头--选择--OK 
18、WebStrom Live Template 建代码块：File—editor—live templates—javascript，+，abbreviation:(简写代码，比如ccc)，templates text: (详写代码，比如console.log())，define(勾选，比如javascript,typescript)，apply，ok

十、淘宝npm镜像使用方法
来源https://blog.csdn.net/quuqu/article/details/64121812
1.临时使用（已使用）
npm --registry https://registry.npm.taobao.org install express
2.持久使用
npm config set registry https://registry.npm.taobao.org
配置后可通过下面方式来验证是否成功 
npm config get registry 或  npm info express
3.通过cnpm使用
npm install -g cnpm --registry=https://registry.npm.taobao.org
使用 
cnpm install express

十一、yapi
LDAP：轻量级目录访问协议。
在谷歌浏览器上装corss-request插件后，可以在在yapi上发送请求
1、下载并安装
（1）nodejs（7.6+)
（2）mongodb（2.6+），默认安装在C盘，应改在D盘，且路径中的目录名不能有空格。
附：mongodb5.0.1的安装过程
双击mongodb5.0.1->Next->Next->Custom->Browser->(Folder Name)D:MongoDBServer->OK->Next->Next->去掉勾选，Next->Install->Finish
附：怎么添加路径到系统的Path里面
此电脑->属性->高级系统设置->环境变量(N)->双击path->新建->确定
2、(可视化)安装并运行yapi
（1）npm install -g yapi-cli --registry https://registry.npm.taobao.org
（2）yapi server，想把yapi搭建在哪个目录下，就在哪个目录下运行此命令。安装yapi 
（3）访问http://127.0.0.1:9090/
（4）填写公司名称，点击开始部署。配置mongodb数据库并与yapi连接
（5）node vendors/server/app.js，在my-yapi目录下运行。启动yapi
3、登录
（1）http://127.0.0.1:3000(仅限自己)或者http://172.18.10.12:3000(自己和别人,该IP来源见下6)
（2）登录/注册，选登录
（3）账号名："admin@admin.com"，
（4）密码："ymfe.org"
（5）登录
4、2021年8月9日周一，安装卡住原因
（1）mongod未自动关联，导致出错，纠错的过程中，破坏了mongod。致使
（2）运行2(2)(3)(4)时，一直出错。卸载了mongodb5.0.1重装后，错误解决。后来
（3）node vendors/server/app.js 的运行位置出错，再次卡住。
5、yapi的层级
（1）分组
（2）项目
（3）分类
（4）接口
6、本机IP之http://172.18.10.12:3000的获取步骤
（1）window+r
（2）cdm+enter
（3）ipconfig
（4）以太网适配器 以太网:
（5）IPv4 地址
另外，如果我在本地开启了一个服务，网址为http://localhost:3000或http://127.0.0.1:3000，那么访客可以通过http://172.18.10.12:3000进行访问。原文链接：https://blog.csdn.net/qq_38382380/article/details/88366537
 
十二、url解析
var url = require('url');
var winUrl = url.parse('http://www.zhu.cn:80/ccc/index.html?name=zxt&age=26#33', true);
console.log(winUrl);
winUrl{
  protocol: 'http:',
  slashes: true,
  auth: null,
  host: 'www.zhu.cn:80',
  port: '80',
  hostname: 'www.zhu.cn',
  hash: '#33',
  search: '?name=zxt&age=26',
  query: { name: 'zxt', age: '26' },//当第二行的true不存在时query: 'name=zxt&age=26',
  pathname: '/ccc/index.html',
  path: '/ccc/index.html?name=zxt&age=26',
  href: 'http://www.zhu.cn:80/index.html?name=zxt&age=26#33' 
}
 
十三、业务逻辑
一个功能就是一个业务，实现这个功能的代码就叫业务逻辑。