vscode常用的插件

Vscode自己需要的插件

https://www.cnblogs.com/sexintercourse/p/9521946.html 

Open in browser

1. 1. 只支持将html类型文件，在浏览器自动打开呈现
   2. Option+B通过默认浏览器打开
   3. Shift+option+B选择浏览器打开

Code runner

1. 1. 将用鼠标选中的代码，右键之后可以只运行选中的代码。Alt+ctrl+N

Debugger for chrome

1. 1. 调试前端页面之中，引入的javascript文件或者typescript文件中的代码。
   2. 调试方法就是{
      1.     "version": "0.2.0",
      2.     "configurations": [
      3.         {
      4.             "name": "Launch localhost",
      5.             "type": "chrome",
      6.             "request": "launch",
      7.             "url": "http://localhost/debug.html", // 要调试的文件相对于根目录的目录
      8.             "webRoot": "${workspaceFolder}/wwwroot" // 项目的根目录
      9.         },
      10.         {
      11.             "name": "Launch index.html",
      12.             "type": "chrome",
      13.             "request": "launch",
      14.             "file": "${workspaceFolder}/index.html" // 要调试文件的相对于绝对路径的目录
      15.         },
      16.     ]
      17. }

Document this

1. 1. 文档注释插件，可以快速生成注释/** */，ctrl+alt+D连续按两次

Vscode快捷键：自己常用

1. 1. 触发建议：ctrl+/
   2. 单行注释：cmd+/
   3. 代码格式化：alt+shift+F
   4. 切换顶部已经打开的文件：cmd+shift+{ 或者 cmd+shift+},当前输入法必须是英文输入法
   5. 在下一行插入：cmd+enter
   6. 在上一行插入：cmd+shift+enter
   7. Vscode最大化最小化：ctrl+cmd+F
   8. 将代码上移或者下移：ALT+up或者alt+down
   9. 将一行代码复制到上面或者下面：shift+alt+up/down
   10. 打开vscode的自带终端cmd+J
   11. 全部折叠/展开：cmd+K然后cmd+0 cmd+j
   12. 关闭左边栏：cmd+B
   13. 启动代码：ctrl+alt+N
   14. 停止代码：ctrl+alt+M
   15. 删除一行：cmd+D
   16. 关闭当前文件:cmd+W
   17. 窗口分栏/合栏：ctrl+cmd+right/left
   18. vscode终端清除所有数据：cmd+K
   19. 命令面板：shift+cmd+P或者F1

git history

1. 1. 可以通过软件看到团队对git仓库的操作，并且可以查看以前分支的文件。等等功能，总之很强。在vscode的右上角： 

GitLens

1. 1. 安装完之后，鼠标移动到该行代码，尾部会显示 谁，什么时间，自己注明的操作备注。这些信息

Import cost

1. 1. 显示引入模块的大小

intelliSense for css names in html

1. 1. css代码提示

JavaScript (ES6) code snippets

1. 1. 为JavaScript，typescript，html，react，和vue提供了es6的语法支持

npm intelliSense

1. 1. require引入模块的时候，提示模块名

one dark pro

1. 1. 使项目里的所有文件，根据类型的不同显示不同的icon（图标）。

todo highlight

1. 1. 使不同的代码显示不同的颜色，比如require括号中引入的包名都显示绿色。定义的语言，let，const，var都显示黄色，变量名显示红色

Jslint与Jshint

1. 1. https://blog.csdn.net/weixin_40880224/article/details/81279716 

1. 1. 都是对于js代码语法规范报错提醒的插件
   2. Jshint需要安装插件之后，并且通过npm install -g jshint进行全局安装,并且需要在所写的js文件头部配置/*jshint esversion: 6 */,才会避免一些无意义警告

Tslint

1. 1. 对于写typescript代码语法规范报错提醒的插件

Eslint

1. 官方配置API：https://eslint.org/docs/user-guide/configuring 
2. 配置详解：https://blog.csdn.net/weixin_38606332/article/details/80864381 
3. https://www.cnblogs.com/ruanyifeng/p/5283708.html

Vs code-icon

1. 1. 对于vs code项目所有文件与文件夹根据类型的不同赋予不同的icon图标。注！！！此插件文件夹都会有不同的图标
   2. 配置：打开命令窗口，输入icon，找到File icon Theme，选择vscode icons

Chinese

1. 1. Vscode中文简体语言包，安装后在locale.json中添加”locale ”: ”zh-cn“
   2. Locale.json打开方式：打开命令面板，输入config，然后找到Configure Display Language

Beautify

1. 1. 代码格式化的软件，如过不喜欢可以，用vscode本身的快捷键进行格式化
   2. 对于js，json，css，html，sass都可以进行格式化
   3. 个人配置：https://www.jianshu.com/p/34ad34528549 链接中的配置文件，打开命令面板:打开用户设置，再打开其中的扩展，在找到Beautify插件，然后选择在setting.Json中编辑，即可

Vscode-fileheader

1. 1. 为文件添加头注释用的，ctrl+alt+i