Extension

曾经介绍过Path Autocomplete是一款非常不错的VSCode插件。当然出了最基本的路径补全提示，还有些高级技巧和使用中可能遇到的小问题，在此和大家分享下。 映射目录当你项目中的Webpack使用了resolve.alias，webpack.config.js配置如下： module.exports = { //... resolve: { alias: { Utilities: path.resolve(__dirname, 'src/utilities/'), Templates: path.resolve(__dirname, 'src/templates/') } }};那么项目之前引入的一个文件的方法假设是： import Utility from '../../utilities/utility';现在就可以写成： import Utility from 'Utilities/utility';问题来了，当你输入Utilities/的时候，编辑器根本不知道这里面有什么文件，无法实现补全提示。 这时候，只需要在这个项目添加一个插件的配置就可以了，配置如下： { "path-autocomplete.pathMappings": { "Utilities": "${folder}/src/utilities/", }}${folder}表示项目根目录，如果你的项目和示例略有不同，请根据具体情况修改。这样是不是很方便啊，同理很多脚手架或框架（比如Nuxt.js）自带了这种类似的依赖关系，都是可以通过插件的pathMappings设置来更好的写代码的。 该功能示例在官方文档Options - pathMappings，也有，可以参考。出现重复文件和目录补全提示比如，你可能会遇到路径补全提示中出现重复的目录名称或者是文件，如下图： 那我也是尝试关闭VSCode自带的补全功能结果没找到。后来仔细阅读了插件文档，google相关信息，总结了下： 设置插件选项该插件提供了一个选项path-autocomplete.ignoredFilesPatter，你可以通过添加一行设置如下： "path-autocomplete.ignoredFilesPattern": "**/*.{js,ts,scss,css}"参阅：Path Autocomplete Tips 意思是匹配到所有的js、scss、css、ts文件时，path-autocomplete将被忽略。 设置VSCode内置选项在现有版本的VSCode上，是有两个选项关闭js、ts的路径提示的，我们可以通过关闭它们，达到目的： "javascript.suggest.paths": false,"typescript.suggest.paths": false,这样的话也能解决重复提示的问题，当然缺点是，其他文件类型就无法解决了。 相关阅读： Folders are duplicated on sass import statementmultiple suggesion in js files失效总的来说，推荐使用第一种设置插件选项来解决这个问题。 快速跟踪文件抱歉，理论上来说这个是VSCode内置的取代该插件的方案，但是我总是发现不太好用。 理论上，进行了jsconfig.json配置，详细可阅读官方说明，也可以达到映射目录的能力，并且，根据插件内的这段Configure VSCode to recognize path aliases描述来看，他是可以解决文件关联打开的，但是我反复测试了好久，都无法正常实现。原因不明，有兴趣的朋友也可以试试这个哦~ ...

为什么使用 php-ext-excel-exportxlswriter是一个PHP C扩展，可用于在Excel 2007+ XLSX文件中写入多个工作表的文本，数字，公式和超链接。 它支持以下功能：100％兼容的Excel XLSX文件完整的Excel格式合并单元格自动筛选图表数据验证和下拉列表工作表PNG / JPEG图像用于写入大文件的内存优化模式适用于Linux，FreeBSD，OpenBSD，OS X，Windows编译为32位和64位FreeBSD许可证唯一的依赖是zlib 基准测试测试环境: Macbook Pro 13 inchIntel Core i516GB 2133MHz LPDDR3 Memory128GB SSD Storage.导出两种内存模式，导出100W行数据，单行27列，每个单元格19个中文字符常规模式: 耗时 29S，内存占用 2083MB；固定内存模式: 耗时 52S, 内存占用 <1MB；读取读取 100W 行数据，每行1列，单元格数据为int全量读取: 耗时 3S, 内存占用 558MB；游标读取: 耗时 2.8S, 内存占用 <1MB；仓库地址Github：https://github.com/viest/php-ext-excel-export Gitee：https://gitee.com/viest/php-ext-xlswriter PECL：https://pecl.php.net/package/xlswriter 文档https://xlswriter-docs.viest.me End最后的最后请不要忘记star

一、前言在上一篇文章里，我简要介绍了 VSCode 插件开发的基本流程，同时讲解了如何获取文件夹绝对路径和用户输入的方法。最近又开发了一个新的插件，主要用途是替换当前编辑文件的内容。google 了一圈，发现介绍这方面的文章很少，特此记录一下，希望对有类似需求的人有一些帮助。二、需求需求很简单，我需要将下面文件的内容：export default { add_member# manage_member_card# member_setting# search_member# edit_member# delete_member# assign_consultant# add_member_tag# import_member# modify_member_point#};替换为：export default { add_member: ‘ce0’, manage_member_card: ‘ce1’, member_setting: ‘ce2’, search_member: ‘ce3’, edit_member: ‘ce4’, delete_member: ‘ce5’, assign_consultant: ‘ce6’, add_member_tag: ‘ce7’, import_member: ‘ce8’, modify_member_point: ‘ce9’,};可以理解为一个简单的自动化编号工具。其中要解决的问题主要有下面三个：获取当前文件路径读取文件内容写文件内容下面介绍如何实现。三、实现开始以为 VSCode 有现成的 API 可以取到当前文件内容，但找了一圈搜不到，只能通过迂回的方式实现。第一步，获取当前文件的路径：const currentlyOpenTabfilePath = vscode.window.activeTextEditor.document.fileName;第二步，读取文件内容，并拆分为数组const fs = require(‘fs’);const fileContentArr = fs.readFileSync(currentlyOpenTabfilePath, ‘utf8’).split(/\r?\n/);第三步，写文件。由于没法逐行替换文件内容，只能现将原来的文件清空，再一行一行添加回去。fs.truncateSync(currentlyOpenTabfilePath);fileContentArr.forEach( (line, index) => { let content = line; if (line.slice(-1) == ‘#’) { content = xxxxx; } fs.appendFileSync(currentlyOpenTabfilePath, content + ((index == contentLength - 1) ? ’’ : ‘\n’));})四、总结其实这个需求实现起来还是蛮简单的，主要是要根据 VSCode 的特点将思路理顺，再一步步实现。如果有更好的实现方式，请务必留言给我 ...

前言前段时间做了一个基于命令行的效率工具，可以自动生成组件的模板代码。自己用起来还觉得挺好，但在组内案例几次后大家都不愿意用，究其原因还是命令行工具使用起来门槛有点高，不方便。由于组内已经统一使用VS Code进行开发了，于是决定研究下VS Code的插件开发，让效率工具更方便的用起来。准备工作为了降低开发门槛，微软做了一个Yeoman代码生成命令，可以很方便的生成插件开发需要的模板代码，可以通过以下命令安装：// 安装npm install -g yo generator-code// 使用yo code运行完以上命令后会出现下面的操作界面，填入需要的信息即可。运行示例代码代码生成后，可以按F5开始调试插件，此时VS Code会新建一个实例并进入插件开发模式，开发中的插件可以在这个新的实例中使用。模版代码会生成一个名为Hello World的命令，按下⇧⌘P调出命令输入窗口，然后输入’Hello World’运行命令。如果找不到命令，重启下VS Code再重新运行。修改代码插件的入口代码在extension.js这个文件中，主要是修改avtivate函数：export function activate(context) { // Use the console to output diagnostic information (console.log) and errors (console.error) // This line of code will only be executed once when your extension is activated console.log(‘Congratulations, your extension “my-first-extension” is now active!’); // The command has been defined in the package.json file // Now provide the implementation of the command with registerCommand // The commandId parameter must match the command field in package.json let disposable = vscode.commands.registerCommand(’extension.sayHello’, () => { // The code you place here will be executed every time your command is executed // Display a message box to the user vscode.window.showInformationMessage(‘Hello World!’); }); context.subscriptions.push(disposable);}我插件的功能是用户通过右键点击导航栏，获取选中文件夹的绝对路径，然后提示用户输入新组件的名字，然后自动帮用户生成组件的模板代码。开发的关键点是如何获取文件夹绝对路径和获取用户输入的组件名。尤其是获取路径，找了很久才找到，官网的文档只字未提。先看代码：function activate(context) { console.log(‘Congratulations, your extension “react-template” is now active!’); // 注册一个名为createFunctionalComponent的命令 const fc = vscode.commands.registerCommand(’extension.createFunctionalComponent’, function (param) { // 文件夹绝对路径 const folderPath = param.fsPath; const options = { prompt: “请输入组件名: “, placeHolder: “组件名” } // 调出系统输入框获取组件名 vscode.window.showInputBox(options).then(value => { if (!value) return; const componentName = value; const fullPath = ${folderPath}/${componentName}; // 生成模板代码，不是本文的重点，先忽略 generateComponent(componentName, fullPath, ComponentType.FUNCTIONAL_COMP); }); }); context.subscriptions.push(pc);}代码很简单，就不做讲解了。为了显示Create Functional Component这个菜单项，我们需要修改package.json文件的contributes字段。activationEvents字段也要相应的改下。同时为了给插件配一个图标，要加一个icon字段： “icon”: “images/icon.png”, “activationEvents”: [ “onCommand:extension.createFunctionalComponent” ], “contributes”: { “commands”: [ { “command”: “extension.createFunctionalComponent”, “title”: “Create Functional Component” } ], “menus”: { “explorer/context”: [ { “command”: “extension.createFunctionalComponent”, “group”: “1_modification” } ] } },详细的contributes配置可以看这里。配置好menus之后，registerCommand的第二个函数参数就能取到文件或文件夹的绝对路径了。发布插件插件开发完后就可以发布了，需要安装vsce npm install -g vsce安装完后，需要去Azure DevOps注册并生成一个access token。详细的流程可以看这里。生成toke的时候有两个地方需要注意下：token生成后就可以登录和发布了。如果有任何的修改，要注意修改package.json里面版本号才能发布成功。发布成功后，很快就能在VS Code的插件市场搜到了。总结本文介绍了VS Code插件开发的基本流程，实现了一个简单的插件。本文只涉及到VS Code插件系统的冰山一角，更多的高级功能以后接触到的时候再作介绍。如果想再作进一步的了解，可以从这里开始。 ...