vscode js 实用的代码片段

wuyangchun 发布于2019-08-23 17:13 / 1962人阅读

摘要：目的是为了减少工作量。入口在选择图示的文件，那么这里就是可以自定义的代码片断的地方。我举一个例子你们就明白了，看代码打印在这段代码中，是指你要提示的代码前缀，效果如图第二个就是我们自定义的代码片段选择之后的效果这个就是我们在代码中定义的。

作为一名前端开发工程师，我们每天都想着代码怎么抽成组件，公共方法。目的是为了减少工作量。
但是你有没有想过我们一直在写重复的代码，比如每天都会写

import {xxx} from "antd";

或者

function name() {
    return (
        
            xxxx
        
    )
}

等等。这些代码其实总是一样的，你每天都会去敲，那我们能不能有个快捷键，能帮我们一键生成，而且可以根据我们的定义生成呢？答案是有的，vscode里面的用户代码片段（User Snippets）就帮我们实现这个功能。
入口在file -> preferences -> User Snippets

选择图示的文件，那么这里就是可以自定义的代码片断的地方。
我举一个例子你们就明白了，看代码：

"console": {
    "prefix": "log 打印",
    "body": [
        "console.log("$1");",
        "$2"
    ],
    "description": "Log output to console"
},

在这段代码中，prefix是指你要提示的代码前缀，效果如图：

第二个就是我们自定义的代码片段
选择之后的效果：

这个就是我们在代码中定义的body。
怎么样，方便吧。
在body中还有一些常用的符号：

${1} ${2}：代表着光标跳转的地方，按tab键会直接跳转到你定义的地方，特殊的$0表示光标最后停留的地方
/t /n：分别代码tab缩进，换行

还有一个小问题是自定义的代码提示有时候会在其他代码提示后面，类似：

这就很不爽了，那怎么把它提前呢？
只要在setting.json里面配置

"editor.snippetSuggestions": "top",
"editor.tabCompletion": "on", // 按tab快速补全自定义代码片段

就可以了，效果：

大概就这些啦，还有更详细的你们可以参考文章：
地址

下面贴上本作配置的几个实用的javascript配置：

{
    "console": {
        "prefix": "log 打印",
        "body": [
            "console.log("$1");",
            "$2"
        ],
        "description": "Log output to console"
    },
    "function": {
        "prefix": "function 新建方法",
        "body": "function ${1:name}() {${2}}",
        "description": "方法"
    },
    "import": {
        "prefix": "import 导入资源",
        "body": "import {$0} from "";",
        "description": "导入"
    },
    "react": {
        "prefix": "react 新建类",
        "body": [
            "import React from "react";",
            "",
            "export default class ${1:Name} extends React.Component {${2}}",
        ]
    },
    "return": {
        "prefix": "return 返回组件",
        "body": "return (
	$0
);"
    }
}

后续还会更新。记得收藏哦。

混合云服务器托管 js代码片段超实用的代码段 php实用的一些代码代码片段

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104006.html

VS Code上手与超实用插件安利

摘要：软件跨平台支持以及，运行流畅，可谓是微软的良心之作微软有这个宇宙最强，自然也不会弱宇宙最强编辑器说到代码编辑器，我们有必要提一提还有。原文链接：VS Code上手与超实用插件安利工欲善其事必先利其器 Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号...

miracledan 2019-08-21 17:46 评论0 收藏0
提高 JavaScript 开发效率的高级 VSCode 扩展！

摘要：使用高亮类似的扩展更强大的高亮扩展，具有更多功能。为了检查和检查响应，使用了之类的工具。在这里获取这两个扩展自动闭合标记和自动重命名标记。类似的扩展显示提交历史的精美图表等等。想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！ Quokka.js Quokka.js 是一个用于 JavaScript 和 TypeScript 的实时运行代码平台。这意味着它会实时运行...

zhigoo 2019-08-23 14:00 评论0 收藏0
VS Code配置及插件推荐

摘要：宋体以像素为单位控制字号。将其设置为可隐藏窗格。是否已启用自动刷新是否启用自动拉取以像素为单位控制终端的字号，这是的默认值。要求工作区使用高于版本的。用户设置打开文件 > 首选项 > 用户设置(U)，（忽略覆盖工作区提示） { // 一个制表符等于的空格数。该设置在 `editor.detectIndentation` 启用时根据文件内容进行重写。 editor.tabS...

wpw 2019-08-20 14:42 评论0 收藏0
react开发vscode插件推荐

摘要：开发插件推荐原文地址由于本人主要是做开发，用的代码编辑器是传说中的宇宙第一前端神器所以在这里记录并推荐一些本人开发过程中常用的一些插件帮助开发。最后的最后，我只想说，强无敌，大法好我自己日常开发中使用的扩展 react开发vscode插件推荐原文地址：https://github.com/xieqingtia... 由于本人主要是做react开发，用的代码编辑器是传说中的宇宙第一前端...

Miracle_lihb 2019-08-02 15:40 评论0 收藏0