皮皮网

1.VSCode插件之字数统计、源码翻译
2.vscode怎么设置中文?注释
3.「VS Code 整活」100行代码，写一个超实用的翻译悬浮翻译插件
4.如何开发一款中二的vscode命名翻译插件
5.分享一个 VSCode 翻译插件（du-i18n）
6.一款中文转换成英文驼峰命名VsCode插件（Auto En Conver）

VSCode插件之字数统计、翻译

       在搭建VS Code插件的源码环境中，我们首先需要确保具备npm和git，注释且使用的翻译psd的源码是最新版本的VS Code，例如1..0版本。源码对于插件开发新手，注释可以参考VS Code官网提供的翻译链接，通过创建插件来减少代码重复编写，源码实践从零开始的注释插件开发。

       搭建插件项目时，翻译首先构建项目结构，源码输入插件名称、注释identifier、翻译描述等信息。然后进入指定目录，VS Code会自动进行编译并打开Extension Development Host窗口。通过快捷键Command+Shift+P输入插件名称，即可查看插件效果。通常自带的特效是展示信息框，输出“Hello World”。

       插件开发过程中，可选择使用现成的插件功能进行扩展，如实时字数统计和翻译选中文本功能。为了快速实现字数统计，可以搜索并使用如ycjc-vscode-word-count等插件。进一步地，为实现翻译功能，可以参考其他插件的实现代码，如天气预报插件中的代码片段，用于监听系统剪切板内容变化并调用翻译API。在TypeScript环境下，可能需要引入如WebRequest的库来实现网络请求功能。

       对于翻译功能，可以使用百度翻译API替代有道翻译API，cep源码因为后者可能受限于免费使用规则。在实现过程中，需要处理选中文本的编码问题，使用如encodeURI方法来确保URL解析的正确性。为了减少代码中的硬编码，可以使用VS Code的工作空间配置文件来动态获取配置值，如添加到package.json中的配置项。

       在完成插件开发后，需要进行打包和发布。参考相关教程，了解打包、发布和升级的过程。可能遇到的问题包括：修改README.md文件时，删除自动生成文本并加入自己的内容；无法打包时，确认package.json中是否包含publisher信息；仓库缺失时，可能需要通过git进行初始化；发布时可能需要生成Token，确保身份信息正确。成功发布后，插件将出现在VS Code插件市场中，供其他用户搜索和安装。

vscode怎么设置中文?

       想要在VSCode中设置中文，首先需要了解提示信息。黄三角感叹号提示的“我们现在无法连接到扩展市场，请稍后再试”意味着你的网络连接可能存在问题。

       解决方法之一是检查网络连接，确保你的设备能正常访问互联网。有时，微软的服务在国内可能不稳定，导致无法连接到扩展市场。此时，可以尝试刷新浏览器或重启电脑，以及多次尝试连接。

       如果上述方法无效，可以考虑使用翻译软件将英文提示翻译成中文，这样更容易理解问题所在并找到解决方案。渐进源码此外，善用翻译工具在遇到语言障碍时往往比等待他人解答更为高效。

       在设置中文环境方面，首先确保VSCode已安装。之后，打开设置面板，点击左侧的“编辑配置”（`settings.json`），将`"terminal.integrated.shell.windows"`属性设置为`"C:\\Windows\\System\\cmd.exe"`。这样可以确保在VSCode中使用命令行时使用中文界面。

       接下来，为了支持中文编辑，可以安装“Monokai”或“One Dark Pro”等支持中文的代码主题。在VSCode的扩展市场中搜索并安装这些主题，使代码编辑时的界面更加友好。

       最后，VSCode的文件路径和文件名支持中文。在创建或打开文件时，直接输入中文文件名即可。注意，文件夹和目录名同样可以使用中文，方便管理和搜索。

       总结而言，解决VSCode中文设置问题的关键在于网络连接和语言沟通。通过检查网络、善用翻译工具、正确设置代码主题和文件名，可以顺利实现VSCode的中文环境设置。

「VS Code 整活」行代码，写一个超实用的悬浮翻译插件

       翻译插件是编程日常中不可或缺的工具，尤其对于初学者和英文水平参差不齐的开发者。在探索了一系列VSCode翻译插件后，我发现了一款特别实用的神器——Google Translate Extension。这款插件与众不同，它无需通过科学上网，也不强制绑定快捷键，选品源码其最显著的功能是支持选中文本后直接悬浮翻译。

       经过这两年的VSCode二次开发经验积累，我被这个功能深深吸引，决定自己动手开发一个类似插件，以此作为学习的契机。现在，让我们一起步入这个行代码的旅程，探索这个超实用悬浮翻译插件的内部构造。

       从代码目录结构来看，主要逻辑集中在src目录。以入口文件extension.js为例，代码经过精简，仅剩行。接下来，我们将从代码流程出发，深入解析这个插件的各个关键步骤。

       首先，我们从初始化配置入手，定义必要的参数和功能。接着，编写触发函数，实现选中文本后的悬浮翻译功能。这一过程涉及调用Google Translate API，解析翻译结果，并触发显示。

       在translate.js中，我们看到的是一个简洁明了的翻译方法实现。其中，一段正则表达式被用来解析驼峰函数名，以适应不同的翻译需求。接下来，是显示悬浮翻译结果的关键部分。在hoverDisposable的代码中，我们能发现如何获取翻译结果，并将其以直观的源码屋-手游源码端游源码页游源方式展示给用户。

       值得注意的是，插件在展示翻译结果时，会自动生成一个指向Google Translate的链接，方便用户深入了解翻译内容的背景和细节。这一设计考虑周到，体现了开发者对用户体验的重视。

       总的来说，这款插件不仅简化了翻译流程，提升编程效率，还通过精简代码和优化功能设计，实现了高效、便捷的使用体验。对于VSCode插件开发的初学者来说，这是一个很好的学习案例。

       作为个人的一次尝试，我将代码进行了精简优化，并分享在GitHub上，供有兴趣的开发者参考和使用。当然，对于不想亲自动手的同学，也可以尝试使用CS的自定义模板，同样能够体验到这款插件带来的便利。

如何开发一款中二的vscode命名翻译插件

       在前端开发的繁忙之余，一个ppt工程师突发奇想，想要利用vscode的广泛使用，开发一款创新的命名翻译插件。设想中，如果编程过程中的专业术语能像写中文一样直观，无疑会提升开发体验，增添一份中二的乐趣。

       在开始前，他明确了插件的目标：功能简单，主要面向需要频繁翻译命名的开发者。学习路径有两个：一是通过官方文档了解插件开发的基础知识，二是申请翻译工具的开放API。

       接着，他设计了一个插件功能的初步构想，并分享了项目创建的步骤，推荐使用vscode官方脚手架，对项目结构进行了优化，以便扩展其他功能。

       核心功能的开发过程中，他参考设计图，逐步实现了代码，将插件命名为"transform helper"并已发布到GitHub仓库。最后，他成功发布了这款插件，期待未来能添加更多实用的功能，如简化console.log日志等。

       如果你对这个中二的命名翻译插件感兴趣，不妨下载试试，无论是好评还是建议，他都欣然接受。这不仅是一个学习的过程，也是一次实用工具的创新尝试。

分享一个 VSCode 翻译插件（du-in）

       还在为翻译问题而头疼？今天向大家推荐一款VSCode翻译插件——du-in，助你工作效率大提升！

       du-in翻译插件专为本地开发工作设计，支持扫描中文、提取文案、文案回显、同步翻译、文案上传、拉取线上文案、文案漏检、切换语言以及分析统计等功能。该插件兼容vue2，vue3，react，满足不同阶段多语言发展的开发需求，适用于本地保存文案模式和线上保存文案模式。

       1. 功能：提供扫描中文、提取文案、文案回显、同步翻译、文案上传、拉取线上文案、文案漏检、切换语言以及分析统计等功能。

       2. 技术栈：兼容vue2，vue3，react（含js和ts）

       3. 兼容性：支持多种不同阶段多语言发展的开发模式，保存在本地的模式，保存在线上的模式。

       4. 安装与配置：1）安装du-in插件，输入du in即可搜索；2）安装后，点击设置，自动生成配置文件du-in.config.json。

       5. 使用：1）回显文案；2）扫描中文；3）线上翻译（接入deyi、创建本地翻译源文案、调用百度在线翻译API）；4）翻译漏检；5）批量操作；6）语言切换。

       6. 常见问题：1）react项目中如何配置quoteKeys？答：原则上你可以配置任何的key，但需要注意，在js/ts文件中，默认引用最后一个key。2）是否支持将各种文件拆分一个个单独的语言文件？答：支持，你可以集中在其中一个json文件，也可以按语言拆分不同json文件，这些都是可以配置的。

一款中文转换成英文驼峰命名VsCode插件（Auto En Conver）

       为了实现中文转换为英文驼峰命名的功能，您需要在VSCode中安装插件“Auto En Conver”。这一步骤非常简单，只需在VSCode插件搜索栏中输入“Auto En Conver”并进行安装即可。

       该插件的翻译功能主要依赖于百度翻译API。您可以通过百度翻译开放平台获取API，进行文本翻译。注册过程非常便捷，每月提供五万免费字符额度，足够使用。在获取到APP ID和密钥后，您需要进行下一步。

       接下来，打开插件设置，点击“扩展设置”，并进入“settings.json”文件进行编辑。在该文件中，配置您申请的百度翻译API的APP ID和密钥。具体配置步骤可以通过查看相关文档或进行详细了解。

       配置完成后，只需选中文本并右键点击，即可执行转换操作。为了提高使用效率，您可以根据个人喜好修改快捷键。在VSCode中，您可以通过“首选项”下的“键盘快捷方式”功能进行修改，或者使用快捷键“ctrl+k s”快速跳转至快捷键设置界面。在该界面中，双击插件名称即可进行快捷键的修改。

       通过以上步骤，您便可以轻松实现中文文本转换为英文驼峰命名的操作，提升编程效率。确保您遵循API的使用规则，合理利用免费的资源，以获得最佳的使用体验。

vscode中的 jsconfig.json

       问题源头：在webpack模板中，import路径中的@符号意味着什么？

       目录中存在jsconfig.json文件表示该目录为JavaScript项目的根目录。jsconfig.json文件主要用于定义根文件以及提供JavaScript语言服务的特定功能选项。

       说明：若项目不涉及JavaScript，则无需特别关注jsconfig.json文件。此文件源自tsconfig.json，是TypeScript的配置文件，设置为允许JavaScript（通过将“allowJs”属性设置为true）。

       为什么需要jsconfig.json文件？

       Visual Studio Code的JavaScript支持可运行在两种模式下：当工作空间内存在定义项目上下文的jsconfig.json文件时，JavaScript体验会得到显著改善。因此，当在新工作空间中打开JavaScript文件时，系统会提示创建jsconfig.json文件。

       jsconfig.json的位置

       定义代码区域（如网站的客户端部分）为JavaScript项目时，需在JavaScript代码的根目录下创建jsconfig.json文件。例如：

       在复杂项目中，可能需要在工作空间中定义多个jsconfig.json文件以避免混淆，如在客户端和服务器文件夹下的两个单独JavaScript项目。

       例子

       默认情况下，JavaScript语言服务将分析并为JavaScript项目中的所有文件提供IntelliSense功能。但需明确指定需排除或包含的文件，以确保提供正确的IntelliSense。

       使用“exclude”属性

       通过设置exclude属性（采用glob模式），可告诉语言服务哪些文件不是源代码的一部分，这有助于保持性能。若发现IntelliSense速度变慢，可将文件夹添加至排除列表（VS代码在检测到速度减慢时会提示执行此操作）。

       提示：排除构建过程生成的文件（如dist目录）是明智之举，避免建议显示两次并降低IntelliSense速度。

       使用“include”属性

       使用include属性（同样采用glob模式）可明确设置项目中的文件。若未指定include属性，系统默认包含目录及其子目录中的所有文件；若指定了include属性，则仅包含这些文件。例如：

       提示：exclude和include中的文件路径需相对于jsconfig.json的位置。

       jsconfig选项

       jsconfig中的“compilerOptions”用于配置JavaScript语言支持。

       提示：此属性的存在是因为jsconfig.json是tsconfig.json的后代，后者用于编译TypeScript。

       选项描述

       类型、默认值、选项描述

       noLib 不包含默认库文件（lib.d.ts） string-target 指定使用的默认库（lib.d.ts），值为“es3”、“es5”、“es6”、“es”、“es”、“es”、“es”、“esnext”

       checkJs 启用JavaScript文件的类型检查 boolean true experimentalDecorators 提供ES装饰器的实验支持 string allowSyntheticDefaultImports 允许默认导入没有默认导出的模块 boolean true baseUrl 用于解析非相对模块名称的基目录 string paths 指定相对于baseUrl选项计算的路径映射 object 见demo

       使用webpack别名

       要使IntelliSense使用webpack别名，需使用glob模式指定paths键，例如对于别名'ClientApp'（或@）：

       使用别名

       最佳实践

       只要可能，应排除不属于项目源代码的JavaScript文件。

       提示：若工作空间中无jsconfig.json文件，则默认排除node_modules文件夹。

       组件要排除的文件夹示例

       node 排除node_modules文件夹 webpack、webpack-dev-server 排除内容文件夹，例如dist bower 排除bower_components文件夹 ember 排除tmp和temp文件夹 jspm 排除jspm_packages文件夹

       当JavaScript项目过大导致性能下降时，通常是由于像node_modules这样的库文件夹所致。若VS Code检测到项目过大，则会提示编辑排除列表。

       提示：有时难以正确配置jsconfig.json文件，此时可运行“Reload JavaScript Project”命令以重新加载项目并获取更改。

       使用TypeScript编译器进行低级编译

       当使用tsc将ES6 JavaScript向下级编译为较旧版本时，jsconfig.json中的以下编译器选项适用：

       选项描述

       module 模块代码生成值为“commonjs”、“system”、“umd”、“amd”、“es6”、“es”

       diagnostics 显示诊断信息 boolean

       emitBOM 在输出文件的开头发出UTF-8字节顺序标记（BOM）

       inlineSourceMap 使用源映射发出单个文件，而不是使用单独的文件

       inlineSources 在单个文件中将源与源图一起发出；需设置--inlineSourceMap

       jsx JSX代码生成：“保留”或“反应”？

       reactNamespace 指定在针对'react'JSX发出的目标时为createElement和__spread调用的对象

       mapRoot 将位置指定为字符串中的uri，其中调试器应找到映射文件而不是生成的位置

       noEmit 不发起输出

       noEmitHelpers 不在编译输出中生成自定义辅助函数，如__extends

       noEmitOnError 如果报告任何类型检查错误，不发起输出

       noResolve 不将三斜杠引用或模块导入目标解析为输入文件

       outFile 连接并将输出发送到单个文件

       outDir 将输出结构重定向到目录

       removeComments 不向输出发出注释

       rootDir 指定输入文件的根目录。用于通过--outDir控制输出目录结构

       sourceMap 生成相应的'.map'文件

       sourceRoot 指定调试器应找到JavaScript文件而不是源位置的位置

       stripInternal 不为具有'@internal'注释的代码发出声明

       watch 监听输入文件

       emitDecoratorMetadata 在源中为装饰声明发出设计类型元数据

       noImplicitUseStrict 不在模块输出中发出“use strict”指令

       这个文档是否有所助益？参考：JavaScript语言服务 TypeScript tsconfig.json glob模式 webpack模板中import路径中@符号的含义

       翻译：Xindot 原文：code.visualstudio.com/d...