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

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

安装地址

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 配置

{
  "emmet.triggerExpansionOnTab": true,
  "emmet.showExpandedAbbreviation": "inMarkupAndStylesheetFilesOnly",
  "emmet.showSuggestionsAsSnippets": true,
  "editor.snippetSuggestions": "top",
  "tabnine.experimentalAutoImports": true,
  "workbench.colorTheme": "One Dark Pro Darker",
  "editor.linkedEditing": true,
  // 动态刷新游览器,默认游览器
  "liveServer.settings.CustomBrowser": "firefox",
  // 默认打开游览器
  "open-in-browser.default": "Firefox",
  "breadcrumbs.enabled": true,
  // git是否启用自动拉取
  "git.autofetch": true,
  // 是否开启eslint检测
  "eslint.enable": false,
  // 文件保存时，是否自动根据eslint进行格式化
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": false
  },
  //  #让函数(名)和后面的括号之间加个空格
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "javascript.suggest.autoImports": true,
  //ctrl+鼠标滚动,切换字体大小
  "editor.mouseWheelZoom": true,
  "[html]": {
    "editor.defaultFormatter": "HookyQR.beautify"
  },
  "explorer.confirmDelete": false,
  // 保存时候格式化
  "editor.formatOnSave": true,
  // 编辑一行后 自动格式行
  "editor.formatOnType": true,
  // 禁用Bracket Pair Colorizer 花括号插件 (因为不会维护了,)
  "editor.bracketPairColorization.enabled": true,
  // 使用vscode 自己的花括号 (现在vscode 自己的花括号比较好)
  "editor.guides.bracketPairs": "active",
  "liveServer.settings.donotShowInfoMsg": true,
  //将文件扩展名添加到导入语句中  
  "path-intellisense.extensionOnImport": true,
  //显示隐藏文件
  "path-intellisense.showHiddenFiles": true,
  // 在使用搜索功能时，将这些文件夹/文件排除在外
  "search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true,
    "**/target": true,
    "**/logs": true,
  },
  // 这些文件将不会显示在工作空间中
  "files.exclude": {
    "**/.git": true,
    "**/.svn": true,
    "**/.hg": true,
    "**/CVS": true,
    "**/.DS_Store": true,
    "**/*.js": {
      "when": "$(basename).ts" //ts编译后生成的js文件将不会显示在工作空中
    },
    "**/node_modules": true
  },
  //失去焦点后自动保存
  "files.autoSave": "onFocusChange",
  "git.enableSmartCommit": true,
}

键盘快捷键配置

// 将键绑定放在此文件中以覆盖默认值
[
    {
        "key": "ctrl+shift+r", //ctrl+shift+r 文件内开启全局搜索
        "command": "workbench.action.findInFiles"
    },
    {
        "key": "ctrl+shift+f", // 取消
        "command": "-workbench.action.findInFiles"
    },
    {
        "key": "alt+oem_comma", //ALT+, 行开头
        "command": "cursorLineStart"
    },
    {
        "key": "alt+oem_period", //ALT+, 行结尾
        "command": "cursorLineEnd"
    }
]

快捷键配置

{
	// Place your snippets for javascript here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. 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.
	// $0 光标显示的位置
	// $1 $2..  就是占位符 ,  使用  ${1:label}  ${2:another}  给占位符替换成指定的单词       ${1:label}好比就是设置变量 ,$1就是使用变量
	// 使用tab 可以切换 占位符并且全部选中
	// Example:
	"打印日志": {
		"prefix": "log",
		"body": [
			"console.log($0);",
		],
		"description": "打印日志"
	},
	"定时器setInterval": {
		"prefix": "timer",
		"body": [
			"//设置周期定时器",
			"let ${1:interval}=setInterval(() => {",
			"$0",
			"}, 1000);",
			"//清除interval定时器",
			"clearInterval($1);",
		]
	},
	"定时器setTimeout": {
		"prefix": "timer",
		"body": [
			"//设置定时器(只执行一次)",
			"let  ${1:timeout}=setTimeout(()=>{",
			"",
			"},1000)",
			"//清除timeout定时器",
			"clearTimeout($1)",
		]
	},
	"创建函数-带参有返回值": {
		"prefix": "func",
		"body": [
			"const ${1:variable}=(${2:parameters})=>{",
			"\t$0",
			"\treturn ${3:value}",
			"}",
		]
	},
	"创建函数-带参无返回值": {
		"prefix": "func",
		"body": [
			"const ${1:variable}=(${2:parameters})=>{",
			"\t$0",
			"}",
		]
	},
	"创建函数-空函数": {
		"prefix": "func",
		"body": [
			"const ${1:variable}=()=>{",
			"\t$0",
			"}",
		]
	},
	"创建函数-方法参数": {
		"prefix": "func",
		"body": [
			"function(e){",
			"\t$0",
			"}",
		]
	},
	"导包": {
		"prefix": "imp",
		"body": [
			"import {${2:variable}}  from '${1:path}'",
		]
	},
	"选择器querySelector": {
		"prefix": "dq",
		"body": [
			"let ${2:variable}= document.querySelector(\"${1:selector}\")",
		]
	},
	"选择器querySelectorAll": {
		"prefix": "dq",
		"body": [
			"let ${2:variables}= document.querySelectorAll(\"${1:selector}\")",
		]
	},
	"循环-for(xx;xx;xx)": {
		"prefix": "for",
		"body": [
			"for(let ${1:index} = 0; ${1:index} < ${2:array}.length; ${1:index} ++) {",
			"\t${4:const} ${3:element} = ${2:array}[${1:index}];",
			"\t$0",
			"}"
		]
	},
	"循环-forEach": {
		"prefix": "for",
		"body": [
			"${1:array}.forEach(() => {",
			"\t$0",
			"});",
		]
	},
	"循环-for(xx in xx)": {
		"prefix": "for",
		"body": [
			"for (const key in ${1:obj}) {",
			"\t$0",
			"}",
		]
	},
	"选择条件if": {
		"prefix": "if",
		"body": [
			"if(${1:condition}){",
			"",
			"}",
		]
	},
	"选择条件ifelse": {
		"prefix": "if",
		"body": [
			"if(${1:condition}){",
			"",
			"}else{",
			"",
			"}",
		]
	},
	"选择条件if-elseif-else": {
		"prefix": "if",
		"body": [
			"if(${1:condition}){",
			"",
			"}else if(${2:condition}){",
			"",
			"}else if(${3:condition}){",
			"",
			"}else{",
			"",
			"}",
		]
	},
	"选择条件switch": {
		"prefix": "switch",
		"body": [
			"switch (${1:key}) {",
			"\tcase ${2:value}:",
			"",
			"\t\tbreak;",
			"\tcase  ${2:value}:",
			"",
			"\t\tbreak;",
			"\tcase  ${2:value}:",
			"",
			"\t\tbreak;",
			"\tdefault:",
			"\t\tbreak;",
			"}",
		]
	},
	"创建标签": {
		"prefix": "createElement",
		"body": [
			"let ${2:tab} = document.querySelector(\"${1:selector}\")",
			"let ${4:newtab} = document.createElement(\"${3:tab}\")",
			"$4.innerHTML = '${5:value}'",
			"$4.setAttribute('${6:key}','${7:value}')",
			"$4.classList.add('${8:className}')",
			"$2.appendChild($4)"
		]
	},
	"异常处理": {
		"prefix": "try",
		"body": [
			"try {",
			"// 可能发生错误的代码",
			"} catch (error) {",
			"//只有发生错误时才执行的代码",
			"}finally{",
			"//无论是否出错，肯定都要执行的代码",
			"}",
		]
	},
	"给标签添加事件": {
		"prefix": "event",
		"body": [
			"let ${2:variable} = document.querySelector(\"${1:selector}\")",
			"$2.addEventListener(\"${3:event}\",()=>{",
			"console.log(el.target); //当前标签对象",
			"$0",
			"})",
		]
	},
}

常用快捷键

控制快捷键

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