npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

durka-vscode

v1.0.1

Published

Addressing various pain points encountered during the coding process

Downloads

5

Readme

功能

智能代码片段自动完成

轻松提升编码效率,享受智能代码片段自动完成的便利。

支持两种自动补全:

  1. vscode 默认支持的,输入关键词,出现补全提示;目前主要配置了一些简单的 json 和 react 相关的提示词
  • json 中的提示词主要是控制生成 snippet 的
  • react 中的提示词主要是控制生成 className 和 style 的

  1. 输出特定的 trigger(支持通过 durka.smartSnippetTriggers 配置)才会触发内置的补全提示,这些提示有如下特点:
  • 支持文件名称匹配,如在通过 ts 文件内输入 trigger 会出现一些通用的脚本补全,而在 "*.test.ts" 文件内输入 trigger,才会出现 jest 相关的补全

  • 支持通过 durka.smartSnippetResources 配置自定义补全,支持 jsonjs 两种格式,通过 js 格式配置文件可以快速生成大量补全提示词
  • 在 vscode 上更新 durka.smartSnippetResources 配置时,能自动创建对应的模板配置文件

剪贴板内容智能替换

在剪贴板上体验内容的平滑转换,实现粘贴时的智能替换。

  1. csslessscss 文件中粘贴苹方相关字体时,会自动替换成字重,如将 font-family: PingFangSC-Medium; 替换成 font-weight: 500;;但使用默认的粘贴快捷键时,不会替换,需要使用 cmd+k cmd+v 快捷键(或执行 Durka: Paste and Replace 命令)才行;如果希望直接覆盖默认快捷键,可以更新 vscode 配置 durka.pasteReplaceOverwrite = true 来达到按默认粘贴快捷键即可自动替换的目的。

背景:移动端设计师喜欢使用苹方字体,此字体是 iOS 默认字体,在 Android 上是没有的,Android 上也应该使用 Android 系统字体,所以前端要还原时,不要设置 font-family,默认即会使用系统字体即可,只需要调整 font-weight 即可。

  1. 除了自带的字体替换功能,可以通过配置 durka.pasteReplaceResources 来配置自己的替换规则(在更新配置时,如果对应的资源文件不存在,会自动创建)

文件和文件夹级别模板

使用文件和文件夹级别的模板,快速创建模板文件,简化项目设置。

  • 通过配置 durka.templates 能指定模板文件,及对应的匹配规则,如果新建文件时命中匹配规则,会使用指定的模板文件来创建新文件
  • 除了支持支持配置文件模板外,也支持配置文件夹模板,配置方式和匹配规则都和普通文件模板一样
  • 如果内置的模板变量满足不了你的需求,可以通过配置 durka.templateScript 来生成自定义的模板变量;此配置除了生成模板变量外,还支持配置模板文件创建完后的回调函数,可以方便你在文件生成后执行你想要的操作

模板支持的内置变量有:

| 名称 | 类型 | 描述 | | :-- | :---: | ----------- | | date | string | 当前日期,格式:yyyy-mm-dd | time | string | 当前时间,格式: hh-mm | datetime | string | 当前日期和时间,格式:yyyy-mm-dd hh-mm | user | string | 当前用户名,通过读取环境变量中的 USER 字段而获取到的 | rootPath | string | 项目根目录的绝对路径,即 vscode 打开的 Workspace 根目录(路径分隔符和系统相关) | rootPathUnix | string | 项目根目录的绝对路径,即 vscode 打开的 Workspace 根目录(路径分隔符固定为 "/") | relativeFilePath | string | 当前文件相对于根目录(rootPath)的路径(路径分隔符和系统相关) | relativeFilePathUnix | string | 当前文件相对于根目录(rootPath)的路径(路径分隔符固定为 "/") | pkg | any | 从当前文件所在目录向上查找到的第一个 package.json 文件所对应的 JSON 对象 | dirPath | string | 当前文件所在的目录的绝对路径(路径分隔符和系统相关) | dirPathUnix | string | 当前文件所在的目录的绝对路径(路径分隔符固定为 "/") | dirName | string | 当前文件所在的目录的名称,不带路径 | filePath | string | 当前文件的绝对路径(路径分隔符和系统相关) | filePathUnix | string | 当前文件的绝对路径(路径分隔符固定为 "/") | fileName | string | 当前文件的名称,不带路径和文件后缀 | fileExtension | string | 当前文件的后缀名(前面没有".") | templatePath | string | 当前文件所对应的模板文件的绝对路径(路径分隔符和系统相关) | templatePathUnix | string | 当前文件所对应的模板文件的绝对路径(路径分隔符固定为 "/") | rawModuleName | string | fileName 的别名,即当前文件的名称,不带路径和文件后缀 | moduleName | string | 驼峰形式的 fileName | ModuleName | string | pascal形式的 fileName | module_name | string | 所有字母都小写,中间以下划线连接形式的 fileName | MODULE_NAME | string | 所有字母都大写,中间以下划线连接形式的 fileName | moduleCamelName | string | 驼峰形式的 fileName,和 moduleName 变量一样 | modulePascalName | string | pascal形式的 fileName,和 ModuleName 变量一样 | moduleCapitalizeName | string | 首字母大写形式的 fileName | moduleDashName | string | 所有字母都小写,中间以中划线连接形式的 fileName | moduleSnakeName | string | 所有字母都小写,中间以下划线连接形式的 fileName,和 module_name 变量一样 | moduleUpperName | string | 所有字母都大写,中间以下划线连接形式的 fileName,和 MODULE_NAME 变量一样 | moduleTitleName | string | 所有单词首字母大写,中间以空格连接形式的 fileName | dir | any | 或者创建文件夹模板内的文件时,文件夹所关联的所有变量