vscode有哪些插件好用? vscode部分插件的使用方法
vscode部分插件的使用方法
1、javascript console utils
选中对应的变量,然后ctrl+shift+L,而ctrl+shift+D即可删除本文件中所有的console.log()


2、Todo Tree

3、Vue Css Peek和vue-helper
这两个插件时用于css跳转和方法跳转的,按ctrl键同时点击即可完成跳转


4、Css Tree
快速生成样式树,选中代码块,然后ctrl+shift+p



5、KoroFileHeader
安装过后,在界面左下角点开设置,输入fileheader

然后点击settings中编辑

最后在其中加入如下代码
"fileheader.configObj": {
"createFileTime": true,//设置为true则为文件新建时候作为date,否则注释生成时间为date
"autoAdd": true,//自动生成注释,老是忘记的同学可以设置
"annotationStr": {
"head": "/*",
"middle": " * @",
"end": " */",
"use": true//设置自定义注释可用
},
},
//函数注释
"fileheader.cursorMode": {
"description":"",
"param ":"",
"return":""
},
// 文件头部注释
"fileheader.customMade": {
"Description":"" ,//文件内容描述
"Author":"cxk",//编辑人
"Date": "Do not edit",//时间
"LastEditTime": "Do not edit",
"LastEditors": "cxk",
}- 文件头部注释:快捷键:crtl+alt+i
- 文件头部注释:快捷键:crtl+alt+t
6、GitLens — Git supercharged
这个是可以看到当前代码上一个提交的作者是谁、提交时间,在多人协作的代码里面非常好用

7、Image preview
当鼠标悬浮到img时,会产生实时预览大图的功能

8、indent-rainbow
这个可以使代码排版更整齐

9、px to rem & rpx & vw (cssrem)
可以快速的使px转换为rem




10、个人的settings的配置如下
{
"editor.formatOnSave": true,
// "eslint.autoFixOnSave": true,
// 自动修复
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
},
// 配置 ESLint 检查的文件类型
"eslint.validate": ["javascript","vue","html"],
"window.zoomLevel": 1,
"editor.fontSize": 16,
"git.confirmSync": false,
"editor.tabSize": 2,
"editor.detectIndentation": false,
"workbench.settings.useSplitJSON": true,
"files.autoSaveDelay": 1000,
"browserSync.config": {
},
"beautify.language": {
"js": {
"type": [
"javascript",
"json",
"jsonc"
],
"filename": [
".jshintrc",
".jsbeautifyrc"
]
},
"css": [
"css",
"less",
"scss"
],
"html": [
"htm",
"html",
"vue"
]
},
"vetur.format.defaultFormatter.html": "js-beautify-html",
"dart.debugExternalLibraries": true,
"thiefBook.filePath": "C:\\Users\\Administrator\\Documents\\山沟皇帝.txt",
"editor.suggestSelection": "first",
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
"todo-tree.tree.showScanModeButton": false,
"vetur.ignoreProjectWarning": true,
"emmet.excludeLanguages": [
"markdown"
],
"fileheader.configObj": {
"createFileTime": true,//设置为true则为文件新建时候作为date,否则注释生成时间为date
"autoAdd": true,//自动生成注释,老是忘记的同学可以设置
"annotationStr": {
"head": "/*",
"middle": " * @",
"end": " */",
"use": true//设置自定义注释可用
},
},
"fileheader.cursorMode": {
"description":"",
"param ":"",
"return":""
},
"fileheader.customMade": {
"Description":"" ,//文件内容描述
"Author":"cxk",//编辑人
"Date": "Do not edit",//时间
"LastEditTime": "Do not edit",
"LastEditors": "cxk",
}
}以上就是vscode部分插件的使用方法,希望大家喜欢,请继续关注脚本之家。
相关推荐:
vscode中prettier插件怎么使用? vscode中prettier的用法
vscode插件Markdown PDF插件转换PDF错误该怎么办?
相关文章
vscode左下角显示大纲?vscode中想要设置显示大纲,在哪里设置呢?下面我们就来看看vscode显示所有函数方法2023-12-22
VScode无法显示跳转到定义怎么解决? vscode无法跳转定义的原因及解决方
VScode无法显示跳转到定义怎么解决?vscode无法跳转定义的原因及解决方法2023-12-22
VSCode如何跳转到指定函数? vscode函数跳转快捷键介绍
VSCode如何跳转到指定函数?VSCode文档想要跳转到指定函数的定义或引用位置,该怎么操作呢?下面我们就来看看vscode函数跳转快捷键介绍2023-12-22
vscode里的终端不能执行命令怎么办? vscode终端无法正常执行命令解决办
vscode里的终端不能执行命令怎么办?本文将从多个角度来分析这个问题,并提供相应的解决方法2023-12-09
VS Code 1.85发布:新增浮动编辑器窗口/Copilot 可解释 Rust 代码等
微软发布 VS Code 1.85,这个版本主要添加了浮动编辑器窗口、改善无障碍视图工作流程,精细化扩展更新控制,并更新了 GitHub Copilot 功能2023-12-09
vscode出现event=>怎么取消? vsCode的@click方法显示一个event=>
今天我们来看看解决 VSCode 中组件输入点击事件 @click 后自动弹出“$event =>” 的问题的图文教程,详细请看下文介绍2023-11-29
VSCode和WebStorm哪个更优秀?两款强大的编辑器对比介绍
VSCode和WebStorm哪个更优秀?这两款编辑器都很不错,他们各自有什么优缺点?该怎么选择呢?下面我们就来看看vscode和webstorm的区别对比介绍2023-11-29
VSCode主边栏不见了怎么办? VSCode显示或隐藏主边栏的方法
VSCode主边栏不见了怎么办?VSCode中的主边栏找不到了,估计是被隐藏了,该怎么重新显示呢?下面我们就来看看VSCode显示或隐藏主边栏的方法2023-11-27
VSCode导航栏怎么显示函数? VSCode设置显示函数的方法
VSCode导航栏怎么显示函数?VSCode中的函数很常用,想要显示在导航栏,该怎么操作呢?下面我们就来看看VSCode设置显示函数的方法2023-11-27
VSCode怎么设置不显示空值? VSCode不显示空值的设置技巧
VSCode怎么设置不显示空值?VSCode中的空值也会显示,想要不显示空值,该怎么操作呢?下面我们就来看看Visual Studio Code设置不显示空值的方法2023-11-27





最新评论