search
HomeDevelopment ToolsVSCodeHow vscode customizes code snippets to improve coding efficiency

本篇文章给大家介绍一下如何在vscode中设置自定义代码片段,如何用代码片段大幅提升编码效率,希望对大家有所帮助!

How vscode customizes code snippets to improve coding efficiency

vscode是前端开发人员非常喜欢的开发工具,它功能强大,支持丰富的定制功能。所谓“工欲善其事,必先利其器”,把自己使用的开发工具用活用好是非常有必要的。【推荐学习:《vscode教程》】

1简介

本文介绍了如何在vscode中设置自定义代码片段,以提升代码输入效率。

这是一个基础功能,与你写什么语言的代码无关。所有使用vscode的人都可以阅读。

2主要内容

•如何定义代码段•如何使用代码段•代码段中的高级用法

3如何定义代码段

代码片断之所能加快代码录入,其基本思路是预先编辑好一段代码,这段代码使用的频率非常高,字符内容也很长。通过在编辑器输入某个特定的,较短的字符就直接得到这段长代码。

所以最重要的步骤就是定义这个映射关系。

3.1确定语言,创建对应的json文件

在vscode中 ,打开命令:

文件>首选项>用户代码片段

此时,会弹出一个对话框,如下:

How vscode customizes code snippets to improve coding efficiency

如果你已经创建过针对某个语言类型的代码片段则会出现在“已有代码片段”中,如果你之前没有创建过,则会出现在“新代码片段”。创建过的代码片段会保存你的电脑中的C:\Users\你的用户名\AppData\Roaming\Code\User\snippets目录下(win10操作系统,其它可自行查找),你可以去打开看看。这个里面就保存着自定义的代码片断的内容。

其中:

javascript.json表示这个文件中的代码片段只有当你编辑.js文件时才能使用。

html.json表示在编辑.html文件时才能使用。其它类似。

我们假设你之前没有定义过css.json这个代码片段,所以你可以选中css.json 这个栏目,会进入对这个文件的编辑状态。

3.2编辑代码片段-json文件

代码片段对应的是一个json文件。默认情况下它的内容是注释了的,注释的内容就是对代码片段用法的说明。如下:

{   
// Place your snippets for css here. Each snippet is defined under a 
   snippet name and has a prefix, body and     
// description. The prefix is what is used to trigger the snippet and the
   body will be expanded and inserted. Possible variables are:    
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, 
   ${2:another} for placeholders. Placeholders with the     
// same ids are connected.   
// 示例:    
// "片段名": {    
//     "prefix": "此片段触发关键字",    
//     "body": [    
//         "代码段中第一行",    
//         "代码段中第二行"    
//     ],    
//     "description": "对此代码段的说明"    
// }
}

说明:

prefix :呼出代码片段的关键字,输入此内容就可以调出代码片段。

body:代码段的主体.需要编写的代码放在这里,

description :代码段描述。输入prefix后编辑器显示的提示信息。

下面是一个简单的示例。编辑css.json的内容如下:

{
   "文本居中": {
         "prefix": "tc",       
         "body": [ 
         "text-align:center;"
        ],       
         "description": "文本居中"    
}
}

它的功能是在编辑.css文件时,输入tc这两个字符快速生成text-align:center;这句代码。

如果你还想定义第二个片段就继续在后面补充。例如:

{   
"文本居中": {
        "prefix": "tc",
         "body": [
         "text-align:center;"
          ],       
         "description": "文本居中"    
   },    
"文本居右": {
         "prefix": "tr",
         "body": [
             "text-align:right;"        
          ],       
          "description": "文本居右"    
   }
}

4如何使用代码片段

当你完成上述css.json的编辑后:

1.保存css.json文件。

2.打开或者创建一个css文件。

3.在css文件中输入tc就可以看到效果了。

How vscode customizes code snippets to improve coding efficiency

注意,编辑其它类型的文件时,这个代码片段并不会触发。

5代码片段中的高级用法

5.1 光标控制

生成代码片段之后,默认情况下鼠标的光标在代码段结束的最后位置,如果你希望定制光标的行为可以采用如下的设置:

1:生成代码片段后鼠标所在的初始位置。•1:生成代码片段后鼠标所在的初始位置。•2:生成代码片段后鼠标所在的第2个位置。tab键可进行快速切换,还可以有3,3,4,5.....5.....•0:通过tab键切换光标时,光标最终的位置。•有多个n:表示光标同时定位在多处,你可以多处同时编辑。•n: 表示光标同时定位在多处,你可以多处同时编辑。•{1:字符} :生成代码段后光标的初始位置(其中1表示光标开始的序号,字符表示生成代码后光标会直接选中字符。)

下面是一个示例:

 // 省略其它   
 "注释": {
       "prefix": "zs",        
        "body": [            
            "/*-----------$1开始-------------*/",            
            "$2",            
             "/*-----------$1结束-------------*/",        
         ],        
       "description": "注释"    },复制代码

当你编辑css文件时,输入zs后,按下回车:

The cursor will be at $1. Note that there will be two cursors here, which means you can edit two places at the same time.

Press tab once and the cursor will be positioned at $2.

The rendering is as follows:

How vscode customizes code snippets to improve coding efficiency

5.2 Special characters

If the code snippet contains special characters, \ must be Escape:

Line break effect: \r or \n

Indentation effect: \t. Represents the indentation of a tab key.

6 Summary

Key points:

Customized code snippets can greatly improve work efficiency: generate a longer piece of code with less code.

The example in this article is set for css code. The modified file is the css.json file. In the same way, you can set code segments used in other languages.

The performance result of the code snippet is a json file. By releasing this file, you can share your code snippet with others.

For more programming-related knowledge, please visit: Introduction to Programming! !

The above is the detailed content of How vscode customizes code snippets to improve coding efficiency. For more information, please follow other related articles on the PHP Chinese website!

Statement
This article is reproduced at:掘金社区. If there is any infringement, please contact admin@php.cn delete
手把手带你会习VSCode debug,不信你还不会!手把手带你会习VSCode debug,不信你还不会!Mar 31, 2022 pm 08:45 PM

2022年了,该学会用VSCode debug了!下面本篇文章手把手带大家会习VSCode debug,希望对大家有所帮助!

浅析VSCode怎么关闭自动更新浅析VSCode怎么关闭自动更新Jun 02, 2022 pm 12:56 PM

VSCode怎么关闭自动更新?下面本篇文章给大家介绍一下VSCode关闭自动更新的方法,希望对大家有所帮助!

手把手带你在VSCode中配置 Geant4 和 Root手把手带你在VSCode中配置 Geant4 和 RootApr 25, 2022 pm 08:57 PM

本篇是VSCode配置文章,手把手教大家怎么在VSCode​中配置使用 Geant4 和 Root,希望对大家有所帮助!

23个提高开发效率的前端VSCode插件(快来收藏)23个提高开发效率的前端VSCode插件(快来收藏)Jul 25, 2022 pm 08:06 PM

本篇文章给大家分享23个前端VSCode插件,助你提高开发效率,让你事半功倍,快来收藏吧!

扒一扒vscode Prettier选项中的16个实用属性,让代码变美!扒一扒vscode Prettier选项中的16个实用属性,让代码变美!May 03, 2022 am 10:00 AM

本篇文章扒拉一下vscode Prettier的选项,总结分享16个让你的代码变漂亮的属性,希望对大家有所帮助!

总结分享12个好玩有趣的 VSCODE 插件总结分享12个好玩有趣的 VSCODE 插件May 27, 2022 am 11:06 AM

“工欲善其事,必先利其器!”,vscode作为前端开发的重要工具,其插件能大幅提升战斗力,精心收集12个插件,总有几款你还未曾拥有。

VSCode中如何开发uni-app?(教程分享)VSCode中如何开发uni-app?(教程分享)May 13, 2022 pm 08:11 PM

VSCode中如何开发uni-app?下面本篇文章给大家分享一下VSCode中开发uni-app的教程,这可能是最好、最详细的教程了。快来看看!

手把手教你在VScode中配置C/C++环境(Win下)手把手教你在VScode中配置C/C++环境(Win下)Oct 10, 2022 pm 06:52 PM

VScode中怎么开发置C/C++?怎么配置C/C++环境?下面本篇文章给大家分享一下Windows系统下VScode配置C/C++环境图文教程,希望对大家有所帮助!

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

EditPlus Chinese cracked version

EditPlus Chinese cracked version

Small size, syntax highlighting, does not support code prompt function

DVWA

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

Atom editor mac version download

Atom editor mac version download

The most popular open source editor