settings.json
{
"editor.wordWrap": "on",
"explorer.confirmDelete": false,
"security.workspace.trust.untrustedFiles": "open",
"px-to-rem.number-of-decimals-digits": 3,
"px-to-rem.px-per-rem": 240,
"cssrem.fixedDigits": 3,
"workbench.iconTheme": "file-icons",
"editor.mouseWheelZoom": true,
"liveServer.settings.CustomBrowser": "chrome",
"editor.find.autoFindInSelection": "always",
"liveServer.settings.donotShowInfoMsg": true,
"terminal.integrated.defaultProfile.windows": "Git Bash",
"easysass.targetDir": "./src/css",
"emmet.triggerExpansionOnTab": true,
"emmet.includeLanguages": {
"wxml": "html",
"javascript": "javascriptreact"
},
"amVim.startInInsertMode": true,
"workbench.startupEditor": "newUntitledFile",
"git.autofetch": true,
"files.associations": {
"*.wxml": "html",
"*.cjson": "jsonc",
"*.wxss": "css",
"*.wxs": "javascript"
},
"explorer.confirmDelete": false,
"vsicons.dontShowNewVersionMessage": true,
"liveServer.settings.donotShowInfoMsg": true,
"explorer.confirmDragAndDrop": false,
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
},
"vue"
],
// "eslint.autoFixOnSave": true,
"javascript.updateImportsOnFileMove.enabled": "always",
"vetur.format.defaultFormatter.html": "js-beautify-html",
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
"emmet.triggerExpansionOnTab": true,
"emmet.includeLanguages": {
"wxml": "html",
"javascript": "javascriptreact"
},
"dart.checkForSdkUpdates": false,
"terminal.integrated.fontFamily": "monospace",
"editor.fontLigatures": null,
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
},
"editor.fontWeight": "normal",
"[dart]": {
"editor.tabSize": 2,
"editor.insertSpaces": true,
"editor.detectIndentation": false,
"editor.suggest.insertMode": "replace"
},
// 自动删除结尾的; ,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
// - auto: 仅在超出行长度时才对属性进行换行。
// - force: 对除第一个属性外的其他每个属性进行换行。
// - force-aligned: 对除第一个属性外的其他每个属性进行换行,并保持对齐。
// - force-expand-multiline: 对每个属性进行换行。
// - aligned-multiple: 当超出折行长度时,将属性进行垂直对齐。
"html.format.wrapAttributes": "auto",
"files.autoSave": "afterDelay",
"vetur.ignoreProjectWarning": true,
"workbench.colorTheme": "Monokai",
"security.workspace.trust.untrustedFiles": "open",
"terminal.integrated.tabs.enabled": false,
"vetur.format.defaultFormatter.ts": "vscode-typescript",
"workbench.editor.untitled.hint": "hidden",
"editor.tabSize": 2,
"vetur.format.defaultFormatter.js": "vscode-typescript",
"editor.formatOnSave": true,
"window.zoomLevel": 0.3,
"[json]": {
"editor.quickSuggestions": {
"strings": true
},
"editor.suggest.insertMode": "replace"
}
}
image.png
image.png
html代码片段
{
// 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 output to console"
// }
"create vue2 template": {
"prefix": "vue2",
"body": [
"<!DOCTYPE html>",
"<html lang=\"en\">",
"",
"<head>",
" <meta charset=\"UTF-8\">",
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
" <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
" <title>Document</title>",
"</head>",
"",
"<body>",
" <div id=\"app\">",
" $2",
" </div>",
" <script src=\"./lib/vue.js\"></script>",
" <script>",
" new Vue({",
" el: \"#app\",",
" data: {",
" $1",
" },",
" created() {",
" },",
" methods: {",
" }",
" })",
" </script>",
"</body>",
"",
"</html>"
],
"description": "create vue2 template"
}
}
vue代码片段
{
// 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"
// }
"vue": {
"prefix": "vue",
"body": [
"<template>",
" $1",
"</template>",
"<script>",
"export default {",
" data ()({})",
"}",
"</script>",
"<style lang=\"scss\" scoped>",
"</style>"
],
"description": "vue output to vue-template"
},
"vt": {
"prefix": "vt",
"body": [
"<template>",
" $1",
"</template>",
"<script type=\"ts\">",
"import { Component, Vue } from 'vue-property-decorator'",
"@Component({",
" data: () => ({}),",
" components: {",
" }",
"})",
"export default class App extends Vue {",
"}",
"</script>",
"<style lang=\"scss\">",
"</style>",
],
"description": "vue output to vue-template"
},
"create vue2 template": {
"prefix": "vue2",
"body": [
"<template>",
" $1",
"</template>",
"<script>",
"export default {",
" data(){",
" return {",
"",
" }",
" }",
"}",
"</script>",
"<style lang=\"scss\" scoped>",
"</style>"
],
"description": "create vue2 template"
},
"create vue3 template": {
"prefix": "vue3",
"body": [
"<template>",
" <div>",
"",
" </div>",
"</template>",
"",
"<script>",
"export default {",
" setup () {",
" $1",
"",
" return {$2}",
" }",
"}",
"</script>",
"",
"<style lang=\"scss\" scoped>",
"",
"</style>"
],
"description": "create vue3 template"
}
}
image.png
image.png
image.png
image.png