Loading...
墨滴

沐恩

2021/08/05  阅读:49  主题:蔷薇紫

vscode

经常使用vscode进行编程,用了好久,今天换电脑,新装的vscode在下载插件时忘记了之前用的顺手的几个,这里记录一下,顺便分享给大家,希望大家编程效率越来越高,编程习惯越来越好,编程方式越来越拉风!

必备基础插件

Chinese (Simplified) Language Pack for Visual Studio Code 中文插件

GitLens 开发必备git工具

包括但不限于以下功能:

  1. Revision Navigation
  2. Current Line Blame
  3. Git Code Lens
  4. Status Bar Blame
  5. File History view
  6. Changes diff

更多GitLens插件详情 dong2.gif

vscode-iconsvscode的文件图标插件

Polacode-2020 帮助对项目代码进行截图

尤其是当你热衷于发技术博客的话,利用该插件进行代码截图可能会让界面看上去更加的优雅和谐。

Polacode截图 vscode cmd+p =》输入polacode即可以调出截图面板=》自由选择你的截图代码吧 image.png

各种snippets

https://blog.hhking.cn/2018/08/15/extensions-for-vsc/ 道友的优秀推荐

提效插件

Color Highlight 实现在js中的颜色相关的代码显示相应的背景色

Color Picker 颜色拾取器

Highlight Matching Tag 标签高亮

对于写html的小伙伴来说,最痛苦的莫过于控制台报少标签的错误,有了这个插件,再碰到这种问题直接对比颜色就可以啦

Path Intellisense 路径提醒插件

Auto Close Tag 自动关闭标签,可以在你输入首标签的时候自动补全尾标签,省时省力

Auto Rename Tag 在你更改标签名时该插件自动更改对应标签名

Bracket Pair Colorizer语句块染色器

Subtle Match Brackets 语句块小括号、大括号处可以自定义样式,简单看清楚作用域

举一个简单配置的例子,在vscodesettings.json中添加如下代码

"subtleBrackets.style": {
    "borderWidth""2px",
    "borderStyle""none none solid none",
    "borderColor""#e84393",
},

settings.json可以通过cmd+,打开控制台,然后搜索Subtle Match Brackets插件进入配置;查看更多Subtle Match Brackets自定义配置

Simple React Snippets

react的snippet,轻松书写react代码

ESLint

代码检查 规范代码必备

Code Runner

在vscode的控制台中运行代码 支持多种语言

以后再也不用新建html文件然后写script标签啦,当然也可以直接在浏览器控制台中书写js代码,如果你用习惯的话..

REST Client可以代替postman在vscode中直接发起请求,请求头配置和参数设置也可以自定义

更多REST Client使用规则

open in browser 在浏览器中查看 VS Code没有提供直接在浏览器中运行程序的内置功能,所以我们需要安装此插件,在浏览器中查看我们的程序运行效果

Highlight Matching Tag 高亮显示匹配标签

这个插件自动帮我们将选中的匹配标签高亮显示,再也不用费劲查找了。

Image Preview 图片预览 鼠标移动到图片 url 上的时候,会自动显示图片的预览和图片尺寸。

image.png
image.png

Markdown All in One 编辑markdown实时预览+导出为html或者pdf

可以在vscode中实时编辑markdown文本并预览 也可以导出为html或者pdf

常用快捷键:
Ctrl/Cmd + Shift + V 预览markdown
Ctrl/Cmd + K V 打开新tab预览markdown
更多详情移步这里

image.png
image.png

Bookmarks 书签

当文件比较大的时候改代码,可能需要频繁跳转到多个地方进行改动代码,这个时候可以通过给不同的代码行添加标签来进行快速跳转;

涉及到的快捷键:
option+command+k 开/关书签
option+command+j 上一个书签
option+command+l 下一个书签
更多详情移步这里

image.png
image.png

vscode-syncing vscode配置可以在多台设备中通过该插件进行同步

具体使用:https://github.com/nonoroazoro/vscode-syncing

Regex Previewer 正则在线调试

实时测试正则表达式的实用工具。它可以将正则表达式模式应用在任何打开的文件上,并高亮所有的匹配项 dong1.gif

摸鱼插件

小霸王 让你在vscode中玩儿小霸王游戏

更多小霸王详情信息

5E26F4B6-31A4-41B9-BA26-630E737F9ACD.png
5E26F4B6-31A4-41B9-BA26-630E737F9ACD.png

Thief-Book 摸鱼看书神器

更多Thief-Book使用规则

image.png
image.png

leetcode 进大厂必备

进大厂,必须刷题!这个插件直接在VSCode中刷LeetCode! image.png

Zhihu On Vscode 知乎在线摸鱼

大家都说,知乎用户平均学历 985 ,是大牛云集地方,上班摸鱼怎么能不上知乎学习呢? image.png

daily-anime 追番神器

image.png
image.png

韭菜盒子看股票,看基金

dong3.png
dong3.png

电影集 看电影

image.png
image.png

VSC Netease Music 听音乐

dong3.gif
dong3.gif

live2D 各种二次元看板娘

image.png
image.png

小程序开发者必备

小程序开发助手

  • 支持 js,json,wxml 文件的代码提示
  • wxml 文件语法高亮

image.png https://blog.csdn.net/qq_44755683/article/details/115859791

miniapp

  • 标签名与属性自动补全[1]
  • 根据组件已有的属性,自动筛选出对应支持的属性集合[2]
  • 属性值自动补全[3]
  • 点击模板文件中的函数或属性跳转到 js/ts 定义的地方(纯 wxml 或 pug 文件才支持,vue 文件不完全支持)[4]
  • 样式名自动补全(纯 wxml 或 pug 文件才支持,vue 文件不完全支持)[5]
  • 在 vue 模板文件中也能自动补全,同时支持 pug 语言[6]
  • 支持 link(纯 wxml 或 pug 文件才支持,vue 文件不支持)[7]
  • 自定义组件自动补全(纯 wxml 文件才支持,vue 或 pug 文件不支持)[8]
  • 模板文件中 js 变量高亮(纯 wxml 或 pug 文件才支持,vue 文件不支持)[9]
  • 内置 snippets[10]
  • 支持 emmet 写法[11]
  • wxml 格式化[12]
image.png
image.png

vscode weapp api

键入关键词 wx,就会出现提示,然后回车。关键词不区分大小写。

image.png
image.png

vscode wxml

wxml语法智能提示

image.png
image.png

Reference

[1]

#tag-and-attr: **

[2]

#smart-attr: **

[3]

#attr-value: **

[4]

#attr-definition: **

[5]

#attr-class-value: **

[6]

#vue: **

[7]

#link: **

[8]

#custom-component: **

[9]

#highlight: **

[10]

#snippets: **

[11]

#emmet: **

[12]

#wxml-formatter: **

沐恩

2021/08/05  阅读:49  主题:蔷薇紫

作者介绍

沐恩