手把手教你寫一個 VSCode 插件

前言

團隊的新項目總體採用 vh, vw 單位, 眼見團隊成員默默調出了計算器... css

img
我想我應該作點什麼
考慮到團隊總體使用 VSCode 編輯器,因而這個插件誕生了.

項目搭建

yeoman / VS Code Extension Generator

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
複製代碼

基本功能

  • 匹配代碼輸入,如捕捉 pxw 根據比率自動轉換爲 vw; pxh 根據比率自動轉換爲 vh,
  • 轉化比率可配置

功能實現

process.ts

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

cover (text: string) { // text 是傳入用戶輸入的值
    let match = this.getPxStr(text); // 調用getPxStr匹配是否具有pxw/pxh 字段
    if (!match) {return null;}

    return this.pxToPercent(match[0]); // 匹配成功調用pxToPercent完成轉化
  }
複製代碼

getPxStr

// 匹配輸入字符是否觸發轉換
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;
  }
複製代碼

pxToPercent

// 實現 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
    };
  }
複製代碼

getBaseData

// 根據當前值返回配置數據值
  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

provide.ts

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;
複製代碼

extension.ts

在上邊部分已經完成了全部功能的開發, 可是咱們的插件尚未真正在 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); // 完成訂閱
    });
}

複製代碼

package.json

配置項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
複製代碼

完整項目地址

github.com/morehardy/v…sass

也能夠在 VSCode 插件中搜索 CSS-Percent 安裝

歡迎使用, 歡迎star

參考

code.visualstudio.com/api/working…

code.visualstudio.com/api/referen…

相關文章
相關標籤/搜索