如何在VScode中自定义代码模板

前言

使用VScode三年了，深刻感受了用它在开发代码时的方便。从最初的直接开发html，到后面的 react-native，再到后面的 Vue，用起来可谓是得心应手。其中很有意思的一个功能是在初始化文件模板时：

在写html时，只需要新建一个后缀为.html的文件，在文件内的头部输入一个 ! 感叹号，然后按一下Enter 键，就可以完成一个 html 模板的初始化创建。
在写 react-native 时，只需要创建一个后缀为 .js 的文件，然后在文件内的头部输入 rnc，然后再按 Enter键，就可以创建一个 react-native 初始化模板。
在写 vue 时，只需要创建一个后缀为 .vue 的文件，然后在文件内的头部输入一个 v，然后按 Enter 键，就可以完成一个 Vue 单文件组件的创建。

好奇的我，在写react 的 stateless时，也想试试能不能自定义模板，结果一查，果然，还真的可以，这用了这么多年的 VScode，这么好的功能居然自己没有用到过，感觉像的白用了。

那么，具体应该怎么做呢？

方法

macOS

点击 Code > preferences > User Snippets，选择 New global Snippets file，打开的文件中，已经有一些模板了，模板如果下：

{
 // Place your snippets for javascriptreact 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.
 // Example:
 // "Print to console": {
 //  "prefix": "log",
 //  "body": [
 //   "console.log('$1');",
 //   "$2"
 //  ],
 //  "description": "Log output to console"
 // }
}

其中，prefix 是我们输入快捷的命令，body 就是我们输入了快捷后，按 Enter后要显示的内容。

好了，话不多说，删除多余的注释，咱们来写一个我们需要用到的 react stateless模板吧！

{
 "react stateless component": {
  "scope": "javascript,typescript",
  "prefix": "srnc",
  "body": [
   "import React from 'react'",
   "import PropTypes from 'prop-types'",
   "import { View, Text, StyleSheet, TouchableOpacity } from 'react-native'",
   "",
   "const $1 = props => {",
   "  const { $2 } = props",
   "  return (",
   "    <View style={styles.container}>",
   "      <TouchableOpacity>",
   "        <Text>{$2}</Text>",
   "      </TouchableOpacity>$0",
   "    </View>",
   "  )",
   "}",
   "",
   "$1.propTypes = {",
   "  $2: PropTypes.string,",
   "}",
   "",
   "const styles = StyleSheet.create({",
   "  container: {",
   "    flex: 1,",
   "  },",
   "})",
   "",
   "export default $1",
   "",
  ],
  "description": "react stateless component"
 }
}