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-22VSCode如何跳转到指定函数? vscode函数跳转快捷键介绍
VSCode如何跳转到指定函数?VSCode文档想要跳转到指定函数的定义或引用位置,该怎么操作呢?下面我们就来看看vscode函数跳转快捷键介绍2023-12-22vscode里的终端不能执行命令怎么办? vscode终端无法正常执行命令解决办
vscode里的终端不能执行命令怎么办?本文将从多个角度来分析这个问题,并提供相应的解决方法2023-12-09VS Code 1.85发布:新增浮动编辑器窗口/Copilot 可解释 Rust 代码等
微软发布 VS Code 1.85,这个版本主要添加了浮动编辑器窗口、改善无障碍视图工作流程,精细化扩展更新控制,并更新了 GitHub Copilot 功能2023-12-09vscode出现event=>怎么取消? vsCode的@click方法显示一个event=>
今天我们来看看解决 VSCode 中组件输入点击事件 @click 后自动弹出“$event =>” 的问题的图文教程,详细请看下文介绍2023-11-29VSCode和WebStorm哪个更优秀?两款强大的编辑器对比介绍
VSCode和WebStorm哪个更优秀?这两款编辑器都很不错,他们各自有什么优缺点?该怎么选择呢?下面我们就来看看vscode和webstorm的区别对比介绍2023-11-29VSCode主边栏不见了怎么办? VSCode显示或隐藏主边栏的方法
VSCode主边栏不见了怎么办?VSCode中的主边栏找不到了,估计是被隐藏了,该怎么重新显示呢?下面我们就来看看VSCode显示或隐藏主边栏的方法2023-11-27VSCode导航栏怎么显示函数? VSCode设置显示函数的方法
VSCode导航栏怎么显示函数?VSCode中的函数很常用,想要显示在导航栏,该怎么操作呢?下面我们就来看看VSCode设置显示函数的方法2023-11-27VSCode怎么设置不显示空值? VSCode不显示空值的设置技巧
VSCode怎么设置不显示空值?VSCode中的空值也会显示,想要不显示空值,该怎么操作呢?下面我们就来看看Visual Studio Code设置不显示空值的方法2023-11-27
最新评论