IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 开发工具 -> h5学习笔记:为微信小程序ide添加css扩展 -> 正文阅读

[开发工具]h5学习笔记:为微信小程序ide添加css扩展

VSCODE 可以添加用户片段来增强代码提示,或者编写一个插件来增强编辑器中的代码提示。但是小程序是不是也可以?带着这个疑问开启今天的记录之旅。
在这里插入图片描述

1. 微信小程序的代码编辑器扩展

小程序的IDE的编辑器同样是基于vscode基础上研发的。通过IDE提供自定义扩展,开发者可以将vscode插件直接手动搬迁到内置文件夹,从而达到增强IDE的使用的目的。
在这里插入图片描述

那样应该如何做?下面有一个小技巧来完成这个事情。

2. vscode插件位置

首先我们打开vscode扩展,手动输入 css-snippets的插件,并进行安装。
在这里插入图片描述
安装了后,并不能在小程序里面提示,还需要将这个插件放置小程序指定扩展插件目录。

vscode 扩展位置在c盘目录下。

window目录: C:\Users\用户名\.vscode\extensions

到了该位置,然后把安装的插件复制一份出来。
在这里插入图片描述

将复制的文件放置在IDE指定的目录下,然后开启插件使用,重启IDE即可提示。
在这里插入图片描述
在这里插入图片描述

3 根据习惯改动

css扩展提示插件已经开启使用了。但是由于习惯和记忆的问题,并不习惯css过于缩写。那样下一步应该如何添加我们心仪的代码提示。进入插件里面,我们对css.json配置进行添加修改。该文件提供了提示的配置信息。
在这里插入图片描述

例如根据我喜欢的如flex布局的时候,横向,横向居中添加。根据个人习惯进行添加。如flex横向,和居中展示。

 "flex-row":{
    "prefix": "flex-row",
    "body": [
      "display: flex;",
      "flex-direction: row;"
    ],
    "description": "flex-row"
  },
  "flex-row-center":{
    "prefix": "flex-row-center",
    "body": [
      "display: flex;",
      "flex-direction: row;",
      "justify-content: center;",
      "align-items: center;"
    ],
    "description": "flex-row-center"
  },

添加完成后,重启ide。尝试一下插件是否生效。输入flex-row 这个时候就有了我们的代码提示片段了。同样js也一样可以利用这样方法来增加。
在这里插入图片描述

有了这个功能,css和js可以根据自己喜好来实现编码。能够编写vscode插件就可以实现很多增强的玩法了。
在这里插入图片描述

  开发工具 最新文章
Postman接口测试之Mock快速入门
ASCII码空格替换查表_最全ASCII码对照表0-2
如何使用 ssh 建立 socks 代理
Typora配合PicGo阿里云图床配置
SoapUI、Jmeter、Postman三种接口测试工具的
github用相对路径显示图片_GitHub 中 readm
Windows编译g2o及其g2o viewer
解决jupyter notebook无法连接/ jupyter连接
Git恢复到之前版本
VScode常用快捷键
上一篇文章      下一篇文章      查看所有文章
加:2021-07-25 11:52:50  更:2021-07-25 11:52:52 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年9日历 -2024/9/17 2:50:01-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码