- VisualStudio2022插件的安装及使用-编程手把手系列文章
- pprof-在现网场景怎么用
- C#实现的下拉多选框,下拉多选树,多级节点
- 【学习笔记】基础数据结构:猫树
系列首发于公众号『非同质前端札记』 ,若不想错过更多精彩内容,请“星标”一下,敬请关注公众号最新消息. 今天咱们来聊聊 VS Code 里的自定义代码片段. 这玩意儿简直是提升编码效率的神器, 用好了能让你敲代码更方便. 不管你是刚入行的菜鸟还是身经百战的老兵,这篇攻略都能让你在代码片段的世界里玩得飞起. 系好安全带,我们开始起飞啦. 简单说, 代码片段就是一些预先定义好的代码模板。你只需要敲几个字母,噌的一下,一大段代码就蹦出来了. 比如说, 你可以把一个常用的函数结构设置成代码片段,下次需要的时候,只要输入一个简短的触发词,瞬间就能生成整个函数框架. 来, 跟我一步步来 来看个例子 这里的 "Console log" 是这个片段的名字,"prefix" 是触发词,"body" 是实际的代码内容,"description" 是描述. 好了, 基础的东西我们搞定了. 现在来点更进阶的吧. 占位符是代码片段中最基本也是最强大的功能之一。它们不仅可以让你在插入片段后快速跳转到特定位置, 还能实现更多花样. 基本占位符 来个例子 占位符中的默认值: 你可以在占位符中提供默认值,格式是 ${1:defaultValue} . 占位符中的选择项: 你还可以在占位符中提供多个选项,让用户选择。格式是 ${1|option1,option2,option3|} . VS Code 提供了不少内置变量,可以在代码片段中使用。这些变量会在插入片段时被实际值替换. 常用内置变量 日期和时间变量 来个实用的例子 你还可以对变量和占位符的值进行各种花式操作。这些转换可以改变文本的大小写、格式等. 案例转换 来个实用的例子 这个例子会自动把文件名转换为 PascalCase,完美符合 React 组件命名规范. 你可以在一个占位符内部再塞一个占位符,这就是嵌套占位符。这招能让你创建更复杂的交互式代码片段. 来个例子 这个例子中,无论你在第二个占位符中输入什么,都会被自动复制到 else 块中。挺智能的,是吧? 光说不练假把式,来看看实际应用吧. 起个好名字: 给你的代码片段起个好记的名字和前缀。比如我喜欢用 "rcomp" 表示 React 组件. 经常更新: 你的编码习惯在变,记得更新你的代码片段。定期 review 一下自己代码片段库. 别贪多: 代码片段是好东西,但也别啥都做成片段。只为那些真正重复的、复杂的代码创建片段. 向大佬学习: GitHub 上有不少大佬分享他们的代码片段,可以去偷师学艺。有时候你会发现一些超赞的创意. 版本控制: 把你的代码片段文件加入版本控制。我就把我的片段放在一个 Git 仓库里,这样换电脑时也不怕丢失. 定期清理: 时不时清理一下你的代码片段。删掉那些你不再用的,更新那些需要改进的。保持你的片段库整洁有序. 记住, 代码片段的强大之处在于它能让你的编码更快、更准、更一致. 但是,就像所有的工具一样,关键在于怎么用. 别怕尝试和实验,找到最适合你的方式. 随着你越来越熟悉代码片段,你会发现自己的生产力显著提高. 你会有更多的时间和精力专注于解决真正的问题,而不是被繁琐的细节所困扰. 别忘了分享是进步的阶梯. 如果你创建了一些超赞的代码片段,不妨和你的同事或者更大的开发者社区分享. 好了, vscode 代码片段武林秘籍已经传授完毕,现在就看你自己的了. 记住, 实践出真知. 祝你 Coding 愉快, 生产力飞起!✨🚀 。 感谢阅读,我们下次再见! 。前言
“
代码片段是啥玩意儿?
为啥要用这玩意儿?
怎么整一个自己的代码片段?
Ctrl+Shift+P
(Mac 上是
Cmd+Shift+P
)。
snippets
",选择
Preferences: Configure User Snippets。
JavaScript
。
JSON
文件,这就是你的代码片段配置文件。
{
"Console log": {
"prefix": "clog",
"body": ["console.log('$1');", "$2"],
"description": "打印日志到控制台"
}
}进阶技巧
1. 占位符和制表位
$1
,
$2
,
$3
等:这些是最简单的占位符。插入片段后,光标会先停在
$1
的位置,按
Tab
键后跳到
$2
,以此类推。
$0
:这是最后一个制表位。无论你定义了多少个占位符,
$0
永远是终点站。
"Basic Function": {
"prefix": "func",
"body": [
"function ${1:functionName}(${2:params}) {",
"\t$0",
"}"
],
"description": "创建一个基本函数"
}"Console Log": {
"prefix": "clog",
"body": "console.log('${1:你好,世界!}');",
"description": "打印日志,带默认值"
}"Variable Declaration": {
"prefix": "vard",
"body": "${1|const,let,var|} ${2:变量名} = ${3:值};",
"description": "声明变量,可选择const/let/var"
}2. 变量
$TM_FILENAME
: 当前文件的文件名
$TM_FILENAME_BASE
: 当前文件的文件名(不含扩展名)
$TM_DIRECTORY
: 当前文件所在的目录
$TM_FILEPATH
: 当前文件的完整文件路径
$CLIPBOARD
: 当前剪贴板中的内容
$WORKSPACE_NAME
: 打开的工作区的名称
$CURRENT_YEAR
: 当前年份
$CURRENT_MONTH
: 当前月份(两位数格式)
$CURRENT_DATE
: 当前日期(两位数格式)
$CURRENT_HOUR
: 当前小时(24 小时制)
$CURRENT_MINUTE
: 当前分钟
$CURRENT_SECOND
: 当前秒数
"File Header": {
"prefix": "header",
"body": [
"/**",
" * 文件名: $TM_FILENAME",
" * 创建时间: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND",
" * 作者: ${1:$TM_USERNAME}",
" * 描述: ${2:这里写文件描述}",
" */"
],
"description": "插入文件头注释"
}
/**
* 文件名: app.js
* 创建时间: 2023-08-29 15:30:00
* 作者: YourUsername
* 描述: 这里写文件描述
*/3. 转换
${VAR/(.*)/${1:/upcase}}
:转换为大写
${VAR/(.*)/${1:/downcase}}
:转换为小写
${VAR/(.*)/${1:/pascalcase}}
:转换为帕斯卡命名法(
PascalCase
)
${VAR/(.*)/${1:/camelcase}}
:转换为驼峰命名法(
camelCase
)
"React Component": {
"prefix": "rcomp",
"body": [
"import React from 'react';",
"",
"const ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} = () => {",
"\treturn (",
"\t\t<div>",
"\t\t\t$0",
"\t\t</div>",
"\t);",
"};",
"",
"export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/};"
],
"description": "创建 React 组件,自动使用文件名作为组件名"
}
import React from 'react';
const App = () => {
return <div>$0</div>;
};
export default App;4. 嵌套占位符
"Conditional Statement": {
"prefix": "ifelse",
"body": [
"if (${1:条件}) {",
"\t${2:// 条件成立时的代码}",
"} else {",
"\t${2/^(.*)$/$1/}",
"}"
],
"description": "创建 if-else 语句,自动复制 if 块的注释到 else 块"
}
if (条件) {
// 条件成立时的代码
} else {
// 条件成立时的代码
}实用的代码片段例子
React Hooks
组件:
"React Hooks Component": {
"prefix": "rhc",
"body": [
"import React, { useState, useEffect } from 'react';",
"",
"const ${1:ComponentName} = () => {",
"\tconst [${2:state}, set${2/(.*)/${1:/capitalize}/}] = useState(${3:initialState});",
"",
"\tuseEffect(() => {",
"\t\t$0",
"\t}, []);",
"",
"\treturn (",
"\t\t<div>",
"\t\t\t{${2:state}}",
"\t\t</div>",
"\t);",
"};",
"",
"export default ${1:ComponentName};"
],
"description": "创建一个带有 useState 和 useEffect 的 React 组件"
}
import React, { useState, useEffect } from 'react';
const ComponentName = () => {
const [state, setState] = useState(initialState);
useEffect(() => {}, []);
return <div>{state}</div>;
};
export default ComponentName;
异步函数
:
"Async Function": {
"prefix": "afn",
"body": [
"async function ${1:functionName}(${2:params}) {",
"\ttry {",
"\t\tconst result = await ${3:asyncOperation};",
"\t\treturn result;",
"\t} catch (error) {",
"\t\tconsole.error('Error in ${1:functionName}:', error);",
"\t\tthrow error;",
"\t}",
"}"
],
"description": "创建一个带有错误处理的异步函数"
}小贴士
总结
最后此篇关于VSCode代码片段指南:从基础到高级技巧的文章就讲到这里了,如果你想了解更多关于VSCode代码片段指南:从基础到高级技巧的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
vue3 快速入门系列 - 基础 前面我们已经用 vue2 和 react 做过开发了。 从 vue2 升级到 vue3 成本较大,特别是较大的项目。所以许多公司对旧项目继续使用vue2,新项目则
C# 基础 C#项目创建 这里注意win10虚拟机需要更新下补丁,不然直接下载visual studio 2022会显示版本不支持 HelloWorld C#的类文件都是以.cs结尾,入口方法为sta
关于 iPhone 内存管理的非常基本的问题: 假设我有一个 viewController,其中有几个 subview 也由 viewController 控制。当我删除顶部 viewControll
我仍在努力适应指针。不是概念——我理解内存位置、匹配可变长度的指针增量等——这是语法。这是一个我认为是我感到困惑/无法直观把握的原因之一: int a = 42; 在一个int大小的内存空间中分配并放
1. 简介 Kafka(Apache Kafka) 是一种分布式流数据平台,最初由LinkedIn开发,并于后来捐赠给Apache软件基金会,成为了一个Apache顶级项目。它被设计用于处理大规
1.想要在命令提示符下操作mysql服务器,添加系统变量。(计算机-系统属性——环境变量——path) 2.查询数据表中的数据; select selection_lis
MySQL表的增删改查(基础) 1. CRUD 注释:在SQL中可以使用“–空格+描述”来表示注释说明 CRUD 即增加(Create)、查询(Retrieve)、更新(Update)、删除(Dele
我有一个网页,可以在加载时打开显示模式,在这个模式中,我有一个可以打开第二个模式的链接。当第二个模式关闭时(通过单击关闭按钮或单击模式外部),我想重新打开第一个模式。 对于关闭按钮,我可以通过向具有
使用 Core Data Fetched Properties,我如何执行这个简单的请求: 我希望获取的属性 ( myFetchProp ) 存储 StoreA ,它应该这样做: [myFetchPr
关闭。这个问题是opinion-based .它目前不接受答案。 想改进这个问题?更新问题,以便 editing this post 可以用事实和引用来回答它. 8年前关闭。 Improve this
最近,我得到了一个现有的Drupal项目,并被要求改进前端(HTML,JavaScript,CSS)。我在Django,PHP,Ruby等方面具有大量的前端和后端开发经验,但是我没有任何Drupal经
我试图让我的用户通过使用扫描仪类来决定要做什么,但我有一个问题,代码一旦运行就不会激活,并且它不会让我跳过任何行。我的代码如下所示: Scanner input = new Scanner(S
对模糊的标题表示歉意,因为我想不出这个名字是什么。 基本上创建一个计算学生财务付款的小程序。当我运行它时,它计算对象限额没有问题。然而,无论我尝试什么,对象“助学金”似乎除了 0 之外什么也没有提出。
这是我的代码 - main() { double x; double y = pow(((1/3 + sin(x/2))(pow(x, 3) + 3)), 1/3); prin
如果我的术语在这个问题上有误,我们深表歉意。 采取以下功能: i = 1; v = i * 2; for (j = 0; j < 4; j++ ) { console.log(v);
我的应用程序中有不同的类文件。我有 5 个类,其中 2 个是 Activity ,1 个是运行的服务。其他 2 个只是类。这两个类中变量的生命周期是多少。我知道一个 Activity 可以被操作系统杀
例如,一个方法返回一个 List 类型的对象。 public List bojangles () ... 一些代码调用方法FooBar.bojangles.iterator(); 我是 Java 的新
我遇到了一个奇怪的问题,网格的大小不适合我的屏幕。当我使用 12 列大时,它只占据屏幕的 1/3 的中间,请参见图像。我不确定是什么导致了这个问题。我没有任何会导致这种情况发生的奇怪 CSS。我不会在
我尝试使用头文件和源文件,但遇到了问题。因此,我对我正在尝试做的事情做了一个简化版本,我在 CodeBlocks 中遇到了同样的错误(undefined reference to add(double
我正在为我的网格系统使用基础,但这在任何网格系统中都可能是一个问题。我基本上用一个容器包裹了 3 个单元格,但其中一个单元格应该长到页面边框(留在我的 Sampe-Image 中)但这也可能在右侧)。
我是一名优秀的程序员,十分优秀!