VScode
自定义代码片段
快速生成代码块:https://snippet-generator.app/
我自己常用的代码块
{
// Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
// is left empty or omitted, the snippet gets applied to all languages. 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": {
// "scope": "javascript,typescript",
// "prefix": "log",
// "body": [
// "console.log('$1');",
// "$2"
// ],
// "description": "Log output to console"
// }
"vue3 template": {
"prefix": "vue",
"body": [
"<template>",
" <div>",
" ",
" </div>",
"</template>",
"",
"<script lang='ts'>",
"export default {",
" inheritAttrs: false,",
" name: 'yourName'",
"}",
"</script>",
"",
"<script setup lang='ts'>",
"",
"</script>",
"",
"<style lang='less'>",
"",
"</style>"
],
"description": "vue3模板"
},
"Kfunction": {
"prefix": ">",
"body": ["()=>{", " $1", "}"],
"description": "箭头函数"
},
"then + catch": {
"body": [".then((res)=>{", " $1", "})", ".catch((err)=>{", " $2", "})"],
"description": "Promise处理,then catch",
"prefix": "then"
},
"then": {
"body": [".then((res)=>{", " $1", "})"],
"description": "Promise处理,then",
"prefix": "then"
},
"new Promise": {
"body": [
"new Promise((resole,reject) =>{",
" $1",
" return resole();",
"});"
],
"description": "Promise对象",
"prefix": "newpromise"
},
"console.log": {
"body": ["console.log('$1',$1)"],
"description": "控制台输出",
"prefix": "clog"
},
"watch": {
"body": [
"watch(()=>{",
" return ?",
"},(newValue)=>{",
"",
"},{",
" immediate:true,",
" deep:true",
"})"
],
"description": "vue3 setup watch",
"prefix": "watch"
},
}
自定义折叠区域
//#region
// VSCode里面,中间不管你什么代码,都会通过上面的注释和下面的注释折叠起来
//#endregion
插件
Auto Close Tag:html自动加尾标签
Auto Import :自动帮你加引入其他模块
Auto Rename Tag:自动帮你重命名对应的html标签,比如你改头标签,它会自动改尾标签
Better Comments:更好的文档注释,多种颜色
Bookmarks:给代码加书签,后面点击书签可以快速跳到对应的位置,但是偶尔位置不准确
Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code:vscode官方中文包
Draw.io Integration:可以在vscode里面画流程图,也可以用语雀
Prettier - Code formatter:Prettier插件,如果项目使用了Prettier,可以帮助你直接格式化代码
Project Manager:项目管理,直接保存项目,后面方便切换项目(体验更好的官方的工作区)
Vetur:Vue的代码提示,用了很多还是这个好用,唯一的缺点就是vue3 setup语法糖,检测不到我在template里使用了组件
Vue Language Features (Volar):尤大神推荐的Vue3代码提示,当前还不是很好用,有待发展