好用的VS code插件记录

最新推荐文章于 2024-08-26 19:25:52 发布

相守之路

最新推荐文章于 2024-08-26 19:25:52 发布

阅读量1.1k

点赞数

分类专栏：编程工具文章标签：开发工具 vue github visual studio code git

本文链接：https://blog.csdn.net/m0_47404181/article/details/107092774

版权

编程工具专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一、配置同步

code settings sync

适用于Gitee，即码云。

推荐这个的原因是gist.com一直无法访问成功，即使配置了hosts也不行，后来就改用这个了。

功能很简单：

上传(更新)配置 upload setting
下载配置 download setting

第一次使用可能会延迟，不会在终端输出上传日志，但是自己可以去码云看下是否成功上传，打开码云，然后：

个人主页 -> 左侧代码片段

配置教程

Settings Sync

适用于GitHub，与前者配置方式大同小异

但是功能更多，自动上传/同步/下载，强制上传/下载…等等

配置教程

二、翻译

var-translate

使用翻译api将其他语言到英文,转换成常见的变量命名形式
Keybindings：

win: "Alt+shift+t" 
mac": "cmd+shift+t"

Selected text translation 选词翻译。

会讲中文翻译为常见变量，方法等声明名称

TranslationEngine default Google

翻译，默认Google引擎

Comment Translate

注释翻译，悬停鼠标即可翻译；查看源码福音

翻译(英汉词典)

普通翻译，英文翻译为中文

安装后重启 VScode 即可。

使用方法
选中英文单词 → VScode 右下角会显示翻译结果，瞥一眼就看到了

三、MarkDown

点击查看具体描述

Path Intellisense

文件路径自动补齐，在写MarkDown时经常用到，当然开发的时候也能用到

四、Git相关

GitLens — Git supercharged

GitLens增强了Visual Studio Code中内置的Git功能。它可以帮助您通过Git责备注释和代码镜头一目了然地看到代码作者的身份，无缝地导航和浏览Git存储库，通过强大的比较命令获得有价值的见解，等等。

五、Golang相关

Go

没错，这个单词就是一个插件，安装后就可以在VS code里愉快的写Go代码了

Go Snippets

写leetcode算法神器，输入关键词就能快速定义结构体，数组，字典，循环，切片操作(追加删除元素)等等

具体使用，安装后自行探索下，个人感觉很方便，平时开发也能用的到

Paste JSON as Code

根据JSON快速生成class，struct ，必须装的一个插件，使用太舒服了

支持 TypeScript, Python, Go, Ruby, C#, Java, Swift, Rust, Kotlin, C++, Flow, Objective-C, JavaScript, Elm, and JSON Schema.

使用

打开你想要保存bean/struct/class 的文件，如新建一个test.go文件，
将你需要转换的json贴入到test.go中
ctrl+shift+p，键入"Paste JSON as Code"，回车
输入你想要的struct名，然后回车
如果你已经设置了文件扩展名，他会自动识别你想要转换的代码。否则需要选择语言

vscode-go-syntax

高亮显示Go语法，对于方法，变量，结构体，接口等等都会不用颜色区别。

看源码很有用，用习惯了就知道什么颜色代表什么类型，不需要返回去专门去看定义

六、toml文件插件

Better TOML

更好的编写toml文件。

七、前端相关

javascript console utils

快速生成/移除 onsole.log()

使用：

选中要打印的代码
按快捷键 Cmd+Shift+L即生成lconsole代码段
生成的代码为高亮选中状态，可以剪切或者复制
移除：Cmd+Shift+D，它会移除所有console，右下角会提示移除的数量

HTML Snippets

html

语法智能提示
输入关键词，自动生成代码段

Auto Close Tag

标签自动补齐，按</便只能提示，然后按回车会TAB键即可

Auto Rename Tag

修改标签同步修改结尾标签

vue

VUE插件

Vetur

vue 工具，开发vue必安装

特性

语法高亮
代码补全
Emmet
整理/错误检查
格式化
自动完成
调试
VTI / CLI

ESLint

js语法规范，它会自动检查代码是否符合规范，可以配置相关参数。

Axios Snippets

Axios 插件

语法智能提示
输入关键词，自动生成代码段

open in browser

vscode浏览器打开html
快捷键 alt+b，即可打开默认浏览器

如果系统没有设置默认浏览器，则会报错
Open browser failed!! Please check if you have installed the browser correctly!

修改方法：
扩展商店搜索 open in brower 插件，点击右下角的齿轮-》扩展设置-》设置默认浏览器如输入chrome

Live Server

为静态和动态页面启动具有实时重新加载功能的开发本地服务器

一般地，当前项目下有HTML文件，直接右键选择：
Open with Live Server

关闭服务则在对应的HTML文件右键选择：Stop Live Server

会在本地开一个端口，http://127.0.0.1:5500/

启动/停止服务器的快捷方式:
[注意：如果工作空间中没有任何.html或.htm文件，则必须按照方法4和5来启动服务器。]

打开一个项目，然后单击“上线”从状态栏打开/关闭服务器。
进行实时控制预览右键单击资源管理器窗口中的HTML文件，然后单击“使用实时服务器打开”。资源管理器窗口控件。
打开一个HTML文件，右键单击编辑器，然后单击“使用Live Server打开”。
编辑菜单选项预览单击（alt + L，alt + O）打开服务器，单击（alt + L，alt + C）停止服务器（您可以更改快捷方式键盘绑定）。 * [在MAC上，cmd + L，cmd + O和cmd + L，cmd + C] *
通过按F1或ctrl + shift + P打开命令面板，然后键入Live Server：使用Live Server打开以启动服务器或键入实时服务器：停止实时服务器以停止服务器。