vscode

一、背景 使用Visual Studio Code写了一个简单的Html页面，想调试下其中script标签里的javascript代码，网上查了一通，基本都是复制粘贴或者大同小异的文章，就是要安装Debugger for Chrome插件，修改launch.json配置信息，F5启动，这些都照做了，但是仍有两个问题，一个是Html文件里不能打断点，只能在js文件里面打，二是chrome打开后说连接不到localhost，下面分别讲讲是怎么解决。 二、Html文件中不能打断点问题 默认情况下，VSCode是不能在Html文件里打断点的，但是可以修改设置，依次打开：文件->首选项->设置，然后功能->调试->勾选上“允许在任何文件中设置断点”。 这样就可以在Html的script标签中打断点了，如果断点打在其他html标签上，VSCode会提示“未验证的断点” 三、Chrome调试问题 （1）请先打开一个文件夹以进行高级调试配置 一开始，我直接新建了一个html文件，然后运行那里显示没有配置，按齿轮图标提示： 查阅资料发现，要用VSCode打开文件所在的文件夹才能进行调试。 （2）Chrome运行后提示无法访问此网站 开始遇到这个问题，网上查了一圈没发现和我一样情况的，一开始以为是端口占用，改了也不行，看路径不对，手动补全，也不行，后来发现我用的是默认生成的launch.json

在命令行运行 VSCode（macOS系统） Windows 版 VSCode 的安装脚本带着一个是否把 Code 加入 PATH 的选项，而 macOS版却没有。有的人想到给 VSCode 做一个符号链接加入 PATH 中，但实际上这样做会有问题（配置项加载错误）。其实 VSCode 自身可以 创建 code 命令 。 打开 vscode 通过快捷键 shift + command + p 运行命令 shell code 结束 从现在开始就可以在命令行里使用 code 命令了。 来源： CSDN 作者： 英格瓦 链接： https://blog.csdn.net/ingvar08/article/details/79419121

本文参考： 使用VSCode 断点调试 js项目，html页面 - CSDN博客 https://blog.csdn.net/arvin0/article/details/53673351 今天参考了上面文章，使用vscode来学习调试js，折腾了一番后，终于成功了。现将方法记录如下： 1.安装VScode，这个有蓝色图标版，还有绿色图标版，不知二者有何区别。 这个是绿色版的，有Insiders标志； 2.下载安装Debugger for Chrome： 配置launch.json: 配置文件内容： { "version": "0.2.0", "configurations": [ { "name": "使用本机 Chrome 调试", "type": "chrome", "request": "launch", "file": "${workspaceRoot}/00.html", // "url": "http://mysite.com/index.html", //使用外部服务器时,请注释掉 file, 改用 url, 并将 useBuildInServer 设置为 false "http://mysite.com/index.html "runtimeExecutable": "C:\\Users\\Administrator\\AppData\\Roaming\

VSCode 上装插件：Debugger for Chrome ctrl+shift+p 选择Extensions:install Extensions，选择Debugger for Chrome，installing，然后reload 修改launch.json { // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing attributes. // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [{ "name": "谷歌浏览器", //运行html文件，用谷歌浏览器打开 "type": "chrome", "request": "launch", "url": "${file}", "sourceMaps": true, "webRoot": "${workspaceRoot}" }, { "name": "nodeLauch", //单独调试js，即可以直接运行js "type": "node", "request": "launch", "program"

在launch.json里面配置如下代码就可以了 { "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "Launch Chrome against localhost", "url": "${file}", "sourceMaps": true, "webRoot": "${workspaceRoot}" }, { "name": "nodeLauch", //单独调试js，即可以直接运行js "type": "node", "request": "launch", "program": "${file}", //这个配置成你要调试的文件、${file}当前打开的文件 "stopOnEntry": false, "args": [], "cwd": "${workspaceRoot}", "runtimeExecutable": null, "runtimeArgs": [ "--nolazy" ], "env": { "NODE_ENV": "development" }, "console": "internalConsole", "preLaunchTask": "", "sourceMaps": false, "outDir": null } ]

创建一个tasks文件: 使用快捷键 cmd + shift + b , 选择配置任务“，然后”从模板创建tasks.json文件“，然后从列表中选择”其他“。如果没有其他选项，就随便选一个。这样就创建了一个tasks.json文件啦 task.json文件配置 { "version": "2.0.0", "tasks": [ { "label": "console", "type": "shell", "osx": { "command": "/usr/local/bin/node ${file}" }, "linux": { "command": "/usr/bin/node ${file}" }, "windows": { "command": "C:\\Program Files\\nodejs\\node.exe ${file}" }, "group": { "kind": "build", "isDefault": true } } ] } 编辑之后保存即可。注意版本号，可能有些字段不支持了。 使用 保存后，选择一个js文件，使用快捷键 cmd + shift + b ，就可以看到js的console啦 来源： CSDN 作者： weixin_34319640 链接： https://blog.csdn.net/weixin_34319640/article

可能Windows开发的一个缺点就是与shell结合的不好，Git Bash提供了一种方式可以在Windows下执行Linux命令，如何将其结合在VSCode中使用呢？ 参考回答： https://stackoverflow.com/questions/42606837/how-to-use-bash-on-windows-from-visual-studio-code-integrated-terminal 两种方式：1. 将Git bash目录比如 C:\Program Files (x86)\Git\bin\bash.exe 添加到环境变量中，就可以VSCode终端输入 bash 进入Bash模式了， 同理，输入 cmd 即可返回默认Cmd模式。 2. 如果想默认设置Bash模式，可以编辑用户设置文件，添加 "terminal.integrated.shell.windows": "C:\\Program Files (x86)\\Git\\bin\\bash.exe" 来源： CSDN 作者： justforuse 链接： https://blog.csdn.net/u014291497/article/details/79146099

文章目录 一、调试准备 二、调试配置 2.1、Launch配置 2.2、Attach配置 三、在IDE上调试JS的配置 参考文献 一、调试准备 Windows10 64bits IDE：Visual Studio Code1.28.2 安装插件：Chrome（安装方法：Debug -> Install Additional Debuggers… -> Debugger for Chrome，重新启动vscode即可。） 二、调试配置 首先该插件运行需要安装有本地服务器，其次有两种配置方式，分别为： （1）launch：重新打开一个chrome来显示应用程序 （2）attach：在已经运行的chrome中显示应用程序 2.1、Launch配置 按F5并选择chrome进入配置文件launch.json，我的Launch配置如下所示： "version" : "0.2.0" , "configurations" : [ { "type" : "chrome" , "request" : "launch" , "name" : "Launch Chrome against localhost" , "url" : "http://localhost/文件路径" , "webRoot" : "${workspaceFolder}" } ] 2.2、Attach配置

一、在上传前的注意事项 1、 要配置几个文件： 　　（1）在根目录添加 .gitignore 文件：里面添加一些上传时需要忽略的文件 　　（2）在根目录添加 README.md 文件，这个用来说明项目的 　　（3）还要添加开源协议文件：LICENSE；一般从别的项目拷贝一份就好了。【关于开源协议之间的区别，可以百度了解详情】 2、然后在vscode里面 调出终端，按Crtl + ~ 键来调。 　　（1）输入git init 初始化后，会多一个 .git文件夹 　　（2）git status 查看状态 　　（3）git add -A 或 git add . 添加到暂存区 　　（4）git commit -m "项目文件夹名" 根据自己情况来命名；【完成了以上，仅仅是提交到了本地 的 .git 里面了，还没有上传到远程仓库】 　　（5）上传到远程仓库，有两种选择方案：一种是git，一种是码云； 　　【插播：注册码云，并配置码云,在码云里我的设置里进行设置】 　　　　1、点击码云的SSH,出现一个公钥的，这里面的的公钥从自己的电脑上面找，路径在：我的电脑c盘 -> 用户 -> （这个是每天电脑的配置不一样，文件夹名也不一样，目前我的是BJ0720）-> .ssh -> id_rsa.pub ；用文本文档打开id_rsa.pub 　　　　　　复制里面的公钥，到码云的放公钥的框框里面

VSCode（Visual Studio Code）是由微软研发的一款免费、开源的跨平台文本（代码）编辑器，算是目前前端开发几乎完美的软件开发工具。 1.VSCode下载 VSCode下载链接: https://code.visualstudio.com/ 2.VSCode汉化 3.VSCode常用插件(安装步骤同汉化) 3.1 Auto Close Tag (自动闭合HTML/XML标签) 3.2 Auto Rename Tag (自动完成另一侧标签的同步修改) 3.3 Beautify (格式化 html ,js,css) 3.4 Bracket Pair Colorizer(给括号加上不同的颜色，便于区分不同的区块) 3.5 Debugger for Chrome(映射vscode上的断点到chrome上，方便调试) 3.6 ESLint(js语法纠错，可以自定义配置) 3.7 GitLens(方便查看git日志) 3.8 HTML CSS Support (智能提示CSS类名以及id) 3.9 HTML Snippets(智能提示HTML标签，以及标签含义) 3.10 JavaScript(ES6) code snippets(ES6语法智能提示，以及快速输入) 3.11 jQuery Code Snippets(jQuery代码智能提示) 3.12 Markdown