配置设置
点击设置 -> 点击右上角打开设置(json)
{
"prettier.semi": false,
"prettier.singleQuote": true,
"prettier.trailingComma": "none",
"prettier.printWidth": 120,
"prettier.bracketSameLine": true,
"prettier.quoteProps": "consistent",
"prettier.vueIndentScriptAndStyle": true,
"workbench.iconTheme": "material-icon-theme",
"workbench.startupEditor": "none",
"workbench.editor.empty.hint": "hidden",
"security.workspace.trust.enabled": false,
"emmet.triggerExpansionOnTab": true,
"emmet.showAbbreviationSuggestions": true,
"emmet.includeLanguages": {
"vue-html": "html",
"javascript": "javascriptreact"
},
"explorer.compactFolders": false,
"update.showReleaseNotes": false,
"window.commandCenter": false,
"editor.fontFamily": "Maple Mono NF CN, Roboto Mono, Fira Code, Menlo, Consolas, Maple UI, PingFang, 'Microsoft YaHei', monospace",
"editor.tabSize": 2,
"editor.formatOnSave": false,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.unicodeHighlight.ambiguousCharacters": false,
"editor.unicodeHighlight.invisibleCharacters": false,
"editor.suggest.snippetsPreventQuickSuggestions": false,
"editor.cursorSmoothCaretAnimation": "on",
"editor.linkedEditing": true,
"editor.inlineSuggest.enabled": true,
"editor.stickyScroll.enabled": false,
// "editor.guides.bracketPairs": true,
"editor.codeActionsOnSave": {
"source.fixAll": "explicit"
},
"diffEditor.ignoreTrimWhitespace": false,
"terminal.integrated.cursorBlinking": true,
"terminal.integrated.cursorStyle": "line",
"terminal.integrated.persistentSessionReviveProcess": "never",
"terminal.integrated.fontFamily": "Maple Mono NF CN, Roboto Mono, Fira Code",
"files.associations": {
"pages.json": "jsonc",
"manifest.json": "jsonc"
},
// px to rem & rpx & vw
"cssrem.vw": true,
// Easy Less
// "less.compile": { "out": "../css/" },
// Project Manager
"projectManager.git.baseFolders": ["D:\\Projects"],
"projectManager.openInNewWindowWhenClickingInStatusBar": true,
// code runner
"code-runner.showExecutionMessage": false,
// TODO TREE
"todo-tree.regex.regex": "(//|#|<!--|;|/\\*|^|^[ \\t]*(-|\\d+.))\\s*($TAGS)",
"todo-tree.filtering.ignoreGitSubmodules": true,
"todo-tree.tree.showCountsInTree": true,
"todo-tree.regex.regexCaseSensitive": true,
"todo-tree.general.statusBar": "current file",
"todo-tree.general.tags": ["BUG", "FIXME", "TODO", "HACK", "XXX", "TAG", "DONE", "NOTE", "INFO"],
"todo-tree.highlights.defaultHighlight": { "icon": "alert", "type": "line" },
"todo-tree.highlights.customHighlight": {
"BUG": { "icon": "bug", "foreground": "#F56C6C" },
"FIXME": { "icon": "flame", "foreground": "#FF9800" },
"TODO": { "icon": "checklist", "foreground": "#FFEB38" },
"HACK": { "icon": "versions", "foreground": "#E040FB" },
"XXX": { "icon": "unverified", "foreground": "#E91E63" },
"TAG": { "icon": "tag", "foreground": "#409EFF" },
"DONE": { "icon": "verified", "foreground": "#0dff00" },
"NOTE": { "icon": "note", "foreground": "#67C23A" },
"INFO": { "icon": "info", "foreground": "#909399" }
}
}
插件列表
插件安装
-
在文件根目录新建
.vscode/extensions.json文件 -
复制以下插件目录至文件
{
"recommendations": [
"formulahendry.auto-rename-tag",
"ms-ceintl.vscode-language-pack-zh-hans",
"formulahendry.code-runner",
"w88975.code-translate",
"mikestead.dotenv",
"mrcrowl.easy-less",
"usernamehw.errorlens",
"dsznajder.es7-react-js-snippets",
"dbaeumer.vscode-eslint",
"huizhou.githd",
"github.remotehub",
"kisstkondoros.vscode-gutter-preview",
"mariusalchimavicius.json-to-ts",
"ritwickdey.liveserver",
"pkief.material-icon-theme",
"techer.open-in-browser",
"christian-kohler.path-intellisense",
"esbenp.prettier-vscode",
"alefragnani.project-manager",
"cipchk.cssrem",
"ms-vscode-remote.remote-ssh",
"syler.sass-indented",
"gruntfuggly.todo-tree",
"uni-helper.uni-helper-vscode",
"vue.volar"
]
}
-
点击左侧
扩展图标，输入框搜索@recommended -
安装工作区推荐扩展即可
代码片段
点击设置 -> 用户代码片段
全局代码片段
{
"Print to log": {
"prefix": "clog",
"body": ["console.log($1)"]
},
"Print to dir": {
"prefix": "cdir",
"body": ["console.dir($1)"]
},
"Print to arrow": {
"prefix": "jt",
"body": ["() => {$1}"]
}
}
Vue代码片段
{
"Print to Vue3": {
"prefix": "vue3",
"body": [
"<script setup>",
"",
"</script>",
"",
"<template>",
" <div>",
" ${1:app}",
" </div>",
"</template>",
"",
"<style scoped>",
"",
"</style>",
""
],
"description": "Print to Vue3"
},
"Print to Vue3-TS": {
"prefix": "vue3-ts",
"body": [
"<script setup lang=\"ts\">",
"",
"</script>",
"",
"<template>",
" <div>",
" ${1:app}",
" </div>",
"</template>",
"",
"<style scoped>",
"",
"</style>",
""
],
"description": "Print to Vue3-TS"
},
"Print to Vue2": {
"prefix": "vue2",
"body": [
"<template>",
" <div>",
" ${1:app}",
" </div>",
"</template>",
"",
"<script>",
"export default {",
" name: '${1:app}',",
" data () {",
" return {}",
" },",
"",
" methods: {}",
"}",
"</script>",
"",
"<style scoped>",
"",
"</style>"
],
"description": "Print to Vue2"
},
"Print to Vue-uni": {
"prefix": "vue2-uni",
"body": [
"<template>",
" <view>",
" ${1:app}",
" </view>",
"</template>",
"",
"<script>",
"export default {",
" name: '${1:app}',",
" data () {",
" return {}",
" },",
"",
" onLoad () {},",
"",
" onReady () {},",
"",
" onShow () {},",
"",
" onHide () {},",
"",
" methods: {}",
"}",
"</script>",
"",
"<style scoped>",
"",
"</style>"
],
"description": "Print to Vue-uni"
}
}
