Emmet
位置
- ctrl + shift + p
- 搜索:
snippets - 输入类型: 比如
html、javascript
目录
Windows: C:\Users\userName\AppData\Roaming\Code\User\snippets
参数说明
-
prefix：使用代码段的快捷入口 -
body：需要设置的代码放在这里,字符串间换行的话使用\r\n换行符隔开.如果值里包含特殊字符需要进行转义,多行代码以","分隔(在引号后面写逗号) -
$0：定义最终光标位置 -
$1：定义第一次光标位置，按tab键可进行快速切换, 还可以有$2,$3,$4,$5... -
description：代码段描述,在使用智能感知时的描述
常用字符说明
-
\\反斜杠 -
\a警告 -
\b退格符 -
\f换页符 -
\n换行符 -
\r回车符 -
\tTab 符 -
\v垂直 Tab 符 -
\u使用数字指定的Unicode 字符, 如\u2000 -
\x使用十六进制数指定的Unicode 字符, 如\xc8 -
\0空值
JavaScript
- javascript.json
{
// 自定义
"箭头函数": {
"prefix": "jt",
"body": [
"($1) => {\r\n\t$2\r\n}"
],
"description": "() => {}"
},
"function": {
"prefix": "fn",
"body": [
"function $1($2) {\r\n\t$3\r\n}"
],
"description": "function () {}"
},
"console.log": {
"prefix": "co",
"body": [
"console.log($1);"
],
"description": "console.log()"
},
"alert": {
"prefix": "al",
"body": [
"alert($1);"
],
"description": "alert()"
},
"on": {
"prefix": "on",
"body": [
"on('click',function () {\r\n\t$1\r\n})"
],
"description": "on"
},
"for": {
"prefix": "fo",
"body": [
"for (let i = 0; i < $1; i++) {\r\n\t$2\r\n}"
],
"description": "for"
},
"if": {
"prefix": "if",
"body": [
"if ($1) {\r\n\t$2\r\n}"
],
"description": "if"
},
"if-else": {
"prefix": "ifel",
"body": [
"if ($1) {\r\n\t$2\r\n} else {\r\n\t$3\r\n}"
],
"description": "if-else"
},
"ajax": {
"prefix": "aj",
"body": [
// "$.ajax({\r\n\turl:$1,\r\n\tdata:{\r\n\t\t$2\r\n\t},\r\n\ttype:'post',\r\n\tdataType:'JSON',\r\n\tsuccess:function (res) {\r\n\t\t$3\r\n\t}\r\n})"
"$.ajax({",
" url: '$1',",
" data:{",
" $2",
" },",
" type: 'post',",
" dataType: 'JSON',",
" success:function(res) {",
" $3",
" }",
"});"
],
"description": "ajax"
},
"axios": {
"prefix": "ax",
"body": [
"axios.$1(`$2`, {",
" $3",
"}).then(res => {",
" console.log(res);",
"}).catch(err => {",
" console.log(err);",
"});",
],
"description": "axios"
}
}
vue
注: 组件/实例的书写顺序参照 Vue 风格指南
- vue.json
{
// 自定义
"vue": {
"prefix": "vue",
"body": [
"",
"<template>",
" <div class=\"$1\">",
" New page",
" </div>",
"</template>",
"",
"<script>",
"export default {",
" name: '$2',",
" components: {},",
" props: {},",
" data() {",
" return {};",
" },",
" computed: {},",
" watch: {},",
" created() {},",
" mounted() {},",
" beforeDestroy() {},",
" methods: {}",
"};",
"</script>",
"",
"<style lang=\"scss\" scoped></style>",
""
],
"description": "Vue templet"
},
"vue3-setup": {
"prefix": "vue3-setup",
"body": [
"",
"<template>",
" <div class=\"$1\">",
" New page",
" </div>",
"</template>",
"",
"<script setup lang=\"ts\"></script>",
"",
"<style lang=\"scss\" scoped></style>",
""
],
"description": "Vue3 templet"
},
"vue3": {
"prefix": "vue3",
"body": [
"",
"<template>",
" <div class=\"$1\">",
" New page",
" </div>",
"</template>",
"",
"<script lang=\"ts\">",
"export default {",
" name: '$2',",
" components: {},",
" props: {},",
" setup() {},",
" data() {",
" return {};",
" },",
" computed: {},",
" watch: {},",
" created() {},",
" mounted() {},",
" beforeUnmount() {},",
" methods: {}",
"};",
"</script>",
"",
"<style lang=\"scss\" scoped></style>",
""
],
"description": "Vue3 templet"
},
"uni": {
"prefix": "uni-app-page",
"body": [
"",
"<template>",
" <view class=\"$1\">",
" New page",
" </view>",
"</template>",
"",
"<script>",
"export default {",
" name: '$2',",
" components: {},",
" props: {},",
" data() {",
" return {};",
" },",
" computed: {},",
" watch: {},",
" onLoad() {},",
" onShow() {},",
" onReady() {},",
" onHide() {},",
" onUnload() {},",
" methods: {}",
"};",
"</script>",
"",
"<style scoped lang=\"scss\">",
"</style>",
""
],
"description": "uni-app-page templet"
}
}
react
- javascriptreact.json
{
// 自定义
"react": {
"prefix": "react",
"body": [
"",
"import React, { Component, Fragment } from 'react';",
"import { withRouter } from 'react-router-dom';",
"",
"class $1 extends Component {",
" static defaultProps = {};",
"",
" constructor(props) {",
" super(props);",
"",
" this.state = {};",
" }",
"",
" componentDidMount() {}",
"",
" componentDidUpdate() {}",
"",
" componentWillUnmount() {}",
"",
" render() {",
" return (",
" <Fragment>$3</Fragment>",
" );",
" }",
"}",
"",
"export default withRouter($2);",
""
],
"description": "React templet"
}
}
- typescriptreact.json
{
// 自定义
"react": {
"prefix": "react",
"body": [
"",
"import React from 'react'",
"import { RouteComponentProps, withRouter } from 'react-router-dom'",
"",
"interface Props extends RouteComponentProps {}",
"",
"class $1 extends React.Component<Props> {",
" /* 静态属性 */",
" static defaultProps = {}",
"",
" /* 构造函数 */",
" constructor(props: Props) {",
" super(props)",
"",
" this.state = {}",
" }",
"",
" /* 生命周期 */",
" componentDidMount() {}",
"",
" componentDidUpdate() {}",
"",
" componentWillUnmount() {}",
"",
" /* Events */",
"",
" /* Methods */",
"",
" render() {",
" return (",
" <>Hello World</>",
" );",
" }",
"}",
"",
"export default withRouter($2);",
""
],
"description": "React TypeScript"
},
// 自定义
"箭头函数": {
"prefix": "jt",
"body": ["($1) => {\r\n\t$2\r\n}"],
"description": "() => {}"
},
"function": {
"prefix": "fn",
"body": ["function $1($2) {\r\n\t$3\r\n}"],
"description": "function () {}"
},
"console.log": {
"prefix": "co",
"body": ["console.log($1);"],
"description": "console.log()"
},
"alert": {
"prefix": "al",
"body": ["alert($1);"],
"description": "alert()"
},
"on": {
"prefix": "on",
"body": ["on('click',function () {\r\n\t$1\r\n})"],
"description": "on"
},
"for": {
"prefix": "fo",
"body": ["for (let i = 0; i < $1; i++) {\r\n\t$2\r\n}"],
"description": "for"
},
"if": {
"prefix": "if",
"body": ["if ($1) {\r\n\t$2\r\n}"],
"description": "if"
},
"if-else": {
"prefix": "ifel",
"body": ["if ($1) {\r\n\t$2\r\n} else {\r\n\t$3\r\n}"],
"description": "if-else"
},
"ajax": {
"prefix": "aj",
"body": [
// "$.ajax({\r\n\turl:$1,\r\n\tdata:{\r\n\t\t$2\r\n\t},\r\n\ttype:'post',\r\n\tdataType:'JSON',\r\n\tsuccess:function (res) {\r\n\t\t$3\r\n\t}\r\n})"
"$.ajax({",
" url: '$1',",
" data:{",
" $2",
" },",
" type: 'post',",
" dataType: 'JSON',",
" success:function(res) {",
" $3",
" }",
"});"
],
"description": "ajax"
},
"axios": {
"prefix": "ax",
"body": [
"axios.$1(`$2`, {",
" $3",
"}).then(res => {",
" console.log(res);",
"}).catch(err => {",
" console.log(err);",
"});"
],
"description": "axios"
}
}
wepy
- 新建全局代码片段文件
{
// 自定义
"wepyPage": {
"prefix": "wepy",
"body": [
"",
"<template>",
" <view class=\"$1\">",
" New page",
" </view>",
"</template>",
"",
"<script>",
"import wepy from 'wepy';",
"",
"export default class $2 extends wepy.page {",
" config = {}",
"",
" components = {}",
"",
" mixins = []",
"",
" data = {}",
"",
" computed = {}",
"",
" watch = {}",
"",
" methods = {}",
"",
" events = {}",
"",
" /* 生命周期 */",
" onLoad() {",
" wx.setNavigationBarTitle({",
" title: '$3'",
" });",
" }",
"",
" // onShow() {}",
"",
" // onReady() {}",
"",
" // onHide() {}",
"",
" // onUnload() {}",
"",
" /* 函数 */",
"}",
"</script>",
"",
"<style lang=\"less\" scoped></style>",
""
],
"description": "WePY templet"
},
"wepyComponent": {
"prefix": "wepyc",
"body": [
"",
"<template>",
"<view class=\"$1\">",
" New Component",
"</view>",
"</template>",
"",
"<script>",
"import wepy from 'wepy';",
"",
"export default class $2 extends wepy.component {",
" config = {}",
"",
" components = {}",
"",
" watch = {}",
"",
" props = {}",
"",
" mixins = []",
"",
" data = {}",
"",
" computed = {}",
"",
" methods = {}",
"",
" events = {}",
"",
" /* 生命周期 */",
" onLoad() {",
" wx.setNavigationBarTitle({",
" title: '$3'",
" });",
" }",
"",
" /* 函数 */",
"}",
"</script>",
"",
"<style lang=\"less\" scoped></style>",
""
],
"description": "WePY templet"
},
"image": {
"prefix": "image",
"body": [
"<image src=\"{{'/$1' + '?x-oss-process=image/resize,w_750,limit_0'}}\" mode=\"aspectFill\"></image>"
],
"description": "WePY templet"
},
"text": {
"prefix": "text",
"body": [
"<text>$1</text>"
],
"description": "WePY templet"
}
}
