VSCode插件和快捷键

vs code已经不需要打印调试&＃xff0c;而可以使用终端工具&＃xff0c;在vs code中进行调试&＃xff0c;vscode中调试也不好&＃xff0c;还是要用chrome dev tool去调试

VS Code 配置

• vscode的配置分为两部分 全局配置(用户配置) 和 局部配置(工作空间配置&＃xff0c;仅针对单个project)
  • 全局配置: User Settings是全局配置&＃xff0c;应用到打开的任何一个VS Code实例。
    • 在Windows环境中&＃xff0c;打开 File > Preferences > Settings &＃xff0c;可以看到VS Code支持User Settings 和 Workspace Settings。用户的配置文件存在 %APPDATA%\Code\User\settings.json 中。但是这个文件可以通过&＃xff0c;打开 ui 的用户配置&＃xff0c;然后从里面点进去
  • 局部配置: Workspace Settings 只存储到工作空间&＃xff0c;只在工作空间打开时应用&＃xff0c;是局部的配置&＃xff0c;会覆盖全局配置。
    • 局部配置&＃xff0c;的文件是放在 当前项目的 .vscode 目录下&＃xff0c;有一个 settings.json 文件

插件

插件直接就可以在vscode里面去安装

• 离线安装 vscode插件&＃xff1a;适用于内网无法直接下载插件的情况
  • (1) 进入网站&＃xff1a;https://marketplace.visualstudio.com/vscode
  • (2) 搜索插件&＃xff0c;点击进入插件主页&＃xff0c;点击右侧的 Download Extension 链接&＃xff0c;得到下载下来的离线安装包&＃xff0c;以 .vsix 为扩展名结尾(不过这里下载的都是最新版)
  • (3)安装插件
    • 法一&＃xff1a;直接导入&＃xff1a;直接点击 vscode里面的 EXTENSIONS 后面的 … 符号&＃xff0c;选择 install from VXIS 然后选择本地相应的插件包&＃xff0c;插入
    • 法二&＃xff1a;命令导入&＃xff1a;
      • 把下载下来的离线安装包拷贝到 VSCode 的安装目录下的 bin 目录下&＃xff0c;比如我的 VSCode 安装在 D:\Microsoft VS Code\&＃xff0c;因此这里我应该拷贝到 D:\Microsoft VS Code\bin 这个目录下
      • 在第 3 步的 bin 目录下打开cmd&＃xff0c;输入下面命令&＃xff0c;最后面的参数换成你下载的插件离线安装包的名字即可。如&＃xff1a;code --install-extension yzhang.markdown-all-in-one-1.4.0.vsix
  • (4)重启vscode

• vscode下载历史版本插件&＃xff1a;由于某些原因&＃xff0c;我们必须使用旧版的vscode&＃xff0c;并且如果还是在内网中使用&＃xff0c;那么就肯定是有下载历史版本插件&＃xff0c;这一个需求的
  • 首先依然是登陆商店&＃xff0c;然后搜索对应的插件 进入主页
  • 点击主页右边的 Changelog &＃xff0c;即可看到这个插件的历史版本记录
  • 再回到主页 点击 Download Extension(下载最新版本)&＃xff0c;下载完了之后&＃xff0c;从谷歌浏览器的 下载内容中 可以看到 对应的下载链接 如 https://marketplace.visualstudio.com/_apis/public/gallery/publishers/MS-CEINTL/vsextensions/vscode-language-pack-zh-hans/1.39.1/vspackage。这时候如果想下哪个版本&＃xff0c;就把版本号 改了就好了(需要注意的是 Changelog 里面看到的版本 是只有两位的 如1.39;而这里需要的版本是有三位的&＃xff0c;如1.39.1, 所以需要自己手动再加一位进去)

一、Auto Import

• 简介&＃xff1a;自动去查找、分析、然后提供代码补全。对于 TypeScript 和 TSX&＃xff0c;可以适用&＃xff01;

二、Atom One Dark Theme

• 简介&＃xff1a;暗色主题&＃xff0c;还可以。安装了之后&＃xff0c;主题不会自动切换&＃xff0c;需要自己去首选项 -> 颜色主题 里面&＃xff0c;去选择这个主题&＃xff0c;然后就好了。还有一个问题&＃xff0c;就是弄了这个主题之后&＃xff0c;注释的颜色是黑的&＃xff0c;不好看&＃xff0c;所以也需要去setting里面改下注释的颜色

"editor.tokenColorCustomizations": {"comments": {"foreground": "#479c55"}
}


三、Atuo Rename Tag

• 简介&＃xff1a;修改 html 标签&＃xff0c;自动帮你完成尾部闭合标签的同步修改&＃xff0c;不过有些bug

四、Beauty

• 简介&＃xff1a;Beauty is a code beautifier extension for VSCODE among Web Developing。这个还是格式化代码&＃xff0c;选中代码之后ctrl&＃43;shift&＃43;b使用。相同的类型的格式化插件还有prettier(没有prettier好用)

五、Bracket Pair Colorizer

• 简介&＃xff1a;让括号拥有独立的颜色&＃xff0c;易于区分&＃xff0c;即函数里面嵌套有括号&＃xff0c;则括号的颜色不一样。可以配合任意主题使用

六、Chinese

• 简介&＃xff1a;适用于 VS Code 的中文&＃xff08;简体&＃xff09;语言包

七、Code Runner

• 简介&＃xff1a;支持多种语言的代码的立即执行。支持的语言&＃xff1a;C, C&＃43;&＃43;, Java, Javascript, PHP, Python, Perl, Perl 6, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, F# (.NET Core), C# Script, C# (.NET Core), Vbscript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script, R, AppleScript, Elixir, Visual Basic .NET, Clojure, Haxe, Objective-C, Rust, Racket, AutoHotkey, AutoIt, Kotlin, Dart, Free Pascal, Haskell, Nim, D。

八、Code Spell Checker

• 简介&＃xff1a;插件安装后就不用管就好了&＃xff0c;在你代码中有单词拼写错误时&＃xff0c;你就会发现它的好处&＃xff0c;因为我们写代码毕竟都是大量的英文单词变量定义&＃xff0c;插件还可以给出错误拼写单词的建议

九、Color Info

• 简介&＃xff1a;为你提供你在 CSS 中使用颜色的相关信息。
• 用法&＃xff1a;
  • (1)你只需在颜色上悬停光标&＃xff0c;就可以预览色块中色彩模型的&＃xff08;HEX、 RGB、HSL 和 CMYK&＃xff09;相关信息了

十、CSS Peek

• 简介&＃xff1a;可以在 HTML 中通过 CSS id 或则 class 来定位到其定义

十一、Debugger for Chrome

• 简介&＃xff1a;太难用了&＃xff0c;调试还是直接用chrome devtools算了。直接在VS Code调试js&＃xff0c;可以打断点调试。就不用去chrome浏览器的dev tool的source里面打断点调试了
  • 有一个原理&＃xff1a;vscode并没有集成chorme控制台&＃xff0c;而这个插件也没有集成控制台。这个插件在使用的时候会打开chrome浏览器&＃xff0c;然后挂载到chrome进程。之后在vscode中输入的命令&＃xff0c;会被vscode发送到chrome进程&＃xff0c;浏览器处理这条语句并输出之后&＃xff0c;发送给vscode的调试器显示

十二、Document This

• 简介&＃xff1a;Document This 可以快速地帮你生成注释&＃xff0c;如一些函数的注释还能帮你抽取出参数的定义等&＃xff0c;是你编写规范代码必备的工具。&＃xff08;注意&＃xff1a;新版的vscode已经原生支持,在function上输入/** tab&＃xff09;
• 用法&＃xff1a;
  • (1)Ctrl&＃43;Alt&＃43;D 然后再次 Ctrl&＃43;Alt&＃43;D。只能生成在函数附近

十三、filesize

• 简介&＃xff1a;在底部状态栏显示当前文件大小&＃xff0c;点击后还可以看到详细创建、修改时间

十四、Git History

• 简介&＃xff1a;用来查看 git log 或则一个文件的 git 历史&＃xff0c;比较不同的分支&＃xff0c;commits

十五、Git Project Manager

• 简介&＃xff1a;Git Project Manager 可以然你直接一键搜索并打开某个的基于 Git 管理的项目。

十六、GitLens

• 简介&＃xff1a;啥也别说&＃xff0c;直接上图&＃xff01;

十七、HTML Boilerplate

• 简介&＃xff1a; 通过使用 HTML 模版插件&＃xff0c;你就摆脱了为 HTML 新文件重新编写头部和正文标签的苦恼。
• 用法&＃xff1a;
  • (1)你只需在空文件中输入 html&＃xff0c;然后选择HTML5-Boilerplate&＃xff0c;即可生成干净的文档结构

十八、HTML Snippets

• 简介&＃xff1a;超级实用且初级的 H5代码片段以及提示

十九、Image Preview

• 简介&＃xff1a;鼠标移到路径里显示图像预览

二十、Indenticator

• 简介&＃xff1a;突出目前的缩进深度

二十一、IntelliSense for CSS class names in HTML

• 简介&＃xff1a;基于你的项目以及通过link标签引用的外部文件&＃xff0c;该智能插件提供 HTML 中 CSS class 名字的补全。这个插件经常不能加载到100%&＃xff0c;并且会造成卡顿&＃xff0c;不好用

二十二、live server

简介&＃xff1a;这个是用来替代 http-server 的&＃xff0c;并且集成到vscode里面去了。 作用为 直接把非工程化的项目(h5页面) 开启服务器&＃xff0c;并且提供一个自动刷新功能&＃xff0c;即代码改了之后页面自动改(http-server是不带这个功能的)。

使用&＃xff1a;直接右键对应的 html 文件&＃xff0c;就可以打开了。还是不用这个&＃xff0c;直接http-server就可以满足要求了

二十三、Material Icon Theme

• 简介&＃xff1a;The Material Icon Theme provides lots of icons based on Material Design for Visual Studio Cod

二十四、npm Intellisense

• 简介&＃xff1a;VSCode 插件可以在导入语句自动补全 npm 模块名称。&＃xff08;最新版的vscode已经集成此功能&＃xff09;&＃xff0c;确实已经集成了

二十五、Open-In-Browser

• 简介&＃xff1a;在浏览器中打开网页&＃xff1b;可以选择默认浏览器和其他浏览器。
• 用法&＃xff1a;
  • (1)输入Ctrl &＃43; K D。点用都没有

二十六、Path Intellisense

• 简介&＃xff1a;自动路劲补全&＃xff0c;默认不带这个功能的&＃xff0c;赶紧装

二十七、Prettier

• 简介&＃xff1a;你绝对不能少了这个插件&＃xff0c;你需要它来一键美化你的 Javascript/TypeScript/CSS或者另外更多语言的 代码&＃xff0c;只负责格式化代码(code formatter) 的(比如&＃xff0c;一个很长的对象写在一行&＃xff0c;格式化之后就会变成多行)。使用方法为&＃xff0c;直接右键文件&＃xff0c;选择格式化文档就可以了。
  • 例如应该使用单引号还是双引号&＃xff0c;该不该换行&＃xff0c;tab 键占多少个空格&＃xff0c;结尾要不要分号 等等问题,prettier就直接提供了一套解决方案
  • 同时装了Prettier和Eslint的时候&＃xff0c;选择格式化就会提示选择默认的 code formatter 项&＃xff0c;所以就需要用下面的方法来选择vscode的默认格式化插件
  • prettier的配置文件就是根目录的.prettierrc.js&＃xff0c;

// 配置对应语言的默认格式化插件。依然是在vscode的setting里面加上下面代码。
// 或者随便打开一个文件&＃xff0c;&＃39;右键格式化文档方法是使用&＃39;,然后选择 &＃39;配置默认和程序&＃39;
{"[html]": { // 格式化.html文件的默认插件"editor.tabSize": 2,"editor.defaultFormatter": "esbenp.prettier-vscode","editor.formatOnPaste": true},"[Javascript]": { // 格式化.js文件的默认插件"editor.defaultFormatter": "esbenp.prettier-vscode"},"[typescriptreact]": { // 格式化.tsx文件的默认插件"editor.defaultFormatter": "esbenp.prettier-vscode"},"[typescript]": { // 格式化.ts文件的默认插件"editor.defaultFormatter": "esbenp.prettier-vscode"},"[jsonc]": { // 格式化.json文件的默认插件"editor.defaultFormatter": "esbenp.prettier-vscode"},"[json]": { // 格式化.json文件的默认插件"editor.defaultFormatter": "esbenp.prettier-vscode"},"html.format.wrapLineLength": 100,"editor.tabSize": 2,"editor.defaultFormatter": "esbenp.prettier-vscode" // 这个为一次性指定所有类型语言的 formatter&＃xff0c;指定了这个也就可以格式化css了
}


二十八、Eslint

• (1)简介&＃xff1a;eslint和prettier还是有很大的差别的&＃xff0c;eslint是 负责检查代码语法问题(Code-quality rules) 的(比如一个变量声明了没有用&＃xff0c;这个就会被eslint检查出来)。
  • eslint也能格式化&＃xff0c;不过格式化的效果没有prettier插件好。所以要把eslint和prettier一起使用&＃xff0c;并且eslint不能直接用于统一团队代码风格&＃xff0c;而prettier才是用于统一代码风格的格式化工具。
• (2)使用eslint&＃xff1a;使用eslint分为两步。
  • <1>在项目内用npm安装 eslint 及相关的包: 通过npm安装的eslint是在npm打包的时候才检查代码的问题&＃xff0c;不会再vscode里面直接显示出来。不过会检测出整个项目所有文件里面的问题
    • eslint的配置文件就是根目录的.eslintrc.js&＃xff0c;在安装的时候会提示选择"How would you like to use ESlint"&＃xff0c;不要选择"enforce code style"&＃xff0c;因为我们要交给Prettier去负责格式化代码&＃xff0c;否则会有冲突&＃xff01;但是如果选择了的话&＃xff0c;eslint有三种代码风格&＃xff1a;即 Airbnb、Standard、Google
    • 要想运行这个npm安装的eslint&＃xff0c;直接到package里面去找对应的运行lint的命令&＃xff0c;然后运行就好了&＃xff0c;就会弹出错误了
  • <2>给 vscode 安装 eslint 插件&＃xff1a;vscode的插件是直接在写代码的时候就检查代码的问题&＃xff0c;直接在vscode的当前文件里面显示出来。不过只会显示出当前文件里面的错误&＃xff0c;无法直接找到整个项目里面所有的错误

// .eslintrc.js的eslint配置
module.exports &＃61; {"env": {"browser": true,"es6": true},"extends": "eslint:recommended", // extends: &＃39;airbnb-base&＃39;, 上一行为不要代码格式化功能&＃xff0c;这一行为代码格式化选择 airbnb 的格式规范。"globals": {"Atomics": "readonly","SharedArrayBuffer": "readonly"},"parserOptions": {"ecmaVersion": 2018},"rules": {"no-console": "off",// 这里可以设置规则&＃xff1a;//"off" or 0 - 关闭规则//"warn" or 1 - 将规则作为警告打开&＃xff08;不影响退出代码&＃xff09;//"error" or 2 - 将规则作为错误打开&＃xff08;退出代码为1&＃xff09;}
};


二十九、Quokka.js

• 简介&＃xff1a;实时执行 Javascript 代码(做快速的 demo 很有用)

三十、React Native Tools

• 简介&＃xff1a;代码提示、Debugging、集成 RN 的命令。。

三十一、SVG Viewer

• 简介&＃xff1a;一个用来预览 SVG 的插件。
• 用法&＃xff1a;
  • (1)查看SVG - Alt&＃43;Shift&＃43;S O;
  • (2)放大/缩小 - 按住ctrl / cmd并使用鼠标滚轮&＃xff08;向上/向下&＃xff09;;
  • (3)从SVG转换为PNG - Alt&＃43;Shift&＃43;S X;
  • (4)从SVG转换为数据URI方案并复制到剪贴板 - Alt&＃43;Shift&＃43;S O;
  • (5)查看SVG并通过Canvas导出PNG - Alt&＃43;Shift&＃43;S V;

三十二、TODO Highlight

• 简介&＃xff1a;在很多的其他代码编辑器中都有 TODO 标注功能的&＃xff0c;如你写到某一部分的代码时&＃xff0c;其中部分的功能需要稍后再来实现&＃xff0c;这是就可以在对应的代码处添加一个 TODO 类型的注释&＃xff0c;那么后期就可以快速地跳转到这部分继续写&＃xff0c;而且当项目很大的时候&＃xff0c;TODO 就变得更加有用&＃xff0c;因为有时候 TODO 可能有几十个&＃xff0c;帮助你标注那些功能需要继续实现或优化。好像没撒用

三十三、Trailing Spaces

• 简介&＃xff1a;高亮那些冗余的空格&＃xff0c;可以快速删掉

三十四、TypeScript Hero

• 简介&＃xff1a;辅助用 TypeScript 编程的童鞋&＃xff01;

三十五、Vetur

• 简介&＃xff1a;这个是VS Code的Vue工具
• 特点&＃xff1a;Vue 语法高亮显示, 语法错误检查, 代码自动补全

三十六、vscode-icons

• 简介&＃xff1a;让 vscode 资源树目录加上图标&＃xff0c;必备良品&＃xff01;

三十七、vscode-fileheader

• 简介&＃xff1a;这个就很好用了&＃xff0c;在文件的头部给文件加上注释。 如果文件头部已经有了注释&＃xff0c;则注释会自动修改。不然按快捷键 ctrl &＃43; alt &＃43; i来添加注释
  • 默认情况下&＃xff0c;注释的作者为mikey.zhaopeng。我们需要修改这个作者为自己&＃xff0c;按ctrl &＃43; shift &＃43; p进入插件命令面板&＃xff0c;再输入settings,选择>Preferences: Open Settings (JSON)&＃xff0c;进行自定义配置,加上下面代码&＃xff0c;然后重启vscode就好了&＃xff1a;
  • 下面代码加上不起效的话&＃xff0c;就打开文件 -> 首选项 -> 设置 -> 输入fileheader 然后把名字都改成tangwl就好了

"fileheader.Author": "tangwl",
"fileheader.LastModifiedBy": "tangwl"


三十八、emmet

• 简介&＃xff1a;即根据emmet语法&＃xff0c;便捷编写html标签。这个不用自己安装&＃xff0c;vscode自带了的。只需要在setting中输入下面命令&＃xff0c;让emmet在jsx中支持就好了

// 右键展开
"emmet.triggerExpansionOnTab": true,
// jsx支持emmet
"emmet.includeLanguages": {"Javascript": "Javascriptreact"
}


三十九、power mode

• 简介&＃xff1a;即在vscode中输入字符的时候&＃xff0c;可以出现一个动画效果
  • 默认情况下 power mode 的配置为 输入字符&＃xff0c;窗口会进行一个抖动。 修改这个配置&＃xff0c;也就可以直接去 首选项的 setting里面去改&＃xff0c;把 enable shake 去掉就好了

四十、Easy-less

• 简介&＃xff1a;这个插件&＃xff0c;即 用来把 文件目录的less文件&＃xff0c;转换为css文件
  • 这个配置使用的是局部配置&＃xff0c;所以需要在 当前 文件的根目录 先创建一个 .vscode 文件夹&＃xff0c;然后在里面创建一个 settings.json

// settings.json 配置如下
{// 编译less 请先安装 Easy Less 插件"less.compile": {"compress": true, // 是否删除多余空白字符"out": true, // 这个配置为 less文件的输出目录&＃xff0c;设置为true&＃xff0c;代表less输出的css文件 和less文件在同一目录"autoprefixer": "last 100 versions, >1%, ie >&＃61; 10, ie_mob >&＃61; 10, chrome >&＃61; 34, safari >&＃61; 6, ios >&＃61; 6, android >&＃61; 2.3"},
}


四十一、angular2-snippets

angular语法填充

四十二、vscode-generate-getter-setter

优化导入&＃xff1b;get/set

四十三、svn

svn配置。需要安装tortoiseSVN。然后到setting.json中去配置

"svn.path": "D://Software//Tortorise//bin", // 这个是Tortorise的安装目录&＃xff0c;里面的bin文件夹


四十四、Angular Language Service

即提供了一种在 Angular 模板中获取自动补全、错误、提示和导航的方法。 它支持位于独立 HTML 文件中的外部模板以及内联模板

四十五、todo-tree

这东西很好用。用来在代码里面添加注释&＃xff0c;并且可以直接 跳转到写注释的地方&＃xff0c;用于一些临时操作代码的情况

支持在 vscode 中 用 TODO、FIXME、BUG、NOTE、HACK、XXX 来写注释。写好的 注释会高亮&＃xff0c;并且 在vscode的左侧会出现一个 todos按钮&＃xff0c;点进去就可以看到 写的 todo 在哪个文件的哪个位置。配置如下

"todo-tree.highlights.customHighlight": { // 为每个标签设置样式"TODO": {"icon": "tasklist", // 图标"foreground": "white", // 文字颜色"background": "#ff8c00", // 背景颜色"iconColour": "#ff8c00" // 图标颜色},"FIXME": {"icon": "alert","foreground": "white","background": "#FF2D00","iconColour": "#FF2D00"},"BUG": {"icon": "bug","foreground": "white","background": "#FF2D00","iconColour": "#FF2D00"},"NOTE": {"icon": "note","foreground": "white","background": "#98c379","iconColour": "#98c379"},"HACK": {"icon": "beaker","iconColour": "#abb2bf"},"XXX": {"icon": "question","foreground": "white","background": "#3498DB","iconColour": "#3498DB"}},"todo-tree.highlights.defaultHighlight": { // 全局样式配置"type": "text" // 高亮类型 tag text tag-and-comment text-and-comment line whole-line },"todo-tree.general.statusBar": "current file", // 在状态栏中显示的内容-没有(none)&＃xff0c;总计数(total)&＃xff0c;每个标签的计数(tags)&＃xff0c;前三个标签的计数(前三个)或仅当前文件的计数(当前文件)。"todo-tree.general.tagGroups": { // 别名分组"FIXME": [ // 将多个标记设置为同一组&＃xff0c;共享 todo-tree.highlights.customHighlight 的样式"FIXME","FIX" // 这里自定义的标记必需在 todo-tree.general.tags 中配置]},"todo-tree.general.tags": [ // 插件匹配的标记名"XXX", // 标识处代码虽然实现了功能&＃xff0c;但是实现的方法有待商榷。"TODO", // 说明代码还未完成。应当包含下一步要做的事情。"NOTE", // 说明代码的工作方式。"HACK", // 表明代码实现走了一个捷径。应当包含为何使用hack的原因。这也可能表明该问题可能会有更好的解决办法。"FIXME", // 说明代码是有问题的并应尽快修复。"FIX","BUG" // BUG]


四十六、Angular Follow Selector

点击 html 里面的 selector标签&＃xff0c;可以跳转到对应的 component

四十七、Angular Support

神器&＃xff01;&＃xff01;&＃xff01; 在 html 模板中&＃xff0c;点击 函数&＃xff0c;可以直接跳转到 ts 中对应的函数定义处去。不过 会让vscode进行卡顿

使用vscode打断点调试nodejs

如果是调试Javascript&＃xff0c;那么是可以直接在chrome dev tool里面进行调试的。但是&＃xff0c;如果是调试nodejs&＃xff0c;那么就只能在vscode里面调试了

1、初始化一个package.json文件

注&＃xff1a;最新实现中&＃xff0c;不需要有package.json也可以来打断点

• 首先需要使用命令npm init -y,来初始化一个package.json文件。这个文件里面的 main 属性&＃xff0c;就代表入口的js文件。

2、创建launch.json文件

注&＃xff1a;如果是想要给普通一个js文件打断点&＃xff0c;那么首先需要把这个文件加入到工作区&＃xff0c;然后在工作区里面创建.vscode文件夹(直接到debugger界面&＃xff0c;点下拉框&＃xff0c;然后选对应的文件夹名字&＃xff0c;就可以自动给这个文件夹创建)&＃xff0c;才可以开始打断点

• 这个文件就是配置调试项目的一个文件
  • launch.json文件&＃xff1a;这个文件就是Debugger for chrome调试插件的配置文件&＃xff0c;工作区的每一个项目分别拥有自己的launch.json。
    • 打开launch.json: 点击左边侧边栏的调试按钮&＃xff0c;最上面的输入框里面可以选择工作区项目对应的launch.json文件&＃xff0c;然后点击旁边那个设置按钮&＃xff0c;就可以打开对应的launch.json了。
  • launch.json文件配置参数&＃xff1a;
    • type: 就是debugger工具的类型。如node调试工具的type就是node&＃xff0c;同理php调试工具的type就是php&＃xff0c;我们安装的Debugger for Chrome的type就是chrome
    • request&＃xff1a;可以理解为调试工具的启动方式,有launch和attach&＃xff0c;一般就用launch。
    • name: 调试器的名字&＃xff0c;就是这个launch.json文件对应的名字
    • sourceMaps&＃xff1a;默认是启用的&＃xff0c;对于打包的调试&＃xff0c;大神们就必须开启了
    • url和webRoot: 这两个参数是配套使用的&＃xff0c;如果项目是需要开启服务器的就要加上这两个参数。两个参数url指定项目的url地址&＃xff0c;webRoot指定项目的根目录或者需要进行调试的文件。
    • file: 这个参数和上面那两个(url、webroot)参数是互斥的&＃xff0c;只能用其中的一个。如果项目不需要打开服务器&＃xff0c;只需要本地打开&＃xff0c;就用这个参数。file的值和webRoot的值是一样的
    • ${workspaceRoot}值&＃xff1a;表示VSCode中打开文件夹的路径
    • ${workspaceRootFolderName}值&＃xff1a;表示VSCode中打开文件夹的路径, 但不包含"/"
    • ${file}值&＃xff1a;表示当前打开的文件
    • ${relativeFile}值&＃xff1a;表示当前打开的文件,相对于workspaceRoot
    • ${fileBasename}值&＃xff1a;表示当前打开文件的文件名, 不含扩展名
    • ${fileDirname}值&＃xff1a;表示当前打开文件的目录名
    • ${fileExtname}值&＃xff1a;表示当前打开文件的扩展名
    • ${cwd}值&＃xff1a;表示当前启动时的工作目录

{"version": "0.2.0","configurations": [{ // 这个是用vscode来调试 前端页面。url直接监听 localhost就好了"type": "chrome", // 表示这个配置对象是用来调试页面的"request": "launch","name": "Launch Chrome(web debug)", // 这个是vscode 调试侧边栏最上面的那个调试对象名字&＃xff0c;选这个名字就代表运行这个调试对象"url": "http://localhost:8000", // url直接监听 localhost就好了,即这个url对应的页面都会被监听"webRoot": "${workspaceFolder}/view", // 这个是需要使用当前配置进行调试的文件夹。当页面进入断点的时候&＃xff0c;会自动在vscode里面停下来// "sourceMaps": true},{ // 这个是用vscode来调试 node。url直接监听 localhost就好了"type": "node", // 表示这个配置是用来调试node的"request": "launch","name": "Launch node(node debug)", // 这个是vscode 调试侧边栏最上面的那个调试对象名字&＃xff0c;选这个名字就代表运行这个调试对象"skipFiles": ["/**"],"program": "${workspaceFolder}\\app.js" // 这里是需要使用当前配置进行调试的 文件的入口&＃xff1b;启动调试之后&＃xff0c;就从这个入口文件开始执行},]
}


3、开始调试

调试过程中 只要不点调试那里的退出&＃xff0c;那么就一直都不会退出调试。在node的调试模式下&＃xff0c;如果接收到前端的请求&＃xff0c;那么就会自动进行中断。调试模式会自动运行代码&＃xff0c;并且开启自己的服务器&＃xff0c;而不用自己另外再去手动开启服务器。

调试node&＃xff1a;需要先在调试面板选择node对应的调试对象名字&＃xff0c;然后点击调试按钮&＃xff0c;就会自动从配置的文件入口运行node代码并且进入node断点; 但是页面依然是需要自己手动打开(非断点打开)&＃xff1b;直接启动项目也是不能开启node断点的

调试web页面&＃xff1a;这里就需要先手动开启node服务(非断点打开)&＃xff1b;然后在调试面板选择web对应的调试对象名字&＃xff0c;接着点击调试按钮&＃xff0c;就会自动弹出一个浏览器窗口&＃xff0c;并且启动浏览器页面&＃xff0c;就可以了

使用说明

一、文件夹添加和删除

• 简介&＃xff1a;VS Code添加文件夹有两种方式(都是在文件里面点击添加)。第一种为直接打开文件夹&＃xff0c;第二种为将文件夹添加到工作区。
  • 直接打开文件夹&＃xff1a;这种方式只能打开一个文件夹&＃xff0c;重复打开的话&＃xff0c;后面的文件夹会覆盖前面的文件夹。如果要关闭&＃xff0c;需要点击开始 -> 关闭文件夹。如果刚开始有打开的文件夹&＃xff0c;然后又添加文件夹到工作区&＃xff0c;那么打开的文件夹也会自动添加到工作区
  • 将文件夹添加到工作区&＃xff1a;这种方式可以打开任意个文件夹&＃xff0c;并且直接右键点击文件夹就可以关闭文件夹。如果刚开始工作区有文件夹&＃xff0c;这时候点击打开文件夹&＃xff0c;会提示是否将工作区配置保存为文件(第二次打开这个文件就有之前那个工作区了)&＃xff0c;然后就没有工作区了&＃xff0c;就只有刚刚打开的那个文件夹

二、VS Code使用Git

• 初始化git存储库&＃xff1a;
  • (1)先随便创建个文件夹&＃xff0c;添加文件夹到工作区
  • (2)ctrl &＃43; shift &＃43; p打开命令窗口&＃xff0c;输入git&＃xff0c;选择initialize repository。如果发现&＃xff0c;文件夹目录有个.git文件夹&＃xff0c;就初始化成功了
• 提交到本地代码库:
  • (1)修改了代码之后&＃xff0c;在菜单栏左边的源代码管理器上就会显示有挂起的更改
  • (2)点击更改的文件后面的加号(来暂存修改)&＃xff0c;再点击对应的文件夹那里的√(来提交修改)&＃xff0c;再输入提交文件相关的消息&＃xff0c;就好了。
• 提交到github:
  • 点击源代码管理器里面对应文件夹右边的更多&＃xff0c;先点击显示git输出&＃xff0c;再点击推送
• 拉取:
  • 点击源代码管理器里面对应文件夹右边的更多&＃xff0c;点击拉取就好了

快捷键

选择类

这些按键里面&＃xff0c;大部分都是ctrl开头的&＃xff0c;只有很少的是shift或者alt开头的

ctrl&＃43;鼠标左键点击函数&＃xff0c;或者alt&＃43;鼠标左键点击函数 跳转到函数定义或者调用的位置。

alt&＃43;鼠标左键点击多行 可以给多行添加光标&＃xff0c;便于编辑。如果想切换为ctrl&＃43;鼠标左键&＃xff0c;可以在选择里面设置。

Ctrl&＃43;D 选中光标所占的文本&＃xff0c;继续操作则会选中下一个相同的文本。

Ctrl&＃43;L 选中整行&＃xff0c;继续操作则继续选择下一行&＃xff0c;效果和 Shift&＃43;↓ 效果一样。举个例子&＃xff0c;要复制一整行&＃xff0c;但是这一行很长&＃xff0c;就需要用到这个了

Alt&＃43;Up /Alt&＃43;Down 向上/向下移动当前行

Alt&＃43;left /Alt&＃43;right 向前/向后切换到代码中刚刚选中的焦点位置。比如&＃xff0c;当前窗口从第1行用ctrl&＃43;鼠标左键&＃xff0c;点击一个函数跳转到了第10行; 此时&＃xff0c;按下 alt&＃43;left&＃xff0c;就可以跳转到上一个焦点位置&＃xff0c;即刚刚的第一行; 此时再按下 alt&＃43;right&＃xff0c;又可以跳转下一个焦点位置&＃xff0c;即刚刚的第10行

Shift&＃43;Alt&＃43;Down / Shift&＃43;Alt&＃43;Up 向下/向上复制当前行行

Ctrl&＃43;Enter 在下一行插入新行。举个栗子&＃xff1a;即使光标不在行尾&＃xff0c;也能快速向下插入一行。还是有用

Ctrl&＃43;Shift&＃43;Enter 在上一行插入新行。举个栗子&＃xff1a;即使光标不在行首&＃xff0c;也能快速向上插入一行。没用&＃xff0c;和这个一样的需求&＃xff0c;都可以用上面那个来实现

Ctrl&＃43;Shift&＃43;[ 选中代码&＃xff0c;按下快捷键&＃xff0c;折叠代码。没用&＃xff0c;可以直接点击箭头折叠

Ctrl&＃43;Shift&＃43;] 选中代码&＃xff0c;按下快捷键&＃xff0c;展开代码。没用&＃xff0c;可以直接点击箭头折叠

Ctrl&＃43;[ 选中代码&＃xff0c;按下快捷键&＃xff0c;向左缩进4个字节。

Ctrl&＃43;] 选中代码&＃xff0c;按下快捷键&＃xff0c;向右缩进4个字节。

Ctrl&＃43;← 向左单位性地移动光标&＃xff0c;快速移动光标。

Ctrl&＃43;→ 向右单位性地移动光标&＃xff0c;快速移动光标。

shift&＃43;↑ 向上选中多行。

shift&＃43;↓ 向下选中多行。

Shift&＃43;← 向左选中文本。没用&＃xff0c;和这个一样的需求&＃xff0c;都可以用下面那个来解决

Shift&＃43;→ 向右选中文本。

Ctrl&＃43;Shift&＃43;← 向左单位性地选中文本。

Ctrl&＃43;Shift&＃43;→ 向右单位性地选中文本。

Ctrl&＃43;Alt&＃43;↑ 向上添加多行光标&＃xff0c;可同时编辑多行。

Ctrl&＃43;Alt&＃43;↓ 向下添加多行光标&＃xff0c;可同时编辑多行。

注&＃xff1a;上面的两个非常好用。可以添加多个光标&＃xff0c;然后同时改变多行的缩进。

编辑类

Ctrl&＃43;Shift&＃43;K 删除整行。

Ctrl&＃43;/ 注释单行。

Ctrl&＃43;Z 撤销。

Ctrl&＃43;Y 恢复撤销。

Ctrl&＃43;U 软撤销&＃xff0c;感觉和 Gtrl&＃43;Z 一样。

搜索类

Ctrl&＃43;F 查找&＃xff0c;打开搜索框&＃xff0c;查找关键字。点击查找框前面的下拉箭头&＃xff0c;可以进入查找替换模式。Ctrl&＃43;H

Ctrl&＃43;H 查找替换&＃xff0c;即可以选择把找到的全部都替换了

Ctrl&＃43;shift&＃43;F 打开左边侧边栏的查找

• Ctrl&＃43;P 打开搜索框&＃xff0c;可以执行下面这些操作&＃xff1a;
  • 直接输入文件名&＃xff0c;打开指定文件
  • ?开头 列出当前可执行的动作
  • !开头 显示 Errors或 Warnings&＃xff0c;也可以 Ctrl&＃43;Shift&＃43;M
  • :开头 跳转到行数&＃xff0c;也可以 Ctrl&＃43;G 直接进入。输入行号&＃xff0c;则定位到对应行的位置。在知道bug在多少行&＃xff0c;找bug的时候还是比较好用的&＃xff0c;
  • &＃64;开头 跳转到 symbol&＃xff08;搜索变量或者函数&＃xff09;&＃xff0c;也可以 Ctrl&＃43;Shift&＃43;O 直接进入
  • #开头 根据名字查找 symbol&＃xff0c;也可以 Ctrl&＃43;T

Ctrl&＃43;Shift&＃43;P 打开命令面板。在打开的输入框内&＃xff0c;可以输入任何命令。即显示相关插件的命令

显示类

Ctrl&＃43;&＃96; 调出终端(这个终端和cmd终端是一样的&＃xff0c;关闭一样是ctrl &＃43; c)&＃xff0c;可以在这个终端进行npm start或者其它操作

右键文件 这个实际上也很有用&＃xff0c;可以选择在终端中打开(就直接打开了vscode的终端&＃xff0c;并且终端中的文件路径变成了这个文件的路径)&＃xff1b;或者选择在文件资源管理器中显示(这个即是直接打开这个文件所在的文件夹)

ctrl &＃43; 1/2/3 拆分编辑器&＃xff0c;即把编辑器拆分为1/2/3列

F11 全屏模式

window &＃43; e 打开我的资源管理器(我的电脑)

直接在代码里面输入 debugger,并且打开控制台 &＃xff0c;然后 在页面运行到对应的位置&＃xff0c;就可以直接 进入到 vscode 对应页面&＃xff0c;并且进入断点模式&＃xff1b;而不用自己手动 找页面来