技术专栏 第674页

文章来源于公众号：淘系前端团队 ，作者梧忌

经常帮一些同学 One-on-One 地解决问题，在看部分同学使用 VS Code 的时候，有些蹩脚，实际上一些有用的技巧能够提高我们的日常工作效率。

一、重构代码

VS Code 提供了一些快速重构代码的操作，例如：

将一整段代码提取为函数：选择要提取的源代码片段，然后单击做成槽中的灯泡查看可用的重构操作。代码片段可以被提取到一个新方法中，或者在不同的范围内（当前闭包、当前函数内、当前类中、当前文件内）提取到一个新函数中。在提取重构期间，VS Code 会引导为该函数进行命名。

将表达式提取到常量：为当前选定的表达式创建新的常量。

移动到新的文件：将指定的函数移动到新的文件，VS Code 将自动命名并创建文件，且在当前文件内引入新的文件。

转换导出方式：export const name 或者 export default。

合并参数：将函数的多个参数合并为单个对象参数：

参考： 重构操作(code.visualstudio.com/docs/editor/refactoring)、JS/TS 重构操作(code.visualstudio.com/Docs/languages/typescript#_refactoring)

二、自定义视图布局

VS Code 的布局系统非常灵活，可以在工作台上的活动栏、面板中移动视图。

参考：重新排列视图(https://code.visualstudio.com/updates/v1_45?ref=codebldr#_dynamic-view-icons-and-titles)

三、快速调试代码

在 VS Code 内调试 JS/TS 代码非常简单，只需要使用 Debug: Open Link 命令即可。这在调试前端或 Node 项目时非常有用，这类型的项目通常会启动一个本地服务，这时候只需要将本地服务地址填写到 Debug: Open Link 输入框中即可。

参考：Debug(https://code.visualstudio.com/docs/editor/debugging)

四、查看和更新符号的引用

查看符号的引用、快速修改引用的上下文：例如，快速预览某个函数在哪些地方被调用了及其调用时上下文，还可以在预览视图中更新调用上下文的代码。

重命名符号及其引用：接着上面的例子，如果想更新函数名以及所有调用，怎么实现？按 F2 键，然后键入所需的新名称，再按 Enter 键进行提交。符号的所有引用都将被重命名，该操作还是跨文件的。

参考：Peek(https://code.visualstudio.com/docs/editor/editingevolved#_peek)、Rename Symbol(https://code.visualstudio.com/docs/editor/editingevolved#_rename-symbol)

五、符号导航

在查看一个长文件的时候，代码定位会是非常痛苦的事情。一些开发者会使用 VS Code 的小地图，但其实还有更便捷的方法：可以使用 ⇧⌘O 快捷键唤起符号导航面板，在当前编辑的文件中通过符号快速定位代码。在输入框中键入字符可以进行筛选，在列表中通过箭头来进行上下导航。这种方式对于 Markdown 文件也非常友好，可以通过标题来快速导航。

参考：Go to Symbol(https://code.visualstudio.com/docs/editor/editingevolved#_go-to-symbol)

六、拆分编辑器

当对内容特别多的文件进行编辑的时候，经常需要在上下文中进行切换，这时候可以通过拆分编辑器来使用两个编辑器更新同一个文件：按下快捷键 ⌘\ 将活动编辑器拆分为两个。

可以继续无尽地拆分编辑器，通过拖拽编辑器组的方式排列编辑器视图。

参考：Side by side editing(https://code.visualstudio.com/docs/getstarted/userinterface#_side-by-side-editing)

七、重命名终端

VS Code 提供了集成终端，可以很方便地快速执行命令行任务。用得多了经常会打开多个终端，这时候给终端命名可以提高终端定位的效率。

参考：Rename terminal sessions(https://code.visualstudio.com/docs/editor/integrated-terminal#_rename-terminal-sessions)

八、Git 操作

VS Code 内置了 Git 源代码管理功能，提供了一些便捷的 Git 操作方式。例如：

解决冲突：VS Code 会识别合并冲突，冲突的差异会被突出显示，并且提供了内联的操作来解决冲突。

暂存或撤销选择的代码行：在编辑器内可以针对选择的行来撤销修改、暂存修改、撤销暂存。

参考：Using Version Control in VS Code(https://code.visualstudio.com/docs/editor/versioncontrol)

九、搜索结果快照

VS Code 提供了跨文件搜索功能，搜索结果快照可以提供更多的搜索结果的信息，例如代码所在行码、搜索关键字的上下文，并且可以对搜索结果进行编辑和保存。

参考：Search Editors(https://code.visualstudio.com/updates/v1*43#*search-editors)

十、可视化搭建页面

在 VS Code 中可以通过可视化搭建的方式生成 Web 页面，这是通过安装 VS Code 的 Iceworks(https://marketplace.visualstudio.com/items?itemName=iceworks-team.iceworks) 插件实现的。安装插件后，通过 ⇧⌘P 唤起命名面板，在命令面板中输入『可视化搭建』即可唤起可视化搭建界面，在界面内通过选择网页元素、进行拖拽布局、设置元素样式和属性来搭建页面，最后点击『生成代码』就可以生成 React 代码。

以上就是W3Cschool编程狮关于VS Code 十个你需要知道的使用技巧的相关介绍了，希望对大家有所帮助。

文章来源于公众号：前端瓶子君
作者 | Desiré
译者 | 苏本如，责编 | 郭芮
出品 | CSDN（ID：CSDNnews）

各位网友，大家好！ 今天，我想在这里和大家分享一些我很晚时候才知道的一些CSS属性，在此之前，没有人告诉我这些属性的存在。 也许你们和我不一样，已经了解了这些属性。 闲话少说，让我们进入正题吧：

1. 禁用用户选中一个元素（element）的文本

使用属性 user-select，并且将它的值设置为 none ，我们可以将一个元素的文本设置为不能被用户选中。

element {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10+ and Edge */
  user-select: none; /* Standard syntax */
}

当你不想一个元素的原始内容被复制时，可以使用这个属性。

2. 更改选中文本的背景颜色

使用选择器::selection，可以更改选中文本的背景颜色：

::selection {
  color: #ececec;
  background: #222831;
}

当你使用这个属性时，注意使用良好的颜色对比度组合。

3. 在不使用br的情况下将文本换行

使用属性white-space，并将它的值设置为pre-wrap或pre-line：

element {
  white-space: pre-wrap; /*pre-wrap*/
  white-space: pre-line; /*pre-line*/
}

4. 设置字与字之间的间距

这对你来说可能有点简单。但是直到我搜索这个需求时，我才知道有这个设置。

你可以使用word-spacing这个属性来设置文本中词与词之间的间隔。

element {
  word-spacing: 6px; /* word spacing wow such */
}

5. 在浏览器中隐藏难看的滚动条

我以前甚至不知道这是可以做到的。

要实现这个目的，你必须为不同的浏览器，准备不同的代码：

/* Hide scrollbar for Chrome, Safari, and Opera */
html::-webkit-scrollbar {
  display: none;
}


/* Hide scrollbar for IE and Edge */
html {
  -ms-overflow-style: none;
}

如果你禁用了滚动条，那么你需要确保提供上/下按钮和其他方便的导航选项。请注意，Firefox停止了对滚动条隐藏问题的支持，以上代码似乎是一个技巧，可以执行与我包含的其他代码相同的功能。

以上就是W3Cschool编程狮关于五个有用的 CSS 属性被我忽视了的相关介绍了，希望对大家有所帮助。

文章来源于公众号：前端之露 作者：露痴

9月10日，华为开发者大会如期而至。大会分享了 HMS Core 5.0的 最新进展。

前置知识

什么是鸿蒙

鸿蒙系统（鸿蒙OS，HarmonyOS）是第一款基于微内核的全场景分布式 OS，由华为公司自主研发并开源(开源的不是HMS框架是系统)。官网:https://developer.harmonyos.com/ 。

可见的未来？

整个大会一直在强调的是 HM OS 2.0 的分布式解决方案，打通了 PC、手表和车机等产品终端，第一个版本支持128K-128M设备上运行。这是统治世界(物联网)的节奏。


发布会上提到的强大的跨终端业务协同能力真的还是比较心动的。最重要的是这个是基于系统级别的！小编是不太敢预测个未来啊什么的。但是对于一个常年无法摆脱 apple 的人来说非常清楚是生态绑架了我。

做为一名前端开发者，最关心的莫过于我们能不能也体验一把国之荣光！下图可以看到方舟编译器括号里面写着大大的两个字 JS，不禁有些飘飘然～



JS 应用开发框架

那就来一起看看底层原理（官方文档）。

作为 JS 应用开发框架的轻量实现，鸿蒙提供一套跨平台的类 web 应用开发框架，通过 Toolkit 将开发者编写的 HTML、CSS 和 JS 文件编译打包成 JS Bundle ，然后再将 JS Bundle 解析运行成 C++ UIKit 的 View 组件进行渲染。

通过支持三方开发者使用声明式的 API 进行应用开发，以数据驱动视图变化，避免了大量的视图操作，大大降低了应用开发难度，提升开发者开发体验。


JS 应用框架实现主要包含两部分，native 和 JavaScript 。

native 部分为 C++，为框架的主体实现。

JavaScript 部分实现提供 JS 应用框架对用户 JS 文件的运行时支持，并通过向引擎暴露一些全局方法或对象，支撑 JS 运行时与 native 框架之间的交互。

想要用 JS 来开发一个APP 就要去研究一下下面的两个库啦！


组件化开发方式

鸿蒙贴心的提供了命令行工具

$ npm install -g @ohos/hpm-cli # 安装命令行工具
$ hpm init -t default # 进入开发目录，采用默认模板创建一个开发项目。
$ hpm install @ohos/demo # 安装组件

官方组件包：hpm.harmonyos.com/#/cn/home


IDE

DevEco 提供了一站式开发/编译/调试/烧录，集成了分布式能力，以及可灵活组装的丰富的组件，并且内置安全检查能力。


目前只支持 windows 系统（用Mac的表示很无奈），下载地址：device.harmonyos.com/cn/ide



• 鸿蒙OS官方开发文档

以上就是W3Cschool编程狮关于鸿蒙2.0！前端开启新大陆？的相关介绍了，希望对大家有所帮助。

原文作者：aircraft

基本思路是虚拟机中跑docker应用，宿主机是RockyLinux9，虚拟机是ubuntu24.04.2

首先，进入老生常谈的环节 —— 准备环境。进入
FIT-Framework 项目地址，下载项目代码。根据
入门指南，你可以快速部署 FIT 环境，并参考 FEL 的指导手册，掌握 FEL 模块的强大功能。FEL 模块不仅支持 DeepSeek 的接入，还能支持任何符合 OpenAI API 标准的大模型。此外，它还提供了丰富的工具和大模型操作原语，帮助你快速构建智能应用。️

FileAppender 是 Log4j2 中最基础的文件 Appender，它基于传统的 java.io.FileOutputStream 将日志写入文件，简单可靠。

在讲这个技巧之前，我们先来了解一下二者的区别。

摘要：深度伪造（deepfakes）、合成或篡改媒体的威胁正变得越来越令人担忧，尤其是对于那些已经被指控操纵公众舆论的社交媒体平台而言。即使是最简单的文本生成技术（例如查找和替换方法）也能欺骗人类，正如2017年的“网络中立性”丑闻所证明的那样。与此同时，从基于RNN的方法到GPT-2语言模型，更强大的生成模型已经发布。最先进的语言模型，特别是基于Transformer的模型，可以在接收到任意输入后生成合成文本。因此，开发能够帮助检测媒体真实性的工具至关重要。为了支持这一领域的研究，我们收集了一个真实的深度伪造推文数据集。这里的“真实”指的是每条深度伪造推文都确实发布在Twitter上。
我们总共收集了23个机器人账号的推文，这些机器人模仿了17个人类账号。这些机器人基于各种生成技术，包括马尔可夫链、RNN、RNN+马尔可夫、LSTM和GPT-2。
我们还从被机器人模仿的人类账号中随机选取了推文，以确保数据集的整体平衡性，最终数据集包含25,836条推文（一半是人类发布的，一半是机器人生成的）。该数据集已在Kaggle上公开。为了在提出的数据集上为检测技术建立坚实的基线，我们测试了13种基于各种最先进方法的检测方法。使用这13种检测方法报告的基线检测结果证实，基于Transformer架构（如GPT-2）的最新、更复杂的生成方法能够生成高质量的短文本，难以被检测出来。

Blazor 是基于 HTML、CSS 和 C# 的现代前端 Web 框架，可帮助你更快地生成 Web 应用。使用 Blazor，你可以使用可从客户端和服务器运行的可重用组件生成 Web 应用，以便提供出色的 Web 体验。