VSCode配置用戶代碼片段

打開配置文件

  1. 文件 > 首選項 > 用戶代碼片段 或者 打開命令面板(Command + Shift + P)鍵入用戶代碼片段
  2. 鍵入你要配置的腳本語言如javascript,或者選擇創建全局代碼片段,也可以爲當前項目配置專用的片段
    打開用戶代碼片段配置文件

配置代碼片段

打開配置文件javascript.json,裏面已經有示例代碼:

    // "Print to console": {
    //  "prefix": "clog",
    //  "body": [
    //      "console.log('$1');",
    //      "$2"
    //  ],
    //  "description": "Log output to console"
    // }

參數說明:

  1. Prefix 是使用代碼片段時的前綴
  2. Body 是代碼片段的內容
  3. Description 是代碼片段描述
    配置用戶代碼片段

實例

例如我自己配置的一段js

"reactComponent": {
		"prefix": "rc",
		"body": [
			"'use strict';",
			"import React, { Component } from 'react';",
			"import styles from './index.less';",
			"import _ from 'i18n';",
			"",
			"export default class ${1:Home} extends Component {",
			"	constructor(props) {",
			"		super(props);",
			"		this.state = {",
			"			$2",
			"		}",
			"	}",
			"",
			"	componentDidMount() {",
			"		",
			"	}",
			"",
			"	render() {",
			"		return <div className={styles.container}>",
			"				$0",
			"			</div>;"
			"	}",
			"}",
		],
		"description": "new React Component"
	}

參數說明
${1:Home} 1表示光標第一次所在的位置,Home是默認值,默認第一次會高亮選中Home,方便修改,如果不修改,用TAB可以跳到$2的位置,依次跳轉,直到最後光標定位在$0的位置

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章