vscode js 實用的代碼片段

wuyangchun 發布于2019-08-23 17:13 / 2105人閱讀

摘要：目的是為了減少工作量。入口在選擇圖示的文件，那么這里就是可以自定義的代碼片斷的地方。我舉一個例子你們就明白了，看代碼打印在這段代碼中，是指你要提示的代碼前綴，效果如圖第二個就是我們自定義的代碼片段選擇之后的效果這個就是我們在代碼中定義的。

作為一名前端開發工程師，我們每天都想著代碼怎么抽成組件，公共方法。目的是為了減少工作量。
但是你有沒有想過我們一直在寫重復的代碼，比如每天都會寫

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
);"
    }
}

后續還會更新。記得收藏哦。

云服務器 GPU云服務器 js代碼片段超實用的代碼段 php實用的一些代碼代碼片段

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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