vscode代码片段集合
Js的log模版设置
js
{
// Place your snippets for javascript 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:
"本人log快捷方式": {
"prefix": "log",
"body": ["console.log('$1',$1);"],
"description": "Log output to console"
},
}Vue模版设置
js
{
// Place your snippets for vue 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"
// }
"Vue2单文件组件模板": {
"prefix": "v2",
"body": [
"<template>",
"\t<div class=\"$1\">",
"\t\t",
"\t</div>",
"</template>",
"",
"<script>",
"export default {",
"\tname:'$1'",
"}",
"</script>",
"",
"<style scoped lang=\"scss\">",
"",
"</style>"
],
"description": "Vue单文件组件模板"
},
"vue3单文件组件模板": {
"prefix": "v3",
"body": [
"<script setup>",
"",
"import { ref, reactive } from 'vue';",
"const count = ref(0);",
"",
"</script>",
"",
"<template>",
"\t<div class=\"$1\">",
"\t\t",
"\t</div>",
"</template>",
"",
"<style scoped lang=\"scss\">",
"",
"</style>"
],
"description": "Vue3单文件组件模板"
}
}nodejs服务器快速启动本地html页面的js模板
js
{
// Place your snippets for javascript 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"
// }
"Static File Server": {
"prefix": "pfile",
"body": [
"const http = require('http');",
"const fs = require('fs');",
"const path = require('path');",
"const url = require('url');",
"",
"// 服务器配置",
"const PORT = 3000;",
"const HOSTNAME = 'localhost';",
"const pathStr = '/editorInstance/html/index.html';",
"",
"// MIME类型映射",
"const mimeTypes = {",
"\t'.html': 'text/html',",
"\t'.js': 'text/javascript',",
"\t'.css': 'text/css',",
"\t'.json': 'application/json',",
"\t'.png': 'image/png',",
"\t'.jpg': 'image/jpg',",
"\t'.gif': 'image/gif',",
"\t'.svg': 'image/svg+xml',",
"\t'.wav': 'audio/wav',",
"\t'.mp4': 'video/mp4',",
"\t'.woff': 'application/font-woff',",
"\t'.ttf': 'application/font-ttf',",
"\t'.eot': 'application/vnd.ms-fontobject',",
"\t'.otf': 'application/font-otf',",
"\t'.wasm': 'application/wasm'",
"};",
"",
"const server = http.createServer((req, res) => {",
"\tconsole.log(req.method + ' ' + req.url);",
"\tconst parsedUrl = url.parse(req.url);",
"\tlet pathname = parsedUrl.pathname;",
"\tif (pathname === '/') pathname = pathStr;",
"",
"\tconst filePath = path.join(__dirname, pathname);",
"\tconst extname = String(path.extname(filePath)).toLowerCase();",
"\tconst contentType = mimeTypes[extname] || 'application/octet-stream';",
"",
"\tfs.readFile(filePath, (error, content) => {",
"\t\tif (error) {",
"\t\t\tif (error.code === 'ENOENT') {",
"\t\t\t\tres.writeHead(404, { 'Content-Type': 'text/html' });",
"\t\t\t\tres.end('<h1>404 Not Found</h1><p>The file was not found on this server.</p>', 'utf-8');",
"\t\t\t} else {",
"\t\t\t\tres.writeHead(500);",
"\t\t\t\tres.end('Server Error: ' + error.code, 'utf-8');",
"\t\t\t}",
"\t\t} else {",
"\t\t\tres.writeHead(200, { 'Content-Type': contentType });",
"\t\t\tres.end(content, 'utf-8');",
"\t\t}",
"\t});",
"});",
"",
"server.listen(PORT, HOSTNAME, () => {",
"\tconsole.log('Server running at http://' + HOSTNAME + ':' + PORT + '/');",
"\tconsole.log('HTML编辑器页面: http://' + HOSTNAME + ':' + PORT + pathStr);",
"});"
],
"description": "Launch a static-file server for the HTML editor"
},
}v3版本html的Element和vant的模板配置
json
{
// Place your snippets for html 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 ovutput to console"
// }
"Vue3 ElementPlus 模板": {
"prefix": "v3ElmentPlus",
"body": [
"<!DOCTYPE html>",
"<html lang=\"zh-CN\">",
"<head>",
" <meta charset=\"UTF-8\" />",
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />",
" <title>Vue3 ElementPlus 模板</title>",
" <script src=\"https://npm.webcache.cn/vue@3/dist/vue.global.js\"></script>",
" <link rel=\"stylesheet\" href=\"https://npm.webcache.cn/element-plus/dist/index.css\" />",
" <script src=\"https://npm.webcache.cn/element-plus/dist/index.full.js\"></script>",
"</head>",
"",
"<body>",
" <div id=\"app\">",
" <el-button type=\"primary\">{{ message }}</el-button>",
" </div>",
"",
" <script>",
" const { createApp, ref, onMounted } = Vue;",
" const { ElMessage } = ElementPlus;",
"",
" const App = {",
" setup() {",
" const message = ref('Hello Element Plus');",
" onMounted(() => {",
" ElMessage.success('测试提示');",
" })",
" return { message };",
" },",
" };",
"",
" const app = createApp(App);",
" app.use(ElementPlus);",
" app.mount('#app');",
" </script>",
"</body>",
"</html>",
""
],
"description": "Vue3 + ElementPlus"
},
"Vue3 Vant3 CDN + <script setup>": {
"prefix": "v3vant",
"body": [
"<!DOCTYPE html>",
"<html lang=\"zh-CN\">",
"<head>",
" <meta charset=\"UTF-8\">",
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
" <title>Vue3 Vant3 模板</title>",
" <link rel=\"stylesheet\" href=\"https://npm.webcache.cn/vant@3/lib/index.css\" />",
" <script src=\"https://npm.webcache.cn/vue@3.5.25/dist/vue.global.js\"></script>",
" <script src=\"https://npm.webcache.cn/vant@3/lib/vant.min.js\"></script>",
"</head>",
"",
"<body>",
" <!-- 挂载点 -->",
" <div id=\"app\">",
" <van-button type=\"primary\">{{ message }}</van-button>",
" </div>",
"",
" <!-- 业务 -->",
" <script>",
" const { createApp, ref, onMounted } = Vue;",
"",
" const App = {",
" setup() {",
" const message = ref('Hello Vant!');",
" onMounted(() => {",
" vant.Toast('Hello World!');",
" });",
" return { message };",
" }",
" };",
"",
" const app = createApp(App);",
" app.use(vant);",
" app.mount('#app');",
" </script>",
"</body>",
"</html>",
""
],
"description": "Vue3.5 + Vant3 CDN 最小模板（<script setup> 风格）"
}
}