VSCode配置用户代码片段

打开配置文件

  1. 文件 > 首选项 > 用户代码片段 或者 打开命令面板(Command + Shift + P)键入用户代码片段
  2. 键入你要配置的脚本语言如javascript,或者选择创建全局代码片段,也可以为当前项目配置专用的片段
    VSCode配置用户代码片段_第1张图片

配置代码片段

打开配置文件javascript.json,里面已经有示例代码:

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

参数说明:

  1. Prefix 是使用代码片段时的前缀
  2. Body 是代码片段的内容
  3. Description 是代码片段描述
    VSCode配置用户代码片段_第2张图片

实例

例如我自己配置的一段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 
", " $0", "
;"
" }", "}", ], "description": "new React Component" }

参数说明
${1:Home} 1表示光标第一次所在的位置,Home是默认值,默认第一次会高亮选中Home,方便修改,如果不修改,用TAB可以跳到$2的位置,依次跳转,直到最后光标定位在$0的位置

你可能感兴趣的:(开发工具)