-
2020-12-31 05:59:43
简评：VSCode 是一个开源的跨平台编辑器，是我最满意的 IDE 之一。本文介绍了几种使用的插件，确实解决了很多的痛点。
Quokka.js
Quokka.js 会在您键入代码编辑器中显示各种执行结果时立即运行您的代码。支持 JavaScript 和 TypeScript。
类似的 Extension:
Code Runner --- 支持多种语言例如： C，C++，Java，JavaSript，PHP，Python，Perl，Perl6 等
Runner
Bracket Pair Colorizer 和 Indent Rainbow
大部分的语言都需要使用括号，但是括号之间的嵌套会让代码看得很难受。 Bracket Pair Colorizer 和 Indent Rainbow，这两个插件可以让不同缩减的括号显示不同的颜色。
Snippets
Snippets 是一些常用的代码片段，比如说 import React from 'react'; 这些常用的代码，我们只需要打 imr 然后按下 tab 键就能自动帮我们补全。同样的 clg 会变成 console.log。
一些不错的 extension 有
JavaScript (ES6) code snippets
React-Native/React/Redux snippets for es6/es7
React Standard Style code snippets - Visual Studio Marketplace
React Standard Style code snippets - Visual Studio Marketplace
TODO 高亮
通常我们编写代码的时候，会觉得当前实现不优雅，有更好的实现方式。我们会习惯性的加上// TODO: Needs Refactoring 或者其他内容。不过时间久了我们就习得一个技能自动忽略 TODO。 Todo Highlighter 这个插件可以督促你赶紧把这个问题处理了。他会在还有 TODOs / FIXMEs 的地方出现高亮提示。(插件都已经帮到这份上了，之后修行就靠个人了)
类似的 Extension：
Todo+
Todo Parser
成本提示
Import Cost 这个扩展简直惊艳到我了，之前写代码的时候很少有关注导入包的大小。只有在后期优化的时候才考虑这些问题。但是这个插件可以在你导入包的时候就提示这个包有多大。
REST 客户端
作为一个 Web 开发，我们经常需要使用 REST API。为了检测 URL 并检测响应，我们一般会使用 Postman 这类工具来测试。但是如果使用了 REST Client 这个插件我们就可以直接在 VSCode 中来测试我们的 API 了。
自动补全标签和联动重名标签
在 VSCode 中输入一半的标签会自动帮忙补全另一半，但是如果我后期想修改的话需要就需要两边都要改了。 Auto Close Tag 和 Auto Rename Tag 插件可以很好的解决这个问题。
类似的插件：
Auto Complete Tag
Close HTML/XML tag - Visual Studio Marketplace
GitLens
GitLens 可以增强 VSCode 内置 Git 的功能。例如 commits 搜索，历史记录和显示的代码作者身份具体功能可以查看 Feature List。
类似的 Extension：
Git History - 显示提交历史记录的美丽图表等等。推荐。
Git Blame - 它允许您在当前选定行的状态栏中看到 GitBlame 信息。GitLens 也提供了类似的功能。
Git Indicators - 它允许您查看受影响的文件以及状态栏中添加或删除的行数。
Open in GitHub / Bitbucket / Gitlab / VisualStudio.com ! - 它允许您使用浏览器中打开具体的 repo。
Git Project Manager
Git Project Manager 允许你直接从 VSCode 窗口打开一个新的窗口。这样我们就可以在 VSCode 中切换仓库了。
在安装这个 插件 后，需要设置 gitProjectManager.baseProjectsFolders 包含我们需要的仓库。
例如 ：
类似的 Extension：
Project Manager
Indenticator
indenticator 可以直观的突出当前的缩进深度。可以容易区分不同层次的缩进。
https://pic4.zhimg.com/v2-8f3...
类似的 Extension：
Guides
Guides - Visual Studio Marketplace
VSCode 图标
可以美化编辑器。
类似的 Extension：
VSCode Great Icons
Studio Icons
Studio Icons - Visual Studio Marketplace
Dracula(主题)
我喜欢的一个主题。
更多相关内容 -
VScode 下载速度慢 解决方法
2022-03-20 10:52:21VScode 下载速度慢 解决方法展开全文我今天下载 VScode 发现这速度太慢了，然后就在CSDN里面找解决方法，只能说博友真的是太厉害了。
问题已经解决了，然后准备记录一下，以防下次问题出现的时候再等半天，也希望能够帮助跟我有相同问题的朋友
首先 复制 VScode 下载链接；然后在 新的窗口 粘贴链接。
将 链接中 az764295.vo.msecnd.net 替换为 vscode.cdn.azure.cn 就可以解决了，
其实就是把链接其换成 国内的镜像源
-
超级好用的VSCode插件，提升工作效率必看
2020-12-22 15:25:51VSCode以其轻量且强大的代码编辑功能和丰富的插件生态系统，独受前端工师的青睐。很多人用了很久的VSCode，却不知道它还有很多功能强大的插件，开发效率一直很低。那么VSCode到底有哪些好用且实用的插件呢？今天它...展开全文VSCode以其轻量且强大的代码编辑功能和丰富的插件生态系统，独受前端工师的青睐。很多人用了很久的VSCode，却不知道它还有很多功能强大的插件，开发效率一直很低。那么VSCode到底有哪些好用且实用的插件呢？今天它来了。
官方下载Visual Studio Code - Code Editing. Redefinedcode.visualstudio.com
插件安装
在输入框中输入想要安装的插件名称，点击安装即可。安装后没有效果，可以重启vscode。
必备插件
1、View In Browser
在浏览器里预览网页必备。
2、vscode-icons
改变编辑器里面的文件图标
3、Bracket Pair Colorizer
给嵌套的各种括号加上不同的颜色。
4、Auto Rename Tag
自动修改匹配的 HTML 标签。
5、Path Intellisense
智能路径提示，可以在你输入文件路径时智能提示。
6、Markdown Preview
实时预览 markdown。
7、stylelint
CSS / SCSS / Less 语法检查
8、Import Cost
引入包大小计算,对于项目打包后体积掌握很有帮助
9、Prettier
比Beautify更好用的代码格式化插件
Vue插件
vetur
语法高亮、智能感知、Emmet等
其它插件
1、CSScomb
CSS 书写顺序规则，这里我推荐腾讯 AollyTeam 团队的规范：http://alloyteam.github.io/CodeGuide/#css-declaration-orderalloyteam.github.io
简单说下这个插件怎么用：
在项目的根目录下创建一个名为csscomb.json的文件，然后添加一些配置项。也可以将配置项写入项目的 package.json 文件中的 csscombConfig 字段。
至于添加的配置项，CSScomb 提供了示例配置文件：https://github.com/csscomb/csscomb.js/blob/master/config/csscomb.jsongithub.com
其中的 sort-order 就是 CSS 属性书写顺序，可以按照自己遵循的规范设置，所以我直接替换成了腾讯的。
这个配置文件里面各个字段的作用可以戳这里查看：https://github.com/csscomb/csscomb.js/blob/master/doc/options.mdgithub.com
2、Turbo Console Log
快捷添加 console.log，一键 注释 / 启用 / 删除 所有 console.log。这也是我最常用的一个插件
简单说下这个插件要用到的快捷键:
ctrl + alt + l 选中变量之后，使用这个快捷键生成 console.log
alt + shift + c 注释所有 console.log
alt + shift + u 启用所有 console.log
alt + shift + d 删除所有 console.log
3、GitLens
详细的 Git 提交日志。
Git 重度使用者必备，尤其是多人协作时：哪一行代码，何时、何人提交都有记录。
妈妈再也不用担心我背锅了！
4、css-auto-prefix
自动添加 CSS 私有前缀。
5、change-case
转换命名风格。
6、CSS Peek
定位 CSS 类名。
7、vscode-json
处理 JSON 文件。
8、Regex Previewer
实时预览正则表达式的效果。
设置同步
花了一天终于把vscode配置成自己满意的样子，如果每换一次电脑就要重新来一次，大家一定会手撕了我。放心，早就帮大家准备好了。Settings Sync，在不同电脑间同步你的插件。
首先要想在不同的设备间同步你的插件, 需要用到 Token 和Gist id
Token 就是你把插件上传到 github 上时, 让你保存的那段字符，Gist id 在你上传插件的那台电脑上保存着。
先给大家来三个快捷键，后面会用到
1、CTRL+SHIFT+P 我也不知道叫什么，暂且就叫它功能搜索功能吧
2、ALT+SHIFT+D 下载配置
3、ALT+SHIFT+U 上传配置
现在手把手教大家配置：
1、安装Settings Sync
2、登陆Github>settings>Developer settings>personal access tokens>generate new token，输入名称，勾选Gist，提交
3、保存Github Access Token
4、打开vscode，Ctrl+Shift+P打开命令框-->输入sync-->选择高级设置-->编辑本地扩展设置-->编辑token
5、Ctrl+Shift+P打开命令框-->输入sync-->找到update/upload settings，上传成功后会返回Gist ID，保存此Gist ID.
6、在 VSCode 里，依次打开: 文件 -> 首选项 -> 设置，然后输入 Sync 进行搜索:能找到你gist id
7、若需在其他机器上DownLoad插件的话，同样，Ctrl+Shift+P打开命令框，输入sync，找到Download settings，会跳转到Github的Token编辑界面，点Edit，regenerate token，保存新生成的token，在vscode命令框中输入此Token，回车，再输入之前的Gist ID，即可同步插件和设置
-
关于VScode安装ESP-dif插件下载太慢的问题
2021-06-10 16:18:38关于VScode安装ESP-dif插件下载太慢的问题总结打开ESP-idf的配置界面不推荐使用github下载的方式的原因修改hosts文件①找到hosts文件②查询下载服务器的IP地址③修改hosts文件最后的操作感谢 打开ESP-idf的配置界面 ...展开全文关于VScode安装ESP-dif插件下载太慢的问题总结
打开ESP-idf的配置界面
在vscode中，按快捷键Ctrl+shift+P可以输入命令 ESP-IDF:configure ESP-IDF extension，即可打开以下界面
这两个选哪个都行，就我个人而言没有什么区别，随便点一个进去就可以看到以下界面：
把下载的服务器改成 Espressif ，版本的话我就直接选择最新版了，然后下载的路径可以自己选择。
不推荐使用github下载的方式的原因
github下载慢是众所周知的，即使修改系统的hosts文件也是很慢的。
在这里官方提供了自己的下载通道，不过选择这个通道下载还是会有下载慢的问题，不过我们也可以修改系统的hosts文件。修改hosts文件
修改的操作可以参考这个教程：https://www.jianshu.com/p/0493dcc15d6f
我在这里呢就大概说一下了①找到hosts文件
首先我们需要知道hosts文件的路径
在WindowsHosts文件的路径是：
C:\Windows\System32\drivers\etc
由于文件没有后缀名，可以利用鼠标右键点击，选择用记事本打开②查询下载服务器的IP地址
查询IP地址的网站是： https://www.ipaddress.com
进入网站后输入下载地址：dl.espressif.com③修改hosts文件
在文件中添加自己查询到的IP地址，比如我查到的的（有一些网站不定时会更新自己IP地址，所以我查询到的不一定和大家查询到的是一样的，要以自己查询到的为准）：
99.84.248.14 dl.espressif.com
99.84.248.31 dl.espressif.com
99.84.248.60 dl.espressif.com
99.84.248.107 dl.espressif.com最后的操作
设置好之后vscode会自己卸载相关的文件和工具，不需要做其他的事情，只需要点击 install 就好了。
感谢
感谢这些不知名的网友进行的分享，让我们站在巨人的肩膀上前行。
-
VSCode插件开发小记
2021-05-22 07:25:38VSCode介绍VSCode是微软开源的一款基于Electron开发的代码编辑器。Electron 是一个基于 Chromium 的项目，可用于开发基于 Node.js 的本地应用程序。VSCode 使用 Blink 排版引擎渲染用户界面。虽然基于 Electron 框架... -
Vscode 插件包下载并离线安装
2022-04-19 22:58:48打开VSCode插件官网 官网链接是https://marketplace.visualstudio.com/vscode 搜索Go 在输入框中输入go，搜索，结果如下： 点击Download Extension下载 注意：有时候找不到Download Extension，可能是网速加载慢... -
vscode下载慢解决办法
2021-10-21 23:35:09vscode下载慢解决办法 最近vscode国内下载特别慢，解决办法是吧路径换成国内镜像地址。 如下图，把下载路径的az764295.vo.msecnd.net改成vscode.cdn.azure.cn即可， 修改后的路径为... -
vsCode 插件推荐
2021-04-30 05:06:27VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性，支持插件扩展，并针对网页开发和云端... -
vscode下载很慢问题处理
2021-12-03 22:13:14vscode下载很慢问题处理 -
vscode git插件提交代码变慢
2022-02-28 21:59:45最近两天用vscode的git插件提交代码巨慢，具体现象是修改代码后，git可以正常展示改动的地方，也可以将代码提到暂存区，但提交到本地仓库时就很慢很慢，十分钟都结束不了，也没有任何报错。控制台一直输出类似的代码... -
下载vscode安装包速度慢问题解决
2022-02-10 17:13:57下载vscode安装包速度慢问题解决 说明，此方法只在谷歌浏览器使用，未验证其它浏览器 先去VScode找到要下载的安装包，点击下载，会有如下图 然后右击链接，选择复制连接如下 ...将链接中的“az764295.vo.msecnd.net”... -
【vscode】vscode插件学习（四）
2020-12-17 14:56:32今天继续学习制作vscode插件，本篇基本把vscode插件开发套路给摸清了。 官网与参考资料 VSCode WebView说明 https://code.visualstudio.com/api/extension-guides/webview VSCode 自身内置命令大全 ... -
工具篇-vscode效率提升插件
2020-12-22 15:25:50工欲善其事必先利其器，开发前先把所以提升效率的利器搭好会让今后慢慢的编程长路舒服很多，我本来一直用pycharm，后来发现vscode貌似确实会好很多。。。就慢慢转过来了，下面介绍一些我在机器学习编程时经常会用到... -
关于vscode安装包下载太慢解决方法（详解）
2022-04-24 20:40:37vscode下载速度太慢的解决方法 -
关于vscode安装包下载太慢（解决方法）
2022-02-17 10:23:34解决vscode下载速度过慢的问题 -
VSCode插件开发 源码编译
2020-04-26 20:54:45VSCode 源码编译 主要参考官方的配置要求https://github.com/Microsoft/vscode/wiki/How-to-Contribute 下载链接 Python Git Yarn NodeJs VS Studio 注意点 由于编译打包的出的vscode是32位的，安装python和... -
新电脑同步vscode插件配置
2022-03-04 12:41:28所以用gitee把旧电脑vscode里的插件休息下载下来。 1.安装简单 ：在VsCode中直接搜索安装code settings sync即可完成安装； 2.在Gitee中创建Gist（代码片段管理服务）。拿到gist是Gitee代码段的ID 3.在Gitee中创建... -
解决vscode下载很慢的问题
2021-07-30 10:34:43打开vscode官网，https://code.visualstudio.com; 点击下载稳定版;这里我的电脑是win10版本 ** 下载时可以去谷歌的下载内容里面，看到正在下载的vscode，然后点击上面的链接，会发生跳转 ** 然后在谷歌浏览器... -
从webstrom转到vscode(vscode插件推荐)
2021-07-21 19:20:4221年初之前一直用的是webstrom来写前端代码的,但是到后来写的一些服务器时发现它占用的内存越来越大了(可能是太菜了,不会调试).32G的笔记本,webstrom一开启就占用了6G(最大占用空间给调了),开启有点慢,占用有点太大... -
VScode 下载慢如何解决？
2021-11-29 15:32:04https://blog.csdn.net/weixin_44591015/article/details/114085816 -
安装vscode，下载很慢的解决
2021-11-11 15:03:25第一步：vscode官网：https://code.visualstudio.comvscode.cdn.azure.cn 第二步：点击下载 第三步： 把下载链接 https://.....net/ 替换成https://vscode.cdn.azure.cn/..... -
vscode_启动加速策略(插件冗余问题)
2021-09-29 18:00:06文章目录perfacedisable all installed Extensionsenable extensions you always use(in every project path) for every project(by...vscode有丰富的插件资源,但是如果安装过多的插件,会导致启动加载变慢,反而影响使用 -
vscode安装插件提示版本不匹配或版本过低
2021-10-12 16:00:17vscode 安装插件失败，提示版本过低1.手动下载相关插件，如cmake、ros等 1.手动下载相关插件，如cmake、ros等 双击下载包，进入extension文件夹，找到package.json文件，将 "vscode": "^1.37.0"中的数字改为你的... -
Vscode解决下载慢问题（换源）
2022-03-14 21:15:091.打开官网 https://code.visualstudio.com/Download/ 2.选择合适版本 3.复制下载链接地址 地址为：...https://vscode.cdn.azure.cn/stable/c722ca6c7eed3d7987c0. -
前端web开发高效vscode插件分享（辩证的海量实战检验）
2021-08-28 15:08:49从最初眼花缭乱的各种 vscode 插件个个都想用，觉得很腻害，到现在经过无数业务的考验和编码的历练，大幅淘汰了一些华而不实的插件，得到了最终能提高编码效率的沉淀。 在开始之前，我们需要明确的是天下没有免费的... -
vscode插件code runner 遇到的问题
2021-10-09 10:29:001 不能输入 解决办法 设置，搜索，runInTerminal打勾 ...https://github.com/formulahendry/vscode-code-runner/issues/72 https://stackoverflow.com/questions/19797616/why-is-code-runner-using-the-old-2-71-ve -
[转]vscode 插件推荐 - 献给所有前端工程师（2019.8.7更新）
2021-03-07 06:53:09最近有坑的组件，千万不要更新 代码中有图片地址时，会实时阅览图片的功能，最近更新0.21.0版本会拖慢整个vscode，甚至代码提示都卡住弹不出来了。 所以赶紧卸载或者禁用整个插件吧。等后续作者更新再看看. github... -
VS下载插件慢的解决方法。
2019-10-03 12:22:37今天在下载VS的扩展插件的时候，下载速度可怜至极(172kb)。。。 方法 1 打开连接。点击ping检测。http://ping.chinaz.com/download.visualstudio.microsoft.com 2选择响应时间最快的IP(选国内的) 3打开CMD 输入... -
能让你开发效率翻倍的 VSCode 插件配置（上）
2020-12-21 11:50:57工欲善其事必先利其器，软件工程师每天打交道最多的可能就是编辑器了。入行几年来，先后折腾过的编辑器有 EditPlus、UltraEdit、...实际上我在 VSCode 里面安装了 Vim 插件，用 Vim 的按键模式编码，因为自从发现... -
vscode安装go所有插件（全网最全）
2020-11-09 20:02:171.vscode安装go所有插件 vscode版本：1.51.0 go版本：version go1.15.2 windows/amd64 git客户端版本：Git-2.29.2.2-64-bit 2.使用vscode自动安装 需要提前安装go、vscode、git客户端，配置git环境，配置go环境，...
