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

布满荆棘的人生 2023-10-02 19:14 16阅读 0赞

### 安装地址 ###

https://code.visualstudio.com/

### 常用插件 ###

查询目前vscode正在使用的插件  
![在这里插入图片描述][ea4930c55c504a239069a5da4fc32371.png]

目前我vscode装的插件  
![在这里插入图片描述][5df0dcb61cdb4655b5f2fe6fc0affb6e.png]  
![在这里插入图片描述][5508d495372c4c739729a27178cbe694.png]  
![在这里插入图片描述][520d441cc84e428e8820697a459db7d5.png]

![在这里插入图片描述][6e98e3a915e44b3e8c60c47e532c74fb.png]

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

### 导入插件 ###

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

![在这里插入图片描述][60b0ccceaf934bf08f3577e75d7d6cf6.png]  
![在这里插入图片描述][5e00ef67dada46a88ddadeb44356dd32.png]  
选择目录导入之后就会自动安装,完成后记得重启vs才行

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

### vs code 配置 ###

![在这里插入图片描述][5b86d650553c4f488c5b1e4eabc55f10.png]  
![在这里插入图片描述][f0c722f476164ffeb2dbd589530bc37d.png]

{
        
      "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,
    }

### 键盘快捷键配置 ###

![在这里插入图片描述][1aa9f5f2e69848b5ac405062fdc332f6.png]  
![在这里插入图片描述][18a8e01b59c642f08ffd6e35ba922ce9.png]

// 将键绑定放在此文件中以覆盖默认值
    [
        {
        
            "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"
        }
    ]

### 快捷键配置 ###

![在这里插入图片描述][71eafcfda1db4955a44094bbbc7d81d4.png]  
![在这里插入图片描述][1eda4603e92c4e82b2a09fde5199f498.png]

{
        
    	// 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  
> ![在这里插入图片描述][6e81cc61b60a4c7db8f28befc8785816.png]  
> `Ctrl+Shift+R` 全vs code搜索(万能)  
> `Ctrl+f` 文件内 ,内容搜索

![在这里插入图片描述][e2af4607da624cff9e7bf546663eaa91.gif]

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

![ceaefc422a4745479fc1e8cfd2bdb74e.jpg][]

[ea4930c55c504a239069a5da4fc32371.png]: https://img-blog.csdnimg.cn/ea4930c55c504a239069a5da4fc32371.png
[5df0dcb61cdb4655b5f2fe6fc0affb6e.png]: https://img-blog.csdnimg.cn/5df0dcb61cdb4655b5f2fe6fc0affb6e.png
[5508d495372c4c739729a27178cbe694.png]: https://img-blog.csdnimg.cn/5508d495372c4c739729a27178cbe694.png
[520d441cc84e428e8820697a459db7d5.png]: https://img-blog.csdnimg.cn/520d441cc84e428e8820697a459db7d5.png
[6e98e3a915e44b3e8c60c47e532c74fb.png]: https://img-blog.csdnimg.cn/6e98e3a915e44b3e8c60c47e532c74fb.png
[60b0ccceaf934bf08f3577e75d7d6cf6.png]: https://img-blog.csdnimg.cn/60b0ccceaf934bf08f3577e75d7d6cf6.png
[5e00ef67dada46a88ddadeb44356dd32.png]: https://img-blog.csdnimg.cn/5e00ef67dada46a88ddadeb44356dd32.png
[5b86d650553c4f488c5b1e4eabc55f10.png]: https://img-blog.csdnimg.cn/5b86d650553c4f488c5b1e4eabc55f10.png
[f0c722f476164ffeb2dbd589530bc37d.png]: https://img-blog.csdnimg.cn/f0c722f476164ffeb2dbd589530bc37d.png
[1aa9f5f2e69848b5ac405062fdc332f6.png]: https://img-blog.csdnimg.cn/1aa9f5f2e69848b5ac405062fdc332f6.png
[18a8e01b59c642f08ffd6e35ba922ce9.png]: https://img-blog.csdnimg.cn/18a8e01b59c642f08ffd6e35ba922ce9.png
[71eafcfda1db4955a44094bbbc7d81d4.png]: https://img-blog.csdnimg.cn/71eafcfda1db4955a44094bbbc7d81d4.png
[1eda4603e92c4e82b2a09fde5199f498.png]: https://img-blog.csdnimg.cn/1eda4603e92c4e82b2a09fde5199f498.png
[6e81cc61b60a4c7db8f28befc8785816.png]: https://img-blog.csdnimg.cn/6e81cc61b60a4c7db8f28befc8785816.png
[e2af4607da624cff9e7bf546663eaa91.gif]: https://img-blog.csdnimg.cn/e2af4607da624cff9e7bf546663eaa91.gif
[ceaefc422a4745479fc1e8cfd2bdb74e.jpg]: https://img-blog.csdnimg.cn/ceaefc422a4745479fc1e8cfd2bdb74e.jpg