VSCode 最全实用插件小结

目录
  • 一、必备插件
    • Chinese（中文）
    • Settings Sync（配置同步到云端）
    • wakatime（编程时间及行为跟踪统计）
  • 二、效率神器
    • HTML Snippets（代码提示）
    • Auto Close Tag（自动闭合标签）
    • Bracket Pair Colorizer（括号做颜色区分）
    • Browser Preview（VSCode里面打开浏览器）
    • REST Client（接口调试）
    • CSS Peek（css样式查看器）
    • Partial Diff（文件比较）
    • Npm Intellisense（自动完成导入语句中的npm模块）
    • open in browser（快速打开html文件到浏览器预览）
    • Path Intellisense（快速引入文件）
    • Image preview（预览图片）
  • 三、Git集成
    • GitHub Pull requests（ 查看和管理GitHub拉取请求和问题）
    • Git Graph（Git 图形化显示和操作）
    • GitLens（快速查看更改行或代码块的对象）
    • GitHistory（可查看和搜索git日志以及图形和详细信息）
  • 四、美化
    • （黑白两款皮肤）
    • vscode-icons（漂亮的目录树图标主题）
    • Beautify（右键鼠标一键格式化）
    • Vetur（官方钦定Vue插件）
    • Better Align（代码优雅排版）
    • Better Comments（丰富注释颜色）
  • 五、代码规范
    • change-case（变量命名规范）
    • JavaScript Booster（代码改进）
    • JavaScript (ES6) code snippets（智能提示与快速输入）
    • ESlint（严谨的规范书写）
    • TSLint（书写规范）
    • Code Spell Checker（拼写检查程序）
    • koroFileHeader（生成文件头部注释和函数注释）
  • 六、装X神器
    • Markdown All in One（书写Markdown）
    • vscode-drawio（画流程图）
    • Polacode-2020（转化成一张逼格满满的图片）
    • Live Share（与他人实时进行协作式编辑和调试）

一、必备插件

Chinese（中文）

安装后，按快捷键Ctrl+Shift+P，输入

configure language

Settings Sync（配置同步到云端）

可以让我们的vscode配置同步到云端，当我们跟换电脑或者再次安装vscode的时候，只需要登录账号即可同步配置了

wakatime（编程时间及行为跟踪统计）

编程时间及行为跟踪统计

二、效率神器

HTML Snippets（代码提示）

HTML代码片段，该插件可为你提供html标签的代码提示，不用键入尖括号了

Auto Close Tag（自动闭合标签）

自动闭合HTML/XML标签

Bracket Pair Colorizer（括号做颜色区分）

括号做颜色区分

"workbench.colorCustomizations": {"editorIndentGuide.activeBackground": "#00ffea"}

Browser Preview（VSCode里面打开浏览器）

可以在vscode里面打开浏览器，一边编码一边查看

REST Client（接口调试）

可以在vscode里面进行接口调试，提供丰富的api配置方式，让我们不用离开编辑器也可以随时调用接口调试

新建一个.http文件，写下基本的测试代码，点击 Send Request即可在右边窗口查看接口返回结果，非常nice

CSS Peek（css样式查看器）

Partial Diff（文件比较）

文件比较

Npm Intellisense（自动完成导入语句中的npm模块）

可自动完成导入语句中的npm模块

open in browser（快速打开html文件到浏览器预览）

快速打开html文件到浏览器预览

Path Intellisense（快速引入文件）

自动提示文件路径，支持各种快速引入文件

Image preview（预览图片）

鼠标悬浮在链接上可及时预览图片

三、Git集成

GitHub Pull requests（ 查看和管理GitHub拉取请求和问题）

在Visual Studio Code中查看和管理GitHub拉取请求和问题

Git Graph（Git 图形化显示和操作）

GitLens（快速查看更改行或代码块的对象）

GitLens可以帮助您更好地理解代码。快速查看更改行或代码块的对象

GitHistory（可查看和搜索git日志以及图形和详细信息）

GitHistory可查看和搜索git日志以及图形和详细信息，同时还支持分支比较，分支管理等操作

四、美化

（黑白两款皮肤）

vscode-icons（漂亮的目录树图标主题）

提供了非常漂亮的目录树图标主题

Beautify（右键鼠标一键格式化）

在代码文件右键鼠标一键格式化 html，js，css

Vetur（官方钦定Vue插件）

VScode官方钦定Vue插件，Vue开发者必备。内含语法高亮，智能提示，emmet，错误提示，格式化，自动补全，debugger等实用功能

代码风格规范类插件

Better Align（代码优雅排版）

代码优雅排版

选中代码配合组合键[Ctrl+Shift+p]，输入Align即可

Better Comments（丰富注释颜色）

丰富注释颜色

自定义样式，需要写入配置代码

配置代码
"better-comments.tags": [ {"tag": "*","color": "#98C379","strikethrough": false,"backgroundColor": "transparent" }]
使用// * 绿色的高亮注释复制代码TODO Tree

五、代码规范

change-case（变量命名规范）

变量命名规范

JavaScript Booster（代码改进）

会提示对应的不合理原因和改进方案

JavaScript (ES6) code snippets（智能提示与快速输入）

ES6语法智能提示，以及快速输入

ESlint（严谨的规范书写）

规范js代码书写规则，如果觉得太过严谨，可自定义规则

TSLint（书写规范）

ts的书写规范，这个插件是一个系列，同时还提供了TSLint (deprecated)，TSLint Vue，TSLint Vue-TSX

Code Spell Checker（拼写检查程序）

是拼写检查程序，检查不常见的单词，如果单词拼写错误，会给出警告提示

koroFileHeader（生成文件头部注释和函数注释）

在vscode中用于生成文件头部注释和函数注释的插件，经过多版迭代后，插件：支持所有主流语言,功能强大，灵活方便，文档齐全，食用简单！

不光如此，还能生成一些特别有意思的注释，比如这一条喷火龙...

六、装X神器

Markdown All in One（书写Markdown）

可以在vscode里面快乐的书写Markdown，功能强大。丰富的快捷键，边写边看，轻松转化为html或pdf文件

vscode-drawio（画流程图）

可以在vscode里面快乐的画流程图，新建 .drawio 后缀文件并拖入vscode中

Polacode-2020（转化成一张逼格满满的图片）

可以将我们的代码转化成一张逼格满满的图片

Live Share（与他人实时进行协作式编辑和调试）

这款神器可以使您能够与他人实时进行协作式编辑和调试

到此这篇关于VSCode 最全实用插件小结的文章就介绍到这了,更多相关VSCode  实用插件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • VsCode插件整理（小结）

    VsCode插件整理（小结）

    1.VsCode官方插件地址: https://marketplace.visualstudio.com/vscode http://code.visualstudio.com/docs 官网下载地址:http://code.visualstudio.com/ 2.使用方法,可以在官网中搜索需要的插件或者在VsCode的""扩展""中搜索需要的插件 添加方法使用Ctrl+P, 输入 ext install xxxx ,搜索要安装的插件,点击安装按钮即可 3.常用插件

  • vscode中配置LeetCode插件的教程(愉快刷题)

    大家好,今早在B站看到up主的vscode里藏了leetcode插件,这才知道原来还有这款神器.但是没想到在用的时候遇到了一些麻烦,花了一点时间才解决.所以写这篇文章除了给大家安利这个好用的插件之外,也是为了帮助更多的同学避免踩坑. 简介vscode vscode在工业界鼎鼎大名,被誉为微软少有的拿得出手的精品(逃).原本是不想过多赘述的,但是鉴于许多粉丝还是正在上学的萌新,所以花点笔墨简单介绍一下. vscode是微软开发的编辑器,严格说起来它并不是一个IDE,只是一个编辑器.但是由于它支持嵌

  • VSCode下好用的Python插件及配置

    MS Python插件. 这是微软官方的Python插件,已经自带很多功能.下面是插件功能描述,其中部分内容我做了翻译. a)        Linting (Prospector, Pylint, pycodestyle, Flake8, pylama, pydocstyle, mypy with config files and plugins)静态代码扫描(可以理解为代码语法和格式错误提示,支持多种linter) b)       Intellisense (autocompletion

  • vscode中eslint插件的配置（prettier配置无效）

    用vue-cli构建vue项目,会有个eslint代码检测的安装 可vscode自带代码格式化是prettier格式(右键有格式化文件或alt+shift+f) 这时候要在vscode上装一个eslint插件 装完后在文件----->首选项------->设置里找到settings.json(快捷键忘了) eslint配置如下,(配置的·具体详情还有待研究,我也是网上copy的,不过亲测可用).保存配置后每次写.vue文件只要control+s保存,就可以把代码格式改成符合eslint标准 &

  • vscode常用插件整理汇总

    1.auto close tag HTML自动补全标签 2.beautiful UI 32个主题集合,具体使用看个人喜好. 3.better comments 通过使用警报.信息.待办事项等注释来改进代码注释! 4.bracket pair colorizer 2 用于对匹配括号上色的可自定义扩展 5.code spell checker 对基本关键字拼写校验 6.color info 提供有关CSS颜色的快速信息 7.ESLint 借助 ESLint,可将 静态代码分析 和 问题代码协助修复

  • 详解vscode中vue代码颜色插件

    vue提示插件[Vscode] 编者寄语:vscode的确是前端开发中很好的工具,安装颜色插件,从视觉上是美的享受.曾经的我遇到了vscode代码全是灰色,黑色的困惑,后来整理找到方法,整理这篇,以下高亮插件,建议大家都安装了. 在VSCode Marketplace 搜素Vue 出现关于语法高亮的插件有 vue,vue-beautify,vue-color,VueHelper,vertur等等.比较了下载数量可以了解到,vetur 是目前比较好的语法高亮插件,我们来安装一下吧. vscode提

  • VSCode必装Go语言以下插件的思路详解

    VSCode 必须安装以下插件: 首先你必须安装 Golang 插件,然后再给 Go 安装工具包. 在 VS Code 中,使用快捷键: command+shift+P ,然后键入: go:install/update tools ,将所有 16 个插件都勾选上,然后点击 OK 即开始安装. Installing 16 tools at /Users/maiyang/develop/goworkspace//bin gocode gopkgs go-outline go-symbols guru

  • 推荐VSCode 上特别好用的 Vue 插件之vetur

    推荐VSCode 上特别好用的 Vue 插件之vetur

    Vue自从发布以来就一直受到前端开发人员的热爱,而除了一些本身优秀的特征之外,还有就是丰富的插件和工具的支持和更新.虽然现在的编辑器需要安装相应的plugins才能进行Vue组件化开发,但是越来越多优秀的plugins都提供了强大的支持.比如VSCode下面的Vetur就是这样一款必备的Vue开发工具.下面就开始介绍一下它的一些功能吧 Github仓库:Vetur 官方文档:Vetur文档 语法高亮 Vetur支持.vue文件的语法高亮显示,除了支持template模板以外,还支持大多数主流的前

  • VSCode 最全实用插件小结

    VSCode 最全实用插件小结

    目录 一.必备插件 Chinese(中文) Settings Sync(配置同步到云端) wakatime(编程时间及行为跟踪统计) 二.效率神器 HTML Snippets(代码提示) Auto Close Tag(自动闭合标签) Bracket Pair Colorizer(括号做颜色区分) Browser Preview(VSCode里面打开浏览器) REST Client(接口调试) CSS Peek(css样式查看器) Partial Diff(文件比较) Npm Intellisen

  • VSCode Vue开发推荐插件和VSCode快捷键(小结)

    首先这几个是VSCode推荐Vue开发必备的插件 Vetur -- 语法高亮.智能感知.Emmet等 包含格式化功能, Alt+Shift+F (格式化全文),Ctrl+K Ctrl+F(格式化选中代码,两个Ctrl需要同时按着) EsLint -- 语法纠错 Debugger for Chrome -- 映射vscode上的断点到chrome上,方便调试(配置有点麻烦,其实我没用这个) Auto Close Tag -- 自动闭合HTML/XML标签 Auto Rename Tag -- 自动

  • 值得推荐的Idea十几大优秀插件(小结)

    值得推荐的Idea十几大优秀插件(小结)

    最近,闲来无事,为了改变一下枯燥的编程环境,特地搜寻了下有助提升代码功力的插件,够装逼,够狂,拽,屌~   绚丽的画面,多彩的跳动,让你区别其他程序猿.产品,测试,开发看到你的界面,眼睛都会发光~  算了,我实在是编不下去,自己去体验吧~ PS: ☆ 半星  ★ 一星   主要是以狂拽屌指数来排名 12.Stackoverflow 这个插件其实是最实用的插件,程序猿遇到的问题,基本都能找到回答,但是它使用的是google搜索引擎,对于,不购买vpn的同学来说,感觉好鸡肋呀~ 选中需要搜索的问题,

  • VSCode插件开发全攻略之命令、菜单、快捷键

    命令 我们在前面HelloWord章节中已经提到了命令写法,这里再重温一下. context.subscriptions.push(vscode.commands.registerCommand('extension.sayHello', () => { vscode.window.showInformationMessage('您执行了extension.sayHello命令!'); })); 然后在清单文件声明: "commands": [ { "command&q

  • VSCode插件开发全攻略之package.json详解

    package.json 在详细介绍vscode插件开发细节之前,这里我们先详细介绍一下vscode插件的package.json写法,但是建议先只需要随便看一下,了解个大概,等后面讲到具体细节的时候再回过头来看. 如下是package.json文件的常用配置,当然这里还不是全部: { // 插件的名字,应全部小写,不能有空格 "name": "vscode-plugin-demo", // 插件的友好显示名称,用于显示在应用市场,支持中文 "displa

  • VSCode插件开发全攻略之打包、发布、升级的详细教程

    一.发布方式 插件开发完了,如何发布出去分享给他人呢?主要有3种方法: 方法一:直接把文件夹发给别人,让别人找到vscode的插件存放目录并放进去,然后重启vscode,一般不推荐: 方法二:打包成vsix插件,然后发送给别人安装,如果你的插件涉及机密不方便发布到应用市场,可以尝试采用这种方式: 方法三:注册开发者账号,发布到官网应用市场,这个发布和npm一样是不需要审核的. 二.本地打包 无论是本地打包还是发布到应用市场都需要借助vsce这个工具. 安装: npm i vsce -g 打包成v

  • VSCode插件开发全攻略之跳转到定义、自动补全、悬停提示功能

    跳转到定义 跳转到定义其实很简单,通过vscode.languages.registerDefinitionProvider注册一个provider,这个provider如果返回了new vscode.Location()就表示当前光标所在单词支持跳转,并且跳转到对应location. 为了示例更加有意义,我在这里写了一个支持package.json中dependencies.devDependencies跳转到对应依赖包的例子jump-to-definition.js(当然我们这里只是很简单的

  • 2020史上最全IDEA插件总结(推荐收藏)

    IDEA 插件安装 步骤 IDEA里面,选择打开 File --> Settings --> Plugins 在Plugins里面, 可以搜索需要的插件 (下面的标题),然后安装 如下图: AceJump 全栈必备,作为一个全能的程序员 ,用鼠标,太伤自尊了,他就可以帮到你 AceJump其实是一款能够代替鼠标的软件,只要安装了这款插件,可以在代码中跳转到任意位置.按快捷键进入 AceJump 模式后(默认是 Ctrl+J),再按任一个字符,插件就会在屏幕中这个字符的所有出现位置都打上标签,你

  • 关于VSCode 装好ESLint 插件 import 报黄线的问题

    VS Code 装好ESLint 插件报黄线的问题,具体解决方法如下所示: ESLint is disabled since its execution has not been approved or denied yet. Use the light bulb menu to open the approval dialog.eslint 查了翻译,说是什么被禁用了,我的插件明明是开的呀. 去网上查了一圈也没有看到和我一样的问题.我英语不是很好,所以碰了不少壁. 其实这个问题解决起来很简单.

随机推荐