本文内容来源于网络，个人归纳整理，只为理解记忆方便
1，vscode
1, vscode常用快捷键
1，打开命令面板
ctrl + shift + p 调出用于执行命令的输入框，这些命令来自与vscode自带的或者通过插件拓展的命令。
2，向上向下移动一行
Alt + 向上箭头|向下箭头
3，向上向下复制一行
Shift + Alt + 向上箭头|向下箭头
4，删除一行
Ctrl + Shift + k
5, 跳到封闭括号的另一端
Ctrl + Shift + \
6，增加块注释
Shift + Alt + a
7，选中光标所在的词
Shift + Alt + 向右箭头|向左箭头
8，光标不在行尾，重开一行
Ctrl + Enter
9，选中一个词
Ctrl + d
10, 折叠展开区域
Ctrl + Shift + [/]
11, 添加块注释
Shift + Alt + a
2, vscode前端开发常用插件
1，常用代码段
1，JavaScript(ES6) code snippets
ES6语法智能提示，以及快速输入，支持包括：ts,jsx,tsx,html,.vue
2, HTML Snippets
Full HTML tags including HTML5 Snippets
3，Angular 10 Snippets - TypeScript, Html, Angular Material, ngRx, RxJS & Flex Layout
2，quokka
quokka.js是一个快速开发JavaScript和typescript的开发者工具，能够在输入代码的时候，实时的将值更新或者展示在IDE上。
-
1，在一个JS/TS文件中启动或者重启quokka
ctrl k, q -
2,代码覆盖率 一旦quokka运行，便可以在编辑器的左侧装订线看到代码的覆盖。覆盖是实时的，只要改动代码就会实时更新。
灰白色：代表没有被执行。
绿色：代表已经被执行。
黄色：代表部分执行，quokka支持分支代码覆盖级别，因此如果一行包含逻辑表达式或者三元运算符均有覆盖和未覆盖分支的，将以黄色显示。
红色：代表该源码行是错误的来源。
/* We've started Quokka for you automatically on this file.
*
* To open a new Quokka file:
* - Press `Ctrl K, J` to create a new JavaScript File
* - Press `Ctrl K, T` to create a new TypeScript File
* - Press `Ctrl K, L` to open an interactive sample from:
* https://github.com/wallabyjs/interactive-examples
*
* To start/restart Quokka on an existing file:
* - Press `Ctrl K, Q`
*/
// See the output of console.log right next to your code
const quokka = { isAwesome1: true };
console.log(quokka);
// console.log(one);
// See the value of a variable simply by typing its name
quokka;
// Use sequence expression to compare objects
const wallaby = { "is Quokka's BigBrother": true };
(quokka, wallaby);
(quokka, wallaby)
// Gutter indicators show what code was executed (code coverage)
// Orange indicators means only part of the line was executed
// because JavaScript stops processing after first false value
console.log('partialCoverage', false && true);
console.log('partialCoverage', false&&true);
// Green indicators means that Quokka executed all statements
// on a line of code
if (false) {
// White indicators means that a line of code was never
// executed by Quokka
console.log('noCoverage', true);
}
// Red indicators show where an error occurred. The error message
// is also shown beside the error
throw new Error('Something went wrong');
// There's a lot more Quokka can do! Visit our docs to learn more:
// - https://quokkajs.com/docs/
3，CSS peek
可以追踪CSS样式定义的地方。
4，gitLens
5, vetur
6,Auto Close Tag
自动闭合HTML/XML标签
7,Auto Rename Tag
自动完成另一侧标签的同步修改
8, vue
vue语法高亮
9，Vue 3 Snippets
这个插件基于最新的 Vue 2 及 Vue 3 的 API 添加了 Code Snippets。
10, Live Server
Live Server：一个具有实时加载功能的小型服务器，可以使用它来破解html/css/javascript，但是不能用于部署最终站点。也就是说我们可以在项目中实时用live-server作为一个实时服务器实时查看开发的网页或项目效果。
1,liverServer的使用
第一种方式：选择需要浏览的文件，右键开启服务。
第二种方式：在vscode底部右下方有go live 按钮，可以点击这个按钮启动或者关闭服务。
11，在vscode里面刷LeetCode
1，algorithm
2，LeetCode
12, 前端每日一题
13，Code Runner
1，
在安装完code runner之后，点击按钮，终端报如下问题：
'ts-node' 不是内部或外部命令，也不是可运行的程序
或批处理文件。
在npm的全局安装ts-node。
npm install -g ts-node
问题解决。
14，Angular Schematics
angular开发工作流工具，低代码。
15，Angular Language Service
angular语言服务，提供能在 Angular 模板内获得自动完成、错误检查、给出提示和内部导航等功能。
16，Better Comments
17，vscode-icons
2.9 vscode配置项介绍
1，file.autoSave
文件是否进行自动保存，推荐设置为onFocusChange——文件焦点变化时自动保存。
- off, 文件不自动保存
- afterDelay， 延迟自动保存，通过 Auto Save Delay 设置延时时间，单位毫秒。
- onFocusChange，当前文件焦点离开时自动保存。例如：打开了一个其他的文件，当前文件进行自动保存。
- onWindowChange，当前窗户VScode焦点离开时自动保存。例如：文件编辑过程中，打开了Chrome，搜索了些资料，此时文件已经保存。
2，editor.tabCompletion
在出现推荐值时，按下Tab键是否自动填入最佳推荐值，推荐设置为on;
3，editor.lineNumbers
控制行号的显示
3，常遇到的问题
1，
vscode内置powershell无法通过 tsc --init 新建tsconfig.json文件。
解决办法：使用cmd来新建。
2，vscode终端命令node命令，提示node不是内部或者外部命令，也不是可运行的程序或批处理文件。
- 右键点击vscode应用图标，打开属性项。
- 点击兼容性。
- 在特权等级下，勾选
以管理员身份运行此程序。
4，vscode中使用node
node中默认的是非严格模式。
5，vscode使用教程
1，《Visual Studio Code 权威指南》
2，韩俊的 玩转vscode 知乎专栏
3，vscode官方文档
2，Chrome
1，Chrome常用快捷键
1，跳到最后一个标签页
ctrl + 9
2，跳到第二个标签页
ctrl + 2
3，前一个标签页/后一个标签页
ctrl + pageUp/pageDown
2，Chrome常用插件
1，octotree
2，沙拉查词
3，adblock
4, onetab
5, crxmouse
6, vimium
7, Angular DevTools
angular的调试开发工具
