VSCode自定义代码片段集合

最新推荐文章于 2023-11-29 10:39:36 发布

想必是渣渣宇了

最新推荐文章于 2023-11-29 10:39:36 发布

阅读量257

点赞数

分类专栏： VSCode 文章标签： vscode

本文链接：https://blog.csdn.net/weixin_44205605/article/details/113844136

版权

VSCode 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML

指令为 html

{
  "Print to console": {
    // "scope": "javascript,typescript",
    "prefix": "html", //快捷键
    "body": [
      "<!DOCTYPE html>",
      "<html lang=\"en\">",
      "",
      "<head>",
      "  <meta charset=\"UTF-8\">",
      "  <meta name=\"viewport\"",
      "    content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,user-scalable=no\">",
      "  <title>page</title>",
      "  <link rel=\"stylesheet\" href=\"\">",
      "</head>",
      "<style>",
      "",
      "</style>",
      "",
      "<body>",
      "  <div class=\"\">",
      "  </div>",
      "</body>",
      "",
      "<script>",
      "</script>",
      "",
      "</html>"
    ],
    // "description": "Log output to console"
    "description": "vue html template"
  }
}

Vue

指令为 vue

{
  "Print to console": {
      "prefix": "vue",
      "body": [
          "<template>",
          "  <div class='$2'>$5</div>",
          "</template>",
          "",
          "<script>",
          "export default {",
          "  name: '',",
          "  components: {},",
          "  data() {",
          "    return {}",
          "  },",
          "  computed: {},",
          "  watch: {},",
          "  beforeCreate() {},",
          "  created() {},",
          "  beforeMount() {},",
          "  mounted() {},",
          "  methods: {},",
          "  beforeUpdate() {},",
          "  updated() {},",
          "  beforeDestroy() {},",
          "  destroyed() {}",
          "}",
          "</script>",
          "<style lang='scss'>",
          "$4",
          "</style>",
          "<style lang='scss' scoped>",
          "$4",
          "</style>"
      ],
      "description": "Log output to console"
  }
}

react

指令为 react-mobile

{
  "Import React": {
    "prefix": "react-mobile",
    "body": [
      "import React, { Component, useState, useEffect } from 'react'",
      "import { withRouter } from 'react-router-dom'\n",
      "import './index.css'\n",
      "import request from '../../utils/request'",
      "import APPMethod from '../../utils/appInteractive'\n",
      "class Page extends Component {",
      "  constructor(props) {",
      "    super(props)",
      "    this.state = {",
      "    }",
      "  }",
      "  componentDidMount(){",
      "  }",
      "  render () {",
      "    return (",
      "       <div className='page-wrap'>",
      "       </div>",
      "    )",
      "  }",
      "}\n",
      "export default Page\n",
      "\n",
      "//HOOK写法",
      "/*",
      "function Page() {",
      "  let [pageData, setPageData] = useState(null)",
      "  useEffect(()=>{",
      "  }, [])",
      "  return (",
      "    <div className='page-wrap'>",
      "      <div className='container'>",
      "      </div>",
      "    </div>",
      "  )",
      "}\n",
      "export default Page",
      "*/",

    ],
    "description": "引入React基本组件"
  },
  "Import PropTypes": {
    "prefix": "importproptypes",
    "body": [
      "import PropTypes from 'prop-types'"
    ],
    "description": "引入prop-types"
  },
  "Define defaultProps": {
    "prefix": "defaultProps",
    "body": [
      "static defaultProps = {",
      "  $1",
      "}\n"
    ]
  }
}

用户代码片段嘛，大概就这个样子，复制粘贴即可。
不同的代码片段只能在当下文件内才可以触发指令。
未来不定期更新其余代码片段。

如果转载，请标明地址，谢谢。

想必是渣渣宇了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
VSCode自定义代码片段集合

HTML指令为 html{ "Print to console": { // "scope": "javascript,typescript", "prefix": "html", //快捷键 "body": [ "<!DOCTYPE html>", "<html lang=\"en\">", "", "<head>", " <meta charset=\"UTF-8\"&
复制链接

扫一扫