團隊的新項目總體採用 vh, vw 單位, 眼見團隊成員默默調出了計算器... css
我想我應該作點什麼 考慮到團隊總體使用 VSCode 編輯器,因而這個插件誕生了.VSCode 官方推薦使用 yeoman 和 VS Code Extension Generator 搭建項目html
// 安裝 yeoman
npm install -g yo generator-code
// 生成項目
yo code
複製代碼
├── CHANGELOG.md
├── README.md
├── node_modules
├── out // 輸出文件
├── package-lock.json // package-lock.json
├── package.json // package.json
├── src // src
│ ├── extension.ts // 註冊插件
│ ├── process.ts // 功能處理函數
│ ├── provider.ts // 插件功能提供(調用vscode擴展)
│ └── test // test
├── tsconfig.json
├── tslint.json
└── vsc-extension-quickstart.md
複製代碼
process.ts主要實現對捕捉用戶輸入相應字符反應的工具類,執行 px 到 vh/vw 轉換.包含如下幾種方法:vue
class CSSPercent {
...
// 匹配觸發條件字符正則
regPxVw: RegExp = /([-]?[\d.]+)pxw/;
regPxVh: RegExp = /([-]?[\d.]+)pxh/;
pxToPercent () {} // 轉化 px 爲百分比值方法
getBaseData () {} // 獲取默認值(插件默認的設置)
getPxStr () {} // 捕獲用戶輸入px字段
cover () {} // 調用getPxStr並執行pxToPercent函數,完成 px 2 vw/wh
}
複製代碼
下面詳細解釋一下以上方法node
cover (text: string) { // text 是傳入用戶輸入的值
let match = this.getPxStr(text); // 調用getPxStr匹配是否具有pxw/pxh 字段
if (!match) {return null;}
return this.pxToPercent(match[0]); // 匹配成功調用pxToPercent完成轉化
}
複製代碼
// 匹配輸入字符是否觸發轉換
private getPxStr (str: string) {
if (this.regPxVw.test(str)) {
return str.match(this.regPxVw);
} else if (this.regPxVh.test(str)) {
return str.match(this.regPxVh);
}
return false;
}
複製代碼
// 實現 px => vh / vh 轉換
private pxToPercent (pxStr: string) { // pxStr 是捕捉到用戶輸入px單位時傳入的參數
interface BaseDataVale {
unit: string;
designValue: number;
}
const pxValue = parseFloat(pxStr);
const baseData: BaseDataVale = this.getBaseData(pxStr); // 根據當前字符 pxw 或者 pxh 返回相應的基礎配置數據
const percentValue: number | string = +(pxValue / baseData.designValue * 100).toFixed(this.config.fixedDigits);
const percentValueStr: string = `${percentValue}${baseData.unit}`;
// 返回須要用到的字段
return {
pxStr,
pxValue,
percentValue,
percentValueStr
};
}
複製代碼
// 根據當前值返回配置數據值
private getBaseData (str: string) {
if (this.regPxVw.test(str)) {
return {
unit: 'vw',
designValue: this.config.designWidth
};
} else if (this.regPxVh.test(str)) {
return {
unit: 'vh',
designValue: this.config.designHeight
};
}
return {
unit: '',
designValue: 0
};
}
複製代碼
看到上邊的 this.config 你們可能會有疑問,後邊會闡述,以上就實現了 px 到百分比值的轉換,咱們能夠調用函數檢查到執行結果沒有問題,那接下來將經過 VSCode 自己的擴展獲取到輸入值,並執行 CSSPercent 方法git
provider 主要會用到 VSCode 提供的 CompletionItemProvider
方法, 文檔地址.github
import * as vscode from 'vscode';
import CSSPercent from './process';
class CSSPercentProvider implements vscode.CompletionItemProvider { // CompletionItemProvider 能夠在用戶鍵入字符以後提供可供選擇的 item, 用這個方法內獲取字符並匹配須要觸發的點(pxw / pxh)
constructor (private process: CSSPercent) {}
provideCompletionItems (
document: vscode.TextDocument,
position: vscode.Position
): Thenable<vscode.CompletionItem[]> {
return new Promise((resolve, reject) => {
const lineText = document.getText(new vscode.Range(position.with(undefined, 0), position)); // 匹配到當前行字符
const result = this.process.cover(lineText); // 調用 csspercent 方法
if (!result) {
return resolve([]);
}
// 在匹配成功後提供 snippet 選項, 選中即轉化 px => vw / vh
const item = new vscode.CompletionItem(`${result.pxValue}px => ${result.percentValueStr}`, vscode.CompletionItemKind.Snippet);
item.insertText = result.percentValueStr;
return resolve([item]);
});
}
}
export default CSSPercentProvider;
複製代碼
在上邊部分已經完成了全部功能的開發, 可是咱們的插件尚未真正在 vscode 中註冊成功, 同時咱們也須要根據代碼語言類型去調用插件功能, 好比在 js, ts 等文件裏若是也執行這個的插件, 會形成沒必要要的浪費, extension.ts 就是作這部分的工做.npm
'use strict';
import * as vscode from 'vscode';
import CSSPercent from './process';
import CSSPercentProvider from './provider';
let config;
export function activate(context: vscode.ExtensionContext) { // vscode 啓用插件會調用 activate 方法, 銷燬/禁用時調用 deactivate 方法
config = vscode.workspace.getConfiguration('CSSPercent'); // 這裏獲取到咱們的配置選項, 配置寫在 package.json 中
const process = new CSSPercent(config); // 傳入默認配置, 這是 csspercent 裏調用 config 的來源
const provider = new CSSPercentProvider(process);
const TYPES = [
'html',
'vue',
'css',
'less',
'scss',
'sass',
'stylus'
];
// 遍歷註冊插件須要執行的文本類型
TYPES.forEach(item => {
let providerDisposable = vscode.languages.registerCompletionItemProvider(
{
scheme: 'file',
language: item
},
provider,
'w', // 這裏穿傳入 w, h 是 tigger 選項, 爲了精確配置觸發條件
'h'
);
context.subscriptions.push(providerDisposable); // 完成訂閱
});
}
複製代碼
配置項json
// config
"contributes": {
"configuration": { // 配置項會在安裝插件後的設置中找到, 這樣能夠根據不一樣的 UI 稿實現不一樣的比率轉換
"type": "object",
"title": "CSS-Percent configuration",
"properties": {
"CSSPercent.designWidth": { // 設計稿寬度, 用於執行 px => vw
"type": "number",
"default": 1920,
"description": "design page's width (unit: px), default: 1920"
},
"CSSPercent.fixedDigits": { // 默認小數點精度
"type": "number",
"default": 4,
"description": "Px to percent decimal point maximum length, default: 4"
},
"CSSPercent.designHeight": { // 設計稿高度, 用於執行 px => vh
"type": "number",
"default": 1080,
"description": "design page's height (unit: px), default: 1080"
}
}
}
}
// 觸發語言
"activationEvents": [
"onLanguage:html",
"onLanguage:vue",
"onLanguage:css",
"onLanguage:less",
"onLanguage:scss",
"onLanguage:sass",
"onLanguage:stylus",
"onLanguage:tpl"
]
複製代碼
VSCode插件須要使用 vsc 發佈, 首先須要註冊一個Azure DevOps帳號, 主要根據官方文檔便可api
npm install -g vsce
$ vsce package // 打包插件 .vsix 格式
$ vsce publish // 發佈到 MarketPlace
複製代碼
也能夠在 VSCode 插件中搜索 CSS-Percent
安裝
歡迎使用, 歡迎star