VSCode自定义代码片段

文件-首选项-配置用户代码片段-新代码片段

vue

{
    "vue-template": {
      "prefix": "vue",
      "body": [
        "<template>",
        "  <div class=\"$1\">",
        "",
        "  </div>",
        "</template>",
        "",
        "<script>",
        "export default {",
        "  name: '$1',",
        "  components: {",
        "",
        "  },",
        "  data() {",
        "    return {",
        "",
        "    }",
        "  },",
        "  created() {",
        "",
        "  },",
        "  computed: {",
        "",
        "  },",
        "  watch: {",
        "",
        "  },",
        "  mounted() {",
        "",
        "  },",
        "  methods: {",
        "",
        "  }",
        "}",
        "</script>",
        "",
        "<style lang=\"\" scoped>",
        "  .$1{",
        "",
        "  }",
        "</style>",
        "}",
      ],
      "description": "my vue template"
    }
  }

 

react-model

{
    "react-model-template": {
        "prefix": "react-model",
        "body": [
            "import { handleError, transformListPagination } from '@/utils/utils';",
            "import { ",
            "",
            "} from '../service'",
            "",
            "export default {",
            "  namespace: '$1',",
            "  state: {",
            "",
            "  },",
            "  effects: {",
            "",
            "  },",
            "  reducers: {",
            "    save(state, { payload }) {",
            "      return {",
            "        ...state,",
            "        ...payload",
            "      }",
            "    }",
            "  }",
            "}",
        ],
        "description": "models index.js"
    }
}

 

service-url

{
    "service-url-template": {
        "prefix": "service-url",
        "body": [
            "// remark",
            "export async function $1(params) {",
            "  return request(`${baseUrl}/url?${stringify(params)}`)",
            "}"
        ],
        "description": "service url"
    }
}

 

service-body

{
    "service-body-template": {
        "prefix": "service-body",
        "body": [
            "// remark",
            "export async function $1(params) {",
            "  return request(`${baseUrl}/role/addRole`, {",
            "    method: 'POST',",
            "    body: params",
            "  })",
            "}"
        ],
        "description": "service body"
    }
}

 

react

{
    "react-template": {
        "prefix": "react",
        "body": [
            "import React, { Component, Fragment } from 'react';",
            "import PropTypes from 'prop-types';",
            "",
            "class \"$1\" extends Component {",
            "",
            "  constructor(props) {",
            "    super(props);",
            "    this.state = {",
            "    };",
            "  }",
            "",
            "  // 在组件即将被挂载到页面的时刻，自动执行",
            "  componentWillMount() {",
            "  }",
            "",
            "  // 组件被更新之前，自动执行",
            "  shouldComponentUpdate(nextProps, nextState) {",
            "    return true;",
            "  }",
            "",
            "  render() {",
            "    return (",
            "      <div>",
            "        \"$1\"",
            "      </div>",
            "    )",
            "  }",
            "",
            "  // 在组件被挂载到页面之后，自动执行",
            "  componentDidMount() {",
            "    // ajax",
            "  }",
            "",
            "}",
            "",
            "// https://zh-hans.reactjs.org/docs/typechecking-with-proptypes.html",
            "\"$1\".propTypes = {",
            "}",
            "\"$1\".defaultProps = {",
            "}",
            "",
            "export default \"$1\""
        ],
        "description": "my react template"
    }
}

 

react-func

{
    "react-func-template": {
        "prefix": "react-func",
        "body": [
            "import { useState, Fragment, useEffect, useRef } from 'react';",
            "import { Card,Input,Button,Modal,Icon,Select,message,DatePicker, } from 'antd';",
            "import router from 'umi/router';",
            "import { connect } from 'dva';",
            "import moment from 'moment';",
            "import ShowTable from '@/components/ShowTable';",
            "import PageHeaderWrapper from '@/components/PageHeaderWrapper';",
            "import { momentTime } from '@/utils/utils';",
            "",
            "export default connect(({ $1 }) => {",
            "  return { $1 };",
            "})(props => {",
            "  const {",
            "    $1: { },",
            "    dispatch,",
            "  } = props;",
            "",
            "  const [selectedRows, setSelectedRows] = useState([]);",
            "",
            "  const getData = () => {",
            "    dispatch({",
            "      type: '$1/getData',",
            "      payload: {",
            "      ",
            "      },",
            "    });",
            "  };",
            "",
            "  useEffect(() => {",
            "    getData();",
            "  }, []);",
            "",
            "  return (",
            "    <PageHeaderWrapper>",
            "      ",
            "    </PageHeaderWrapper>",
            "  );",
            "});",
        ],
        "description": "函数式组件"
    }
}

 

react-func-modal

import { useState, Fragment, useEffect, useRef } from 'react';
import { Card,Input,Button,Modal,Icon,Select,message,DatePicker,Form } from 'antd';
import router from 'umi/router';
import { connect } from 'dva';
import moment from 'moment';
import ShowTable from '@/components/ShowTable';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { momentTime } from '@/utils/utils';

const FormItem = Form.Item;
const { Option } = Select

export default connect(({ resManagement }) => {
  return { resManagement };
})(Form.create()(props => {
  const {
    modalVisible,
    modalType,
    handleChancle,
    handleOk,
    resManagement: { selectedNode },
    form: { getFieldDecorator, validateFields },
    dispatch,
  } = props;

  const [formData, setFormData] = useState({});

  useEffect(() => {

  }, []);

  return (
    <Modal
      title={`${modalType}`}
      visible={modalVisible}
      destroyOnClose={true}
      onCancel={handleChancle}
      onOk={() => {
        validateFields(async (err, values) => {
          if (!err) {
            handleOk();
          }
        });
      }}
    >
      <Form
        labelCol={{
          xs: { span: 4 },
          sm: { span: 4 },
        }}
        wrapperCol={{
          xs: { span: 16 },
          sm: { span: 16 },
        }}
      >
        <FormItem label='名称'>
          {getFieldDecorator('name', {
            rules: [
              {
                required: true,
                message: '至少输入1个字',
              },
              {
                max: 20,
                message: '不能超过20个字',
              },
            ],
            initialValue: modalType == '新增' ? '' : (selectedNode?.name || '')
          })(<Input placeholder="请输入名称" />)}
        </FormItem>
      </Form>
    </Modal>
  );
}));