VS Code 前端常用插件和配置和快捷键

转x33g5p2x  于2022-04-28 转载在 其他  
字(8.1k)|赞(0)|评价(0)|浏览(631)

安装地址

https://code.visualstudio.com/

常用插件

查询目前vscode正在使用的插件

目前我vscode装的插件

我自己的全部插件
链接：https://pan.baidu.com/s/1ky2kNTviLNLq–B1DHBXOQ?pwd=1234
提取码：1234

导入插件

https://marketplace.visualstudio.com/ vs code 插件库

选择目录导入之后就会自动安装,完成后记得重启vs才行

C:\Users\用户名\.vscode\extensions 插件目录

vs code 配置

  1. {
  2.   "emmet.triggerExpansionOnTab": true,
  3.   "emmet.showExpandedAbbreviation": "inMarkupAndStylesheetFilesOnly",
  4.   "emmet.showSuggestionsAsSnippets": true,
  5.   "editor.snippetSuggestions": "top",
  6.   "tabnine.experimentalAutoImports": true,
  7.   "workbench.colorTheme": "One Dark Pro Darker",
  8.   "editor.linkedEditing": true,
  9.   // 动态刷新游览器,默认游览器
  10.   "liveServer.settings.CustomBrowser": "firefox",
  11.   // 默认打开游览器
  12.   "open-in-browser.default": "Firefox",
  13.   "breadcrumbs.enabled": true,
  14.   // git是否启用自动拉取
  15.   "git.autofetch": true,
  16.   // 是否开启eslint检测
  17.   "eslint.enable": false,
  18.   // 文件保存时，是否自动根据eslint进行格式化
  19.   "editor.codeActionsOnSave": {
  20.     "source.fixAll.eslint": false
  21.   },
  22.   //  #让函数(名)和后面的括号之间加个空格
  23.   "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  24.   "javascript.updateImportsOnFileMove.enabled": "always",
  25.   "javascript.suggest.autoImports": true,
  26.   //ctrl+鼠标滚动,切换字体大小
  27.   "editor.mouseWheelZoom": true,
  28.   "[html]": {
  29.     "editor.defaultFormatter": "HookyQR.beautify"
  30.   },
  31.   "explorer.confirmDelete": false,
  32.   // 保存时候格式化
  33.   "editor.formatOnSave": true,
  34.   // 编辑一行后 自动格式行
  35.   "editor.formatOnType": true,
  36.   // 禁用Bracket Pair Colorizer 花括号插件 (因为不会维护了,)
  37.   "editor.bracketPairColorization.enabled": true,
  38.   // 使用vscode 自己的花括号 (现在vscode 自己的花括号比较好)
  39.   "editor.guides.bracketPairs": "active",
  40.   "liveServer.settings.donotShowInfoMsg": true,
  41.   //将文件扩展名添加到导入语句中  
  42.   "path-intellisense.extensionOnImport": true,
  43.   //显示隐藏文件
  44.   "path-intellisense.showHiddenFiles": true,
  45.   // 在使用搜索功能时，将这些文件夹/文件排除在外
  46.   "search.exclude": {
  47.     "**/node_modules": true,
  48.     "**/bower_components": true,
  49.     "**/target": true,
  50.     "**/logs": true,
  51.   },
  52.   // 这些文件将不会显示在工作空间中
  53.   "files.exclude": {
  54.     "**/.git": true,
  55.     "**/.svn": true,
  56.     "**/.hg": true,
  57.     "**/CVS": true,
  58.     "**/.DS_Store": true,
  59.     "**/*.js": {
  60.       "when": "$(basename).ts" //ts编译后生成的js文件将不会显示在工作空中
  61.     },
  62.     "**/node_modules": true
  63.   },
  64.   //失去焦点后自动保存
  65.   "files.autoSave": "onFocusChange",
  66.   "git.enableSmartCommit": true,
  67. }

键盘快捷键配置

  1. // 将键绑定放在此文件中以覆盖默认值
  2. [
  3.     {
  4.         "key": "ctrl+shift+r", //ctrl+shift+r 文件内开启全局搜索
  5.         "command": "workbench.action.findInFiles"
  6.     },
  7.     {
  8.         "key": "ctrl+shift+f", // 取消
  9.         "command": "-workbench.action.findInFiles"
  10.     },
  11.     {
  12.         "key": "alt+oem_comma", //ALT+, 行开头
  13.         "command": "cursorLineStart"
  14.     },
  15.     {
  16.         "key": "alt+oem_period", //ALT+, 行结尾
  17.         "command": "cursorLineEnd"
  18.     }
  19. ]

快捷键配置

  1. {
  2. 	// Place your snippets for javascript here. Each snippet is defined under a snippet name and has a prefix, body and 
  3. 	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
  4. 	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
  5. 	// same ids are connected.
  6. 	// $0 光标显示的位置
  7. 	// $1 $2..  就是占位符 ,  使用  ${1:label}  ${2:another}  给占位符替换成指定的单词       ${1:label}好比就是设置变量 ,$1就是使用变量
  8. 	// 使用tab 可以切换 占位符并且全部选中
  9. 	// Example:
  10. 	"打印日志": {
  11. 		"prefix": "log",
  12. 		"body": [
  13. 			"console.log($0);",
  14. 		],
  15. 		"description": "打印日志"
  16. 	},
  17. 	"定时器setInterval": {
  18. 		"prefix": "timer",
  19. 		"body": [
  20. 			"//设置周期定时器",
  21. 			"let ${1:interval}=setInterval(() => {",
  22. 			"$0",
  23. 			"}, 1000);",
  24. 			"//清除interval定时器",
  25. 			"clearInterval($1);",
  26. 		]
  27. 	},
  28. 	"定时器setTimeout": {
  29. 		"prefix": "timer",
  30. 		"body": [
  31. 			"//设置定时器(只执行一次)",
  32. 			"let  ${1:timeout}=setTimeout(()=>{",
  33. 			"",
  34. 			"},1000)",
  35. 			"//清除timeout定时器",
  36. 			"clearTimeout($1)",
  37. 		]
  38. 	},
  39. 	"创建函数-带参有返回值": {
  40. 		"prefix": "func",
  41. 		"body": [
  42. 			"const ${1:variable}=(${2:parameters})=>{",
  43. 			"\t$0",
  44. 			"\treturn ${3:value}",
  45. 			"}",
  46. 		]
  47. 	},
  48. 	"创建函数-带参无返回值": {
  49. 		"prefix": "func",
  50. 		"body": [
  51. 			"const ${1:variable}=(${2:parameters})=>{",
  52. 			"\t$0",
  53. 			"}",
  54. 		]
  55. 	},
  56. 	"创建函数-空函数": {
  57. 		"prefix": "func",
  58. 		"body": [
  59. 			"const ${1:variable}=()=>{",
  60. 			"\t$0",
  61. 			"}",
  62. 		]
  63. 	},
  64. 	"创建函数-方法参数": {
  65. 		"prefix": "func",
  66. 		"body": [
  67. 			"function(e){",
  68. 			"\t$0",
  69. 			"}",
  70. 		]
  71. 	},
  72. 	"导包": {
  73. 		"prefix": "imp",
  74. 		"body": [
  75. 			"import {${2:variable}}  from '${1:path}'",
  76. 		]
  77. 	},
  78. 	"选择器querySelector": {
  79. 		"prefix": "dq",
  80. 		"body": [
  81. 			"let ${2:variable}= document.querySelector(\"${1:selector}\")",
  82. 		]
  83. 	},
  84. 	"选择器querySelectorAll": {
  85. 		"prefix": "dq",
  86. 		"body": [
  87. 			"let ${2:variables}= document.querySelectorAll(\"${1:selector}\")",
  88. 		]
  89. 	},
  90. 	"循环-for(xx;xx;xx)": {
  91. 		"prefix": "for",
  92. 		"body": [
  93. 			"for(let ${1:index} = 0; ${1:index} < ${2:array}.length; ${1:index} ++) {",
  94. 			"\t${4:const} ${3:element} = ${2:array}[${1:index}];",
  95. 			"\t$0",
  96. 			"}"
  97. 		]
  98. 	},
  99. 	"循环-forEach": {
  100. 		"prefix": "for",
  101. 		"body": [
  102. 			"${1:array}.forEach(() => {",
  103. 			"\t$0",
  104. 			"});",
  105. 		]
  106. 	},
  107. 	"循环-for(xx in xx)": {
  108. 		"prefix": "for",
  109. 		"body": [
  110. 			"for (const key in ${1:obj}) {",
  111. 			"\t$0",
  112. 			"}",
  113. 		]
  114. 	},
  115. 	"选择条件if": {
  116. 		"prefix": "if",
  117. 		"body": [
  118. 			"if(${1:condition}){",
  119. 			"",
  120. 			"}",
  121. 		]
  122. 	},
  123. 	"选择条件ifelse": {
  124. 		"prefix": "if",
  125. 		"body": [
  126. 			"if(${1:condition}){",
  127. 			"",
  128. 			"}else{",
  129. 			"",
  130. 			"}",
  131. 		]
  132. 	},
  133. 	"选择条件if-elseif-else": {
  134. 		"prefix": "if",
  135. 		"body": [
  136. 			"if(${1:condition}){",
  137. 			"",
  138. 			"}else if(${2:condition}){",
  139. 			"",
  140. 			"}else if(${3:condition}){",
  141. 			"",
  142. 			"}else{",
  143. 			"",
  144. 			"}",
  145. 		]
  146. 	},
  147. 	"选择条件switch": {
  148. 		"prefix": "switch",
  149. 		"body": [
  150. 			"switch (${1:key}) {",
  151. 			"\tcase ${2:value}:",
  152. 			"",
  153. 			"\t\tbreak;",
  154. 			"\tcase  ${2:value}:",
  155. 			"",
  156. 			"\t\tbreak;",
  157. 			"\tcase  ${2:value}:",
  158. 			"",
  159. 			"\t\tbreak;",
  160. 			"\tdefault:",
  161. 			"\t\tbreak;",
  162. 			"}",
  163. 		]
  164. 	},
  165. 	"创建标签": {
  166. 		"prefix": "createElement",
  167. 		"body": [
  168. 			"let ${2:tab} = document.querySelector(\"${1:selector}\")",
  169. 			"let ${4:newtab} = document.createElement(\"${3:tab}\")",
  170. 			"$4.innerHTML = '${5:value}'",
  171. 			"$4.setAttribute('${6:key}','${7:value}')",
  172. 			"$4.classList.add('${8:className}')",
  173. 			"$2.appendChild($4)"
  174. 		]
  175. 	},
  176. 	"异常处理": {
  177. 		"prefix": "try",
  178. 		"body": [
  179. 			"try {",
  180. 			"// 可能发生错误的代码",
  181. 			"} catch (error) {",
  182. 			"//只有发生错误时才执行的代码",
  183. 			"}finally{",
  184. 			"//无论是否出错，肯定都要执行的代码",
  185. 			"}",
  186. 		]
  187. 	},
  188. 	"给标签添加事件": {
  189. 		"prefix": "event",
  190. 		"body": [
  191. 			"let ${2:variable} = document.querySelector(\"${1:selector}\")",
  192. 			"$2.addEventListener(\"${3:event}\",()=>{",
  193. 			"console.log(el.target); //当前标签对象",
  194. 			"$0",
  195. 			"})",
  196. 		]
  197. 	},
  198. }

常用快捷键

控制快捷键

Ctrl + T 通过匹配文本打开文件
Alt + 向上下箭头 当前行向上或下移动
Ctrl+N 新建文件
Ctrl+Tab打开历史文件
Alt+Left，Alt+Right 返回操作光标之前的位置和之后的位置
Ctrl+\ 切出一个新的编辑器（最多3个）
Ctrl + 反引号 显示终端 Terminal
Ctrl+W 关闭当前页面

代码快捷键

Shift+Alt+F 代码格式化
F8 跳转到下一个Error或Warning：
ALT+, 行开头
ALT+. 行结尾
Ctrl + ] 或[ 行缩进
Ctrl + Shift + [ , ] 折叠或展开区域代码
ALT+Shift+鼠标拖动 列选择选择
Ctrl + /添加关闭行注释
Shift + Alt +A块区域注释
Ctrl + Shift + |匹配花括号的闭合处，跳转
Ctrl + Enter在当前行下插入新的一行
Ctrl + X 删除一行

搜索快捷键

Ctrl+P 文件内特殊搜索
?列出可执行的动作
: 跳转到指定行 Ctrl+G
@ 跳转到指定变量函数…
@: 列出所有分类,然后跳转指定分类位置 Ctrl+O

Ctrl+Shift+R 全vs code搜索(万能)
Ctrl+f 文件内 ,内容搜索

点赞 -收藏-关注-便于以后复习和收到最新内容有其他问题在评论区讨论-或者私信我-收到会在第一时间回复如有侵权，请私信联系我感谢,配合,希望我的努力对你有帮助^_^

版权说明 : 本文为转载文章, 版权归原作者所有 版权申明

原文链接 : https://blog.csdn.net/weixin_45203607/article/details/124451125

内容来源于网络，如有侵权，请联系作者删除！

前端vscode工具

相关文章

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新文章

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com