VSCode设置与删除代码模板(vue和react为例)
前言:在我们做开发中,免不了会偷个懒,节省自己的写代码的时间。想通过一些快捷键直接把想要的模板对象创建出来。今天给大家详细的写下,在VSCode中怎样去设置代码模板。步骤:①:找到VSCode里的左上角的文件,然后点击,找到列表里的首选项,在首选项里会看到用户代码片段②:然后进行设置,自己的代码片段。下面我以react为例进行解释。(直接从上面第②步开始)大家如果想看Vue的可...
·
前言:在我们做开发中,免不了会偷个懒,节省自己的写代码的时间。想通过一些快捷键直接把想要的模板对象创建出来。今天给大家详细的写下,在VSCode中怎样去设置代码模板。
步骤:
①:找到VSCode里的左上角的文件,然后点击,找到列表里的首选项,在首选项里会看到用户代码片段
②:然后进行设置,自己的代码片段。
下面我以react为例进行解释。(直接从上面第②步开始)
Vue的代码段生成:
①:找到左下角设置中的用户代码段
②:在弹框搜索vue.json.code-snippets,没有的话会自动创建
③:把默认的删除,将下面的粘贴进去保存
{
"Print to console": {
"prefix": "vue",
"body": [
"<!-- $0 -->",
"<template>",
" <div></div>",
"</template>",
"",
"<script>",
"export default {",
" data () {",
" return {",
" };",
" },",
"",
" components: {},",
"",
" mounted: {},",
"",
" methods: {}",
"}",
"",
"</script>",
"<style lang='less' scoped>",
"</style>"
],
"description": "Log output to console"
}
}
④:在vue模板使用,直接vue
react的模板生成步骤
点击用户代码片段VSCode会弹出下面的框,根据自己的需要进行选择不同代码段类型
选择好会看到VSCode上面有一行显示下面的样式(我选的是jsx结尾的)
最后把下面的代码拷贝进去,Ctrl+S保存就好了
{
"Print to console": {
"scope": "javascript,typescript",
"prefix": "react",
"body": [
"import React, { Component } from 'react'",
"export default class ClassName extends Component {",
"constructor(props) {",
"super(props);",
"this.state = {}",
"}",
"render() {",
"return (<div></div>);",
"}",
"}",
],
"description": "Log output to console"
}
}
最后怎样使用呢
直接在你建的jsx文件中react+Tab键就OK啦!
效果图
删除代码段
最后再给大家补充一点,怎样删除自己建的代码模板:也是我自己尝试无意中发现的
如果想删除自己创建的代码模板,在用户代码段里直接把粘贴代码清空保存就好了。
更多推荐
已为社区贡献4条内容
所有评论(0)