前端vscode插件(工作中常用)----持续更新,欢迎补充

336 阅读1分钟

KoroFileHeader (提供文件头信息注释和函数注释)

首先在vscode中安装KoroFileHeader插件 在vscode左下角点击设置按钮,选择“设置”,然后输入“fileheader”,

文件头部注释:Fileheader:custom Made

函数注释:Fileheader:cursor Mode

随便点击哪个"在setting.json"中编辑,输入以下设置后保存,然后重启vscode更新设置:

// 文件头部注释
"fileheader.customMade": {
    "Descripttion":"",
    "version":"",
    "Author":"sueRimn",
    "Date":"Do not edit",
    "LastEditors":"sueRimn",
    "LastEditTime":"Do not Edit"
},
//函数注释
"fileheader.cursorMode": {
    "description":"",
    "param":"",
    "return":""
}
使用

(1)文件头部注释

快捷键:crtl+alt+i(window),ctrl+cmd+t (mac)

1644895383726.jpg

(2)函数注释

快捷键:ctrl+alt+t (window), ctrl+alt+t(mac)

WX20220215-112704@2x.png

path-alias(提供# 路径别名跳转)

在"在setting.json"中编辑,输入以下设置后保存:

    // 文件名别名跳转
    "pathAlias.aliasMap": {
        "@": "${cwd}/src"
    },
使用

(1)import输入是会有下面文件的提示

path.gif

(2)在文件路径处按alt会跳转到对应文件

path2.gif

Auto Rename Tag(自动重命名标签)

使用

1.gif

Code Runner(一键执行各种语言代码(常用于测试))

使用

2.gif

vue-component(输入组件名称自动导入找到的组件,自动导入路径和组件)

  • 选中后自动输入组件名(包含必填属性)、import语句、components属性

3.gif

预览md文件(不用插件)

  • VSCode默认是支持预览Markdown的,快捷键 command+k 然后按v,或者command+shift+v(command对应win下的control),就可以打开预览