Vscode-工具使用

Vscode ,这玩意儿是开源的,以前用收费的破解版,过段时间就高版本不匹配,这次搞个不要钱的玩玩,记录使用心得

下载

下载地址:官网

Vscode-工具使用_第1张图片

点击下载,但是这里有个问题下载比较慢,解决办法:
在chrome 浏览器中打开下载的地址:
https://az764295.vo.msecnd.net/stable/6445d93c81ebe42c4cbd7a60712e0b17d9463e97/VSCodeUserSetup-x64-1.81.0.exe

然后替换 :用 https://vscode.cdn.azure.cn/ 替换前面的,最后成这样
https://vscode.cdn.azure.cn/stable/6445d93c81ebe42c4cbd7a60712e0b17d9463e97/VSCodeUserSetup-x64-1.81.0.exe
这个地址下载就会比较快了

常用快捷键

常用的快捷键已高亮
#设置相关:Ctrl+Shift+P, F1:打开命令框
Ctrl+P: 快速打开,转到文件
Ctrl+Shift+N:打开新的vscode窗口
Ctrl+Shift+W:关闭vscode窗口
Ctrl+, :打开用户设置
Ctrl+K Ctrl+S:键盘快捷方式#编辑相关:Ctrl+X: 剪切
Ctrl+C: 复制
Alt+ ↑ / ↓: 上下移动行
Shift+Alt + ↓ / ↑:复制并粘贴到上下行
Ctrl+Shift+K: 删除行
Ctrl+Enter:行下插入
Ctrl+Shift+Enter:行上插入
Ctrl+Shift+\ :调到匹配的括号另一端
Ctrl+] / [: 行的缩进和缩出
Home / End:跳转行头行尾
Ctrl+Home:跳转到文件开头
Ctrl+End:跳转到文件结尾
Ctrl+↑ / ↓:向上/下滚动行
Alt+PgUp / PgDn:向上/向下滚动页面
#Ctrl+Shift+[:折叠所选区域
#Ctrl+Shift+]:展开所选区域
Ctrl+K Ctrl+[:折叠所有子域
Ctrl+K Ctrl+]:展开所有子域
Ctrl+K Ctrl+0:折叠所有区域
Ctrl+K Ctrl+J:展开所有区域
Ctrl+K Ctrl+C:添加行注释
Ctrl+K Ctrl+U:删除行注释
Ctrl+/: 切换行注释
Shift+Alt+A:切换块注释
Alt+Z:切换换行#导航相关:Ctrl+T:显示所有符号
Ctrl+G:转到第几行
Ctrl+P:转到某个文件
Ctrl+Shift+O: 转到某个符号
Ctrl+Shift+M:显示问题面板
F8:转到下一个错误或警告
Shift+F8:转到上一个错误或警告
Ctrl+Shift+Tab:快速切换到历史文件
Alt+ ← / →:返回/前进
Ctrl+M:切换选项卡移动焦点#搜索替换相关:Ctrl+F:查到
Ctrl+H:替换
F3 / Shift+F3:查找下一个/上一个
Alt+Enter:选择“查找匹配项”的所有出现项
Ctrl+D:添加所选内容以查找下一个匹配项
Ctrl+K Ctrl+D:移动最后一个选择以查找下一个匹配项
Alt+C / R / W:切换区分大小写/正则表达式/全字 #多光标和选择:Alt+Click:插入
#Ctrl+Alt+↑/↓:在上方/下方插入光标(多选行)
Ctrl+U:撤消上次光标操作
Shift+Alt+I:在选定的每行末尾插入光标
Ctrl+L:选择当前行
Ctrl+Shift+L:选择当前选择的所有匹配项
Ctrl+F2:选择当前单词的所有匹配项
Shift+Alt+→:展开选择
Shift+Alt+←:收缩选择
Shift+Alt+鼠标:选择鼠标区域(行列组成的矩形)
Ctrl+Shift+Alt箭头键:列(框)选择
Ctrl+Shift+Alt+PgUp/PgDn:列(框)选择页上/下#语言编辑相关:Ctrl+Space:触发建议
Ctrl+Shift+Space:触发参数提示
#Shift+Alt+F:格式化文档
Ctrl+K Ctrl+F:格式选择
F12:转到定义
Alt+F12:定义
Ctrl+K F12:将定义打开到一侧
Ctrl+。:快速修复
Shift+F12:显示引用
F2:重命名符号
Ctrl+K Ctrl+X:修剪尾部空白
Ctrl+K M:更改文件语言#编辑管理相关:Ctrl+F4,Ctrl+W:关闭编辑器
Ctrl+K F:关闭文件夹
#Ctrl+\:分割编辑器
#Ctrl+1/2/3:焦点转换到第一第二或第三编辑组(分割后使用)
Ctrl+K Ctrl+←/→:聚焦到上一个/下一个编辑器组
Ctrl+Shift+PgUp/PgDn:向左/向右移动编辑器
Ctrl+K←/→:移动活动编辑器组#文件管理相关:Ctrl+N:新建文件
Ctrl+O:打开文件
Ctrl+S:保存
Ctrl+Shift+S:另存为
Ctrl+K S:全部保存
Ctrl+F4:关闭当前窗口
Ctrl+K Ctrl+W:全部关闭
Ctrl+Shift+T:重新打开关闭的编辑器
Ctrl+K:按Enter键以保持预览模式编辑器处于打开状态
Ctrl+Tab:打开下一个
Ctrl+Shift+Tab:打开上一页
Ctrl+K P:活动文件的复制路径
Ctrl+K R:在资源管理器中显示活动文件
Ctrl+K:在新窗口/实例中显示活动文件#显示相关:F11:切换全屏
Shift+Alt+0:切换编辑器布局(水平/垂直)
Ctrl+=/-:放大/缩小
Ctrl+B:切换侧边栏可见性
Ctrl+Shift+E:显示资源管理器/切换焦点
Ctrl+Shift+F:显示搜索
Ctrl+Shift+G:显示源代码管理
Ctrl+Shift+D:显示调试
Ctrl+Shift+X:显示扩展名
Ctrl+Shift+H:替换文件
Ctrl+Shift+J:切换搜索详细信息
Ctrl+Shift+U:显示输出面板
Ctrl+Shift+V:打开标记预览
Ctrl+K V:打开标记预览到一侧
Ctrl+K Z:Zen模式(按Esc退出)#调试相关:F9:切换断点
F5:开始/继续
Shift+F5:停止
F11/Shift+F11:步进/步出
F10:跨过
Ctrl+K Ctrl+I:显示悬停#终端相关:Ctrl+:显示集成终端 Ctrl+Shift+:创建新终端
Ctrl+C:复制选择
Ctrl+V:粘贴到活动终端
Ctrl+↑/↓:上/下滚动
Shift+PgUp/PgDn:向上/向下滚动页面
Ctrl+Home/End:滚动到顶部/底部

安装NODE.JS

Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。
 下载对应你系统的Node.js版本:NODEJS
 我下载的版本 在这里插入图片描述
然后安装,安装后进入安装目录 node -v 查看版本
Vscode-工具使用_第2张图片

包资源管理器NPM

npm全称Node Package Manager,他是node包管理和分发工具。其实我们可以把NPM理解为前端的Maven
,Node.js 内置了 npm

-- 这里要用管理员进入cmd 
C:\Windows\System32>npm install express

added 58 packages in 5s

8 packages are looking for funding
  run `npm fund` for details

C:\Windows\System32>

淘宝NPM镜像

有时我们使用npm下载资源会很慢,所以我们可以安装一个cnmp(淘宝镜像)来加快下载速度。输入命令,进行全局安装淘宝镜像。

npm install -g cnpm --registry=https://registry.npm.taobao.org

C:\WINDOWS\system32>npm install -g cnpm --registry=https://registry.npm.taobao.org
C:\Users\Lenovo\AppData\Roaming\npm\cnpm -> C:\Users\Lenovo\AppData\Roaming\npm\node_modules\cnpm\bin\cnpm
npm WARN notsup Unsupported engine for [email protected]: wanted: {"node":">= 14.18.0"} (current: {"node":"14.17.3","npm":"6.14.13"})
npm WARN notsup Not compatible with your version of node/npm: [email protected]
npm WARN notsup Unsupported engine for [email protected]: wanted: {"node":">= 14.19.3"} (current: {"node":"14.17.3","npm":"6.14.13"})
npm WARN notsup Not compatible with your version of node/npm: [email protected]
npm WARN notsup Unsupported engine for [email protected]: wanted: {"node":">=14.18.0"} (current: {"node":"14.17.3","npm":"6.14.13"})
npm WARN notsup Not compatible with your version of node/npm: [email protected]

+ [email protected]
added 368 packages from 92 contributors, removed 398 packages, updated 307 packages and moved 3 packages in 429.006s

安装后,我们可以使用以下命令来查看cnpm的版本

cnpm ‐v

使用cnpm
      cnpm install 需要下载的js库

C:\Windows\System32>npm fund
System32
+-- https://github.com/sponsors/ljharb
|   `-- [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected]
`-- https://github.com/sponsors/feross
    `-- [email protected]

卸载CNPM

npm uninstall -g cnpm
npm run build

‘gulp’ 不是内部或外部命令,也不是可运行的程序或批处理文件。

-- 安装 gulp 
npm install gulp -g

查看全局配置

npm config ls 

npm set prefix  "E:\developer\npm-repo"
-- 设置缓存目录 
npm set cache "E:\developer\npm-cache"

查看镜像地址

C:\Windows\System32>npm config get registry
https://registry.npmjs.org/

改镜像地址

-- 设置镜像   
C:\Windows\System32>npm config set registry https://registry.npm.taobao.org

C:\Windows\System32>npm ls -g
E:\developer\npm-repo
-- (empty)


C:\Windows\System32>npm config get registry
https://registry.npm.taobao.org

查看安装包

-- 查看本地安装包 
C:\Windows\System32>npm list
System32@ C:\Windows\System32
`-- [email protected]
-- 查看全局安装包 
C:\Windows\System32>npm list -g
E:\developer\npm-repo
`-- [email protected]

安装包

npm install --legacy-peer-deps  -- 或者后面这个不要 这个是解决 依赖冲突 的

npm install [email protected] --ignore-scripts  -- 后面的参数是单独安装某个包

NPM 查看包

npm  list 

gyp ERR! stack Error: Could not find any Visual Studio installation to use

npm install -globabl -production windows-build-tools

C:\WINDOWS\system32>npm install -globabl -production windows-build-tools
npm WARN deprecated [email protected]: Node.js now includes build tools for Windows. You probably no longer need this tool. See https://github.com/felixrieseberg/windows-build-tools for details.
npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated [email protected]: this library is no longer supported
npm WARN deprecated [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.

> [email protected] postinstall C:\WINDOWS\system32\node_modules\windows-build-tools
> node ./dist/index.js



Downloading python-2.7.15.amd64.msi
[============================================>] 100.0% (0 B/s)
Downloaded python-2.7.15.amd64.msi. Saved to C:\Users\Lenovo\.windows-build-tools\python-2.7.15.amd64.msi.
Downloading vs_BuildTools.exe
[============================================>] 100.0% of 1.12 MB (743 kB/s)
Downloaded vs_BuildTools.exe. Saved to C:\Users\Lenovo\.windows-build-tools\vs_BuildTools.exe.

Starting installation...
Launched installers, now waiting for them to finish.
This will likely take some time - please be patient!

Status from the installers:
---------- Visual Studio Build Tools ----------
Still waiting for installer log file...
------------------- Python --------------------
Successfully installed Python 2.7                    
npm install -g node-gyp
C:\WINDOWS\system32>npm install -g node-gyp
C:\Users\Lenovo\AppData\Roaming\npm\node-gyp -> C:\Users\Lenovo\AppData\Roaming\npm\node_modules\node-gyp\bin\node-gyp.js
+ [email protected]
added 53 packages from 15 contributors, removed 10 packages and updated 81 packages in 6.431s
-- 检查一下
C:\WINDOWS\system32>node-gyp list
gyp info it worked if it ends with ok
gyp info using [email protected]
gyp info using [email protected] | win32 | x64
14.17.3
gyp info ok
npm config set python C:\Users\Lenovo\.windows-build-tools\python27

C:\WINDOWS\system32>npm config set python C:\Users\Lenovo\.windows-build-tools\python27

– 设置全局淘宝镜像
C:\WINDOWS\system32>npm config set registry https://registry.npm.taobao.org

– nrm 安装
C:\WINDOWS\system32>npm install nrm -g
C:\Users\Lenovo\AppData\Roaming\npm\nrm -> C:\Users\Lenovo\AppData\Roaming\npm\node_modules\nrm\cli.js

C:\WINDOWS\system32>nrm ls
npm ---------- https://registry.npmjs.org/
yarn --------- https://registry.yarnpkg.com/
tencent ------ https://mirrors.cloud.tencent.com/npm/
cnpm --------- https://r.cnpmjs.org/
taobao ------- https://registry.npmmirror.com/
npmMirror ---- https://skimdb.npmjs.com/registry/

the end

你可能感兴趣的:(工具使用经验,vscode,ide,编辑器)