开发者提升效率的一点点小技巧

利用暴力猴插件编写脚本

暴力猴：violentmonkey.github.io/

用脚本转换蓝湖的css样式代码

// ==UserScript==
// @name        蓝湖小程序样式复制处理
// @icon        https://lhcdn.lanhuapp.com/web/static/favicon.ico
// @namespace   Violentmonkey Scripts
// @match       https://lanhuapp.com/web/
// @grant       GM_setClipboard
// @version     1.0
// @author      渣渣火
// @description 2020/11/23 上午12:07:35
// ==/UserScript==
window.addEventListener("copy", function (event){
  // 等蓝湖选中复制以后再获取选区
  setTimeout(() => {
    // 蓝湖修改了 console.log 使用 window._lanhu_raw_log();
    // 过滤字体名称和字体粗细为400的样式
    let textValue = window.getSelection().toString();
    textValue = textValue.replace(/(^\s?)|(font-family(:.*;)?\s?)|(font-weight:.*400;\s?)/g, '');
    // 转换除了 1px 以外的 px 单位为 rpx
    textValue = textValue.replace(/([^1])px/g, '$1rpx');
    GM_setClipboard(textValue);
  }, 0)
});

swagger-ui接口信息复制

复制后转换成能直接粘贴就用的代码，如下图所示

// ==UserScript==
// @name        swagger-ui接口信息复制
// @icon        data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAAAYFBMVEUAAABUfwBUfwBUfwBUfwBUfwBUfwBUfwBUfwBUfwBUfwBUfwBUfwBUfwBUfwB0lzB/n0BfhxBpjyC0x4////+qv4CJp1D09++ft3C/z5/K16/U379UfwDf58/q79+Ur2D2RCk9AAAAHXRSTlMAEEAwn9//z3Agv4/vYID/////////////////UMeji1kAAAD5SURBVHgBlZKFgYBADATRxe0Ibv1X+bK4vQzOnCbR/oNuGIb54gzLBnFc7y59HLAuDQKcCaPjnA5uxLumveK+jbxgLKsCSdIMRKWKT1un5pqRi6QghUi5T2+ASFWvvRtpweV/a2vRHcjxvf/S9rsOvvYMok56APG3qXMpkAAqQ5ZgWFe56k6GrJZayYhWkrSS4qRzqZJSSjW2yCtVSzWdNCbJsTFKtu0MJHtaub/n40nHTMhVbyN9F5YHUkmjQNJBGr7Y2h7VqdpTMiZ8iai9EI842kyEJ8KtpK33Ynkpp7DXDvSX+R2OvKPHhwY213xGjywG0A/2WT8BXsgXQDtZUQsAAAAASUVORK5CYII=
// @namespace   Violentmonkey Scripts
// @include     /http[s]?:\/\/.*\/swagger-ui.html/
// @grant       GM_setClipboard
// @version     1.0
// @author      渣渣火
// @description 2021/2/28下午3:05:42
// ==/UserScript==
console.log('匹配成功');
window.addEventListener("copy", function (event){
  let textValue = window.getSelection().toString();
  // 根据换行和空格分割字符串
  let srtArr = textValue.split(/\s/);
  if (srtArr.length === 3) {
    event.preventDefault();
    event.stopPropagation();
    let copyValue = `// ${srtArr[2]}
    export const apiName = (data) => request.${srtArr[0].toLowerCase()}({ url: '${srtArr[1]}', data });`;
    GM_setClipboard(copyValue);
    console.log({textValue, copyValue});
  }
});

利用 vscode 代码片段快速编写代码

如下图方式打开片段设置

代码片段是一个 json 的格式，键名就是片段的名字

"片段名": {
    "prefix": "log",
    "body": [
        "console.log('$1');"
    ],
    "description": "Log output to console"
}

包含属性如下

• 前缀【prefix】是用来触发代码片段的
• 正文【body】就是最终输出的代码内容
• 描述【description】如下图所示

正文里的内容格式

• 正文是一个数组，每个数组成员就是一行代码
• \t 用来表示占位的 tab 或者 空格
• 特殊字符需要反斜杠 \ 转义 例如：<style scoped lang=\"scss\">
• 之前的 vscode 版本还需要 \r 来换行，现在新版不需要了

预设光标

正文里面可以预先设置光标位置，就是生成代码以后光标默认的位置，可以有多个，从 $1 开始到 $n，举个例子 创建一个 js 文件的代码片段

"控制台打印": {
    "prefix": "log",
    "body": [
        "console.log($1);"
    ],
    "description": "控制台打印"
}

效果如下

多光标，按 tab 键定位到下一个光标

"v控制台打印": {
    "prefix": "vlog",
    "body": [
            "console.log('$1：', $1);"
    ],
    "description": "控制台打印"
}

效果如下

有顺序的多个光标，$1是方法名，$2是参数，$3是赋值的变量

"获取数据接口代码片段": {
    "prefix": "getData",
    "body": [
        "async $1() {",
        "\tlet res = await $1($2);",
        "\tif (res && !res.hasErrors) {",
        "\t\tthis$3 = res.data;",
        "\t}",
        "}"
    ],
    "description": "获取数据接口代码片段"
}

效果如下

有默认值的多光标 ${n:label}，可以用默认值，也可以修改

"获取数据接口代码片段": {
    "prefix": "getData",
    "body": [
        "async ${1:user}() {",
        "\tlet res = await ${1:user}(${2:params});",
        "\tif (res && !res.hasErrors) {",
        "\t\tthis${3:.list} = res.data;",
        "\t}",
        "}"
    ],
    "description": "获取数据接口代码片段"
}

使用默认值效果如下

不使用默认值效果如下

分享一些我自己使用的片段

javascript 片段

"引入api接口": {
    "prefix": "api",
    "body": [
        "import { $1 } from '@/api$2';"
    ],
    "description": "引入api接口"
},
"引入utils工具方法": {
    "prefix": "utils",
    "body": [
        "import { $1 } from '@/utils/index.js';"
    ],
    "description": "引入utils工具方法"
},
"选择单个dom元素": {
    "prefix": "qs",
    "body": [
        "document.querySelector('$1');"
    ],
    "description": "选择单个dom元素"
},
"选择多个dom元素": {
    "prefix": "qs",
    "body": [
        "document.querySelectorAll('$1');"
    ],
    "description": "选择多个dom元素"
}

vue-html 片段（结合uni-app使用的小程序标签）

"block-line线条样式": {
    "prefix": "line",
    "body": [
        "<view class=\"block-line\"></view>"
    ],
    "description": "block-line线条样式"
},
"block占位标签": {
    "prefix": "bl",
    "body": [
        "<block>$1</block>"
    ],
    "description": "block占位标签"
},
"view标签": {
    "prefix": "v",
    "body": [
        "<view>$1</view>"
    ],
    "description": "view标签"
},
"Mustache语法": {
    "prefix": "?",
    "body": [
        "{{ $1 }}"
    ],
    "description": "Mustache语法"
}