coder-xiaomo/variable-conversion-vscode-extension
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity GitHub Gitee

实现 快捷键 Ctrl + Shift + T 显示 vscode QickPick 弹窗

Browse Source
This commit is contained in:
程序员小墨 2024-04-07 02:00:24 +08:00
parent 9120e47147
commit 461ab98385
7 changed files with 221 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
CHANGELOG.md
View File

@ -9,6 +9,7 @@ All notable changes to this extension will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
<!--
## [Unreleased]
@ -20,8 +21,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Removed
-->
## 1.0.4
### Added
- Add shortcut key `Ctrl + Shift + T` to show vscode QickPick window (添加快捷键 Ctrl + Shift + T 来显示 vscode QickPick 弹窗)
- Write `README.md` (完善 README 文档)
## 1.0.3
### Added

10
package-comment.jsonc
View File

@ -2,9 +2,9 @@
// 插件 id 及名称
"name": "variable-conversion",
"displayName": "Variable Conversion [Under development(正在开发中)]",
"description": "A variable naming conversion extension. You can use it through the editer menu, shortcut keys and bottom bar. Support camel, pascal, snake, kebab(spinal), lower, upper case, and more. \n变量名转换插件，支持右键菜单、快捷键、底栏等多种方式使用，支持小驼峰、大驼峰(帕斯卡)、下划线(蛇形)、连字符(脊柱式)、全小写、全大写等常用命名方式(及组合)转换。",
"description": "一个强大的变量名转换插件，支持右键菜单、快捷键、底栏等多种方式使用，支持小驼峰、大驼峰(帕斯卡)、下划线(蛇形)、连字符(脊柱式)、全小写、全大写等常用命名方式(及组合)转换。 \nA powerful variable naming conversion extension. You can use it through the editer menu, shortcut keys and bottom bar. Support camel, pascal, snake, kebab(spinal), lower, upper case, and more.",
// 版本号
"version": "0.0.3",
"version": "0.0.4",
// logo
"icon": "image/logo.png",
"publisher": "coder-xiaomo",
@ -31,8 +31,10 @@
],
"main": "./out/extension.js",
"activationEvents": [
"onStartupFinished", // 当编辑器完成启动时激活
"onTextSelected" // 当用户选中文本时激活
// 当编辑器完成启动时激活
"onStartupFinished",
// 当用户选中文本时激活
"onTextSelected"
],
"contributes": {
"commands": [

4
package.json
View File

@ -1,8 +1,8 @@
{
"name": "variable-conversion",
"displayName": "Variable Conversion [Under development(正在开发中)]",
"description": "A variable naming conversion extension. You can use it through the editer menu, shortcut keys and bottom bar. Support camel, pascal, snake, kebab(spinal), lower, upper case, and more. \n变量名转换插件，支持右键菜单、快捷键、底栏等多种方式使用，支持小驼峰、大驼峰(帕斯卡)、下划线(蛇形)、连字符(脊柱式)、全小写、全大写等常用命名方式(及组合)转换。",
"version": "0.0.3",
"description": "一个强大的变量名转换插件，支持右键菜单、快捷键、底栏等多种方式使用，支持小驼峰、大驼峰(帕斯卡)、下划线(蛇形)、连字符(脊柱式)、全小写、全大写等常用命名方式(及组合)转换。 \nA powerful variable naming conversion extension. You can use it through the editer menu, shortcut keys and bottom bar. Support camel, pascal, snake, kebab(spinal), lower, upper case, and more.",
"version": "0.0.4",
"icon": "image/logo.png",
"publisher": "coder-xiaomo",
"engines": {

100
src/extension-handler/quick-pick-handler.ts
View File

@ -1,20 +1,71 @@
import * as vscode from 'vscode';
import QuickPickItemEx from "../type-definition/QuickPickItemExType";
import { qickPickSupportCases } from '../type-definition/SupportCaseType';
import { TransformTextResult } from '../type-definition/TransformTextResultType';
import { transformMutliLineText } from '../main-code/transform';
import { EOL } from '../type-definition/EOLType';
import { caseConversion } from '../main-code/conversion';
const QuickPickLabelMaxLength = 60;
interface RecommendItem {
conversionText: string
transforTo: string[]
keyword: string[]
}
/**
* 弹出的提示
*/
function generateOptionsBasedOnText(text: string): Array<QuickPickItemEx> {
function generateOptionsBasedOnText(text: string, eol: EOL): Array<QuickPickItemEx> {
// Cut text 切割文本
const results: Array<TransformTextResult> = transformMutliLineText(text);
const mergeResultList: Array<RecommendItem> = [];
for (const qickPick of qickPickSupportCases) {
const conversionResult: string = caseConversion(qickPick.type, text, eol, results);
const recommendItem: RecommendItem | undefined = mergeResultList.find(item => item.conversionText === conversionResult);
if (recommendItem === undefined) {
let item: RecommendItem = {
conversionText: conversionResult,
transforTo: [qickPick.shortName], // qickPick.name
keyword: qickPick.keyword,
};
mergeResultList.push(item);
continue;
}
recommendItem.transforTo.push(qickPick.shortName); // qickPick.name
recommendItem.keyword = Array.from(new Set(recommendItem.keyword.concat(qickPick.keyword))); // 关键词去重
}
// 根据文本生成选项的逻辑
return [
{ label: '输入对应项下方任一关键词可快速选择', kind: vscode.QuickPickItemKind.Separator },
{ label: text.toUpperCase(), description: '转换为大写', detail: '关键词：DaXie 大写 UpperCase', value: text.toUpperCase() },
{ label: 'Group 2', kind: vscode.QuickPickItemKind.Separator },
{ label: text.toLowerCase(), description: '转换为小写', value: text.toLowerCase() },
{ label: text.toLowerCase(), description: '转换为小写', value: text.toLowerCase() },
{ label: text.toLowerCase(), description: '转换为下划线', detail: '关键词：_', value: text.toLowerCase() },
{ label: text.toLowerCase(), description: '转换为连字符', detail: '关键词：-', value: text.toLowerCase() },
const quickPickList = [
// { label: '输入对应项下方任一关键词可快速选择', kind: vscode.QuickPickItemKind.Separator },
// { label: text.toUpperCase(), description: '转换为大写', detail: '关键词：DaXie 大写 UpperCase', value: text.toUpperCase() },
// { label: 'Group 2', kind: vscode.QuickPickItemKind.Separator },
// { label: text.toLowerCase(), description: '转换为小写', value: text.toLowerCase() },
// { label: text.toLowerCase(), description: '转换为小写', value: text.toLowerCase() },
// { label: text.toLowerCase(), description: '转换为下划线', detail: '关键词：_', value: text.toLowerCase() },
// { label: text.toLowerCase(), description: '转换为连字符', detail: '关键词：-', value: text.toLowerCase() },
];
for (const recommendItem of mergeResultList) {
if (text === recommendItem.conversionText) {
continue; // 如果转换后与转换前相同，那么跳过这一项
}
let quickPickItem: QuickPickItemEx = {
label: recommendItem.conversionText.length >= QuickPickLabelMaxLength
? (recommendItem.conversionText.substring(0, QuickPickLabelMaxLength - 3) + '...')
: recommendItem.conversionText,
description: `转换为 ${recommendItem.transforTo.join(' / ')}`,
detail: `关键词 ${recommendItem.keyword.join(' ')}`,
value: recommendItem.conversionText,
};
quickPickList.push(quickPickItem);
}
return quickPickList;
}
export function handleQuickPick() {
@ -26,6 +77,7 @@ export function handleQuickPick() {
let document = editor.document;
let selection = editor.selection;
let eol: EOL = document.eol === vscode.EndOfLine.CRLF ? '\r\n' : '\n';
// 获取选中的文本
let text = document.getText(selection);
@ -36,16 +88,32 @@ export function handleQuickPick() {
}
// 基于选中的文本生成选项
const options = generateOptionsBasedOnText(text);
const options = generateOptionsBasedOnText(text, eol);
// 显示推荐项列表
vscode.window.showQuickPick(options, {
matchOnDetail: true,
title: '标题',
placeHolder: '输入对应项下方任一关键词可快速选择！'
}).then(selection => {
if (selection) {
// 处理用户的选择
vscode.window.showInformationMessage(`你选择了: ${selection}`);
title: '请选择需要转换的命名类型...',
placeHolder: '点击转换，输入关键词可快速选择'
}).then(pickItem => {
if (pickItem === undefined) {
return;
}
// 处理用户的选择
// vscode.window.showInformationMessage(`你选择了: ${JSON.stringify(selection)}`);
const converted = pickItem.value;
// 当转换后文本与转换前相同时，跳过转换，避免形成 Ctrl + Z 撤销历史记录
if (converted === text) {
console.log('selection text is same to converted text, skip replace contents.');
return;
}
// 替换文本
console.log('replace selection text', text, 'to', converted);
editor.edit(editBuilder => {
editBuilder.replace(selection, converted);
});
});
}

4
src/main-code/conversion.ts
View File

@ -12,7 +12,7 @@ import { transformMutliLineText, transformText } from './transform';
* @returns 转换后的文本
* @since 2024-04-04
*/
export function caseConversion(targetCase: SupportCase, str: string, eol: EOL): string {
export function caseConversion(targetCase: SupportCase, str: string, eol: EOL, cutText: Array<TransformTextResult> | undefined = undefined): string {
let spaceCharacter: '-' | '_' | ' ' | undefined = undefined;
switch (targetCase) {
default:
@ -39,7 +39,7 @@ export function caseConversion(targetCase: SupportCase, str: string, eol: EOL):
}
// Cut text 切割文本
const results: Array<TransformTextResult> = transformMutliLineText(str);
const results: Array<TransformTextResult> = cutText === undefined ? transformMutliLineText(str) : cutText;
// console.log('results', results);
const transformedLines: Array<string> = [];

3
src/type-definition/QuickPickItemExType.ts
View File

@ -4,6 +4,7 @@ interface ExtendedQuickPickItem extends vscode.QuickPickItem {
value: string;
}
type QuickPickItemEx = ExtendedQuickPickItem | vscode.QuickPickItem;
// type QuickPickItemEx = ExtendedQuickPickItem | vscode.QuickPickItem;
type QuickPickItemEx = ExtendedQuickPickItem;
export default QuickPickItemEx;

129
src/type-definition/SupportCaseType.ts
View File

@ -140,17 +140,120 @@ export enum SupportCase {
UPPER_CASE,
}
export const AllSupportCase = [
SupportCase.CAMEL_CASE,
SupportCase.PASCAL_CASE,
SupportCase.SNAKE_CASE,
SupportCase.SNAKE_CAMEL_CASE,
SupportCase.SNAKE_PASCAL_CASE,
SupportCase.SNAKE_UPPER_CASE,
SupportCase.KEBAB_CASE,
SupportCase.KEBAB_CAMEL_CASE,
SupportCase.KEBAB_PASCAL_CASE,
SupportCase.KEBAB_UPPER_CASE,
SupportCase.LOWER_CASE,
SupportCase.UPPER_CASE,
const keyword = {
camel: [
'小驼峰', '驼峰',
'Camel Case',
'XiaoTuoFeng', 'TuoFeng',
'XTF', 'TF',
],
pascal: [
'大驼峰', '帕斯卡',
'Pascal Case',
'DaTuoFeng', 'PaSiKa',
'DTF', 'PSK',
],
snake: [
'下划线', '蛇形', '_',
'Snake Case', 'Underline Case',
'XiaHuaXian', 'SheXing',
'XHX', 'SX',
],
kebab: [
'连字符', '脊柱式', '-',
'Kebab Case', 'Spinal Case',
'LianZiFu', 'JiZhuShi',
'LZF', 'JZS',
],
upper: [
'全大写', '大写',
'Upper Case',
'QuanDaXie',
'QDX',
],
lower: [
'全小写', '小写',
'Lower Case',
'QuanXiaoXie',
'QXX',
],
};
/**
* 所有支持的命名方式
* @since 2024-04-06
*/
export const qickPickSupportCases = [
{
type: SupportCase.CAMEL_CASE,
name: '小驼峰(驼峰)命名',
shortName:'小驼峰',
keyword: keyword.camel,
},
{
type: SupportCase.PASCAL_CASE,
name: '大驼峰(帕斯卡)命名',
shortName:'帕斯卡',
keyword: keyword.pascal,
},
{
type: SupportCase.SNAKE_CASE,
name: '下划线(蛇形)命名',
shortName:'蛇形',
keyword: [...keyword.snake, ...keyword.lower],
},
{
type: SupportCase.SNAKE_CAMEL_CASE,
name: '下划线(蛇形) + 小驼峰(驼峰)命名',
shortName:'蛇形驼峰',
keyword: [...keyword.snake, ...keyword.camel],
},
{
type: SupportCase.SNAKE_PASCAL_CASE,
name: '下划线(蛇形) + 大驼峰(帕斯卡)命名',
shortName:'蛇形帕斯卡',
keyword: [...keyword.snake, ...keyword.pascal],
},
{
type: SupportCase.SNAKE_UPPER_CASE,
name: '下划线(蛇形) + 全大写命名',
shortName:'蛇形大写',
keyword: [...keyword.snake, ...keyword.upper],
},
{
type: SupportCase.KEBAB_CASE,
name: '连字符(脊柱式)命名',
shortName:'脊柱',
keyword: [...keyword.kebab, ...keyword.lower],
},
{
type: SupportCase.KEBAB_CAMEL_CASE,
name: '连字符(脊柱式) + 小驼峰(驼峰)命名',
shortName:'脊柱驼峰',
keyword: [...keyword.kebab, ...keyword.camel],
},
{
type: SupportCase.KEBAB_PASCAL_CASE,
name: '连字符(脊柱式) + 大驼峰(帕斯卡)命名',
shortName:'脊柱帕斯卡',
keyword: [...keyword.snake, ...keyword.pascal],
},
{
type: SupportCase.KEBAB_UPPER_CASE,
name: '连字符(脊柱式) + 全大写命名',
shortName:'脊柱大写',
keyword: [...keyword.snake, ...keyword.upper],
},
{
type: SupportCase.LOWER_CASE,
name: '全小写',
shortName:'小写',
keyword: keyword.lower,
},
{
type: SupportCase.UPPER_CASE,
name: '全大写',
shortName:'大写',
keyword: keyword.upper,
},
];