VSCode卸载、重装配置、常用快捷键、插件

VSCode彻底卸载

参考： 彻底卸载VSCode

1. 控制面板卸载VSCode.
2. 删除安装插件
   win+R输入%userprofile%，删除当前路径下的.vscode文件夹。
3. 删除用户信息和缓存信息
   win+R输入%appdata%，删除当前路径下的Code和Visual Studio Code文件夹。

VSCode重装插件及配置

1. Chinese（Simplified) 显示语言为中文 （必装）

2. Auto Rename Tag 修改开始标签，结束标签自动变化（删了，直接改配置）
   现在可以不用这个插件，vscode内部集成了，直接改配置，在设置中搜索 linked editing，勾选上即可。
   

3. One Dark Pro 颜色主题 （装了，比较喜欢他的字体颜色）
   
   如果出现注释的内容斜体的情况：找到One Dark Pro扩展，右键–扩展设置–"设置部分代码为斜体"的内容取消勾选。
   

4. 自动格式化代码
   在设置中勾选上这两项，保存后自动格式化代码。
   

5. 将html的属性换行显示：设置—扩展–HTML–找到下图，将其由auto改为forcs-expand-multiline.
   

6. .vue文件默认换行空2个字符，看起来很费劲，将其改为4个字符。
   设置—搜索“tabsize” ，将下图中两个地方都改为4.然后再搜索"detectindentation",将前面的勾选去了。
   
   

7. 将vscode自动更新关闭：
   

8. open in browser 浏览器预览页面 (装了，学习前期使用，使用了vue脚手架后就不用了）
   在VSCode中右键 Open in Default Browser，使用浏览器预览

9. Live Server 实时预览 (相比于5，更推荐这个)，5每次都需要刷新页面
   在使用的时候需要先打开文件所在的目录文件夹。(装了，学习前期使用，使用了vue脚手架后就不用了）
   在VSCode中右键 Open with Live Server，浏览器实时预览。

10. vscode-icons / Material Icon Theme(选择了这个) 设置文件图标主题，为了看文件更加直观。

11. Easy LESS 编译less文件（还没装）
    我们写的less不能直接引入到html文件中，通过这个插件可以自动帮我们生成css文件。

12. 会了吧 翻译页面中不会的英文单词 安装的是v.0.0.12版本（已禁用，感觉用途不大）

13. CodeSnap 将代码截图成图片，选中相应的代码段，右键—CodeSnap–在右侧显示出截图预览，如果想要保存图片，点击彩虹图标，选择保存路径；如果不想保存，只是复制，点击截取的图片，ctrl+c复制粘贴即可。（装了，挺好的）

14. TODO Tree 高亮显示注释内容，在写代码过程中记录一些后续需要修改的地方，以防忘记。(装了，标记代码用，但我用不了这么多) VSCode插件Todo Tree的使用
    

15. TabOut插件：tab键退出右引号、分号等，不用再按右方向键了。格式化后空行的光标移至行首按下tab键后也可以自动缩进。（装了，还可以）
    不想按右方向键的解决方法：①TabOut插件；②内容结束之后再按一次引号。

16. any-rule 正则表达式插件（装了但还没启用）
    使用方法：右键选择“正则大全”，搜索需要的正则表达式。

17. 每日一题 前端面试题插件，使用github登录，可同步到语雀。（装了但还没启用）

18. css peek 快速转到样式定义查看 也可以不安装，直接ctrl+点击链接转到定义的css中去。（根本没装）

19. JavaScript (ES6) code snippets js的快捷生成代码，提高效率，需要背一下。（装了但还没启用）

20. Vetur：vue功能和全面，代码高亮、代码提示等。(vue必装）

21. vue：(装了但还没启用）

22. vue VsCode Snippets：快速生成代码块。（装了）
    （1）vbass-css：组件.vue中快速生成代码块。

23. TypeScript Vue Plugin (Volar) （装了）

24. Vue Language Features (Volar) （装了）

25. ES7+ React/Redux/React-Native snippets：快速生成react代码块。（装了)
    （1）rfc：快速生成函数式组件；
    （2）rcc：快速生成类组件；
    

26. GitLens — Git supercharged：配合git 使用，可以直观的看到 git 的操作、分支树等。
    

27. Github Repositories：在线打开github的仓库，遇到很大的文件可以不用下载下来了，可以直接在线打开。
    

28. 老师装了自己还没装的插件：
    （2）
    （3）应该也用不到了
    
    （4）
    

29. Emmmet语法自动换行链接: vscode中Emmet语法不能自动换行解决方法
    

30. 代码有时出现白色底纹回车无法自动补全
    在设置中搜索下图，取消勾选该项。
    

31. 光标设置，平滑插入动画 勾选
    

32. ctrl+鼠标滚轮缩放字体大小
    设置中搜索滚动，勾选下图选项
    

VSCode常用快捷键

1. 快速复制一行：ctrl+c然后ctrl+v
2. 选定多个相同的单词 ctrl+d
   双击选中单词，多次按下ctrl+d选中相同的单词做统一的修改，这样修改多个相同的单词很方便
3. 上下垂直添加多个光标ctrl+alt+上箭头（下箭头)
   或者 shift+alt+鼠标向下拉选中
4. 在代码中间换行：ctrl+enter。
5. 全局替换某个单词 ctrl+h 再输入要查找和要替换的内容，点击全部替换
6. 快速定位到某一行 ctrl+g 然后输入要跳转到的行数
7. 选择某个区块 shift+alt+拖动鼠标
8. 放大缩小整个页面 ctrl+加号/减号
9. 显示/隐藏左侧目录栏：ctrl+b
10. 控制台终端显示与隐藏：ctrl+~或者ctrl+J
11. 自定义快捷键
    1. js中的单行注释为ctrl+/，选中多行进行注释的效果仍然是多行的单行注释。因此可以设置一个多行注释的快捷键shift+ctrl+/
       管理-快捷键方式，输入原来默认的多行注释快捷键shift+alt+a，修改该键，换成shift+ctrl+/
    • js中单行注释快捷键ctrl+/
    • js中多行注释快捷键shift+ctrl+/
    • 合并行，将分行写的多行代码合并在一行，alt+j
12. 关于光标的快捷键：
    1. 以一个单词为单位移动：ctrl+左右箭头
    2. 移动到该行的开头结尾：fn+左右箭头
    3. 代码块的滚动，在一对花括号之间跳转：ctrl+shift+\
    4. 鼠标创建多光标：alt+点击要新建光标的地方，但是由于需要多次点击，不常用。改用下面的：
       选中元素，然后按下ctrl+D，就会选中下一个相同的元素并创建光标，多次按下ctrl+D创建多光标

使用Vetur Format格式化的配置项

VSCode 使用 Vetur Format格式化的配置项

学习过程中下载用到的软件

1、傻瓜式的快捷的在自己的电脑上搭建服务器：xampp
自己的电脑可以当作一个小型的服务器，在软件管家或360软件中心中下载，傻瓜式安装即可。
2、笔记软件：typora
3、切图 ：PS、像素大厨
4、VSCode
5、谷歌浏览器
6、下载使用node.js的npm安装脚手架。vue脚手架的安装并创建项目

引入(只是学习前期使用，后来用脚手架代替了)

引入JQuery ：JQuery不是框架，只是JS库
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>.
引入VUE框架：
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

插件8.less学到的时候再安装