VS code 使用技巧

vscode

发布日期: 2024-08-08

更新日期: 2024-08-08

文章字数: 2.1k

阅读时长: 8 分

阅读次数:

vscode快捷键

alt+shift+↓/↑ 快速向下/向上复制一行。
alt+鼠标左键点击需要修改的地方，可以同时修改
ctrl+shift+L 选中所有被搜索的内容。
ctrl+shift+K 删除当前行。
ctrl+[ / ] 缩进/增进。
ctrl+enter 快速下一行
ctrl+shift+enter 快速上一行
shift+alt+a 多行注释
ctrl+d 快速选中下一个
alt+shift+f 快速格式化上下文
alt+z 格式化文字
按住鼠标滚轮可以选中
ctrl+k+0 快速折叠
ctrl+k+j 全部展开
ctrl+shift+{/} 当前折叠/展开
ctrl+, 打开setting
ctrl+j 打开控制台
ctrl+p 搜索文件
ctrl+shift+p 使用功能
tr*5>td*3 出来五个tr，每个tr里面包含3个td
.box直接class名box。
#box直接id名box。
div*9{$} 出来9个div包含数字1-9;

网页截图：ctrl+shift+p capture full size screenshot

切换屏幕：alt+ctrl+方向键

vscode常用插件

浏览器打开：view in browser
打开浏览器：open in browser
修改前缀自动补齐：auto rename tag
更明显的颜色对齐：bracket rair colorizer
简体中文：chinese(Simplified)
所见即所得：live html previewer
创建svg画布：SVG
浏览器画布：svg viewer
颜色高亮：vs color picker
跳转到css类名样式：css peek
模拟服务器：Live Server
vue文件自动补齐：vetur
bootstrap自动完成类名：bootstrap 3 Snippets
vue自动完成：vue 2 snippets
javascript自动完成：Atom javascript snippet
第三方cdn：cdnjs
cdn自动完成：cdnSnippets
es6自动完成：javascript(es6) code snippets
路径自动完成：path intellisense
图标美化：material icon theme
快捷console：javascript console utils
autoprefixer：在使用css文件编写样式时，按shift+ctrl+p，找到autoprefixer回车自动加兼容ie前缀；
自动完成：aiXcoder.com 会自动提示补全功能（带星），需要在官网下载
TabNine：代码自动补全，
gitlens：管理git插件，可以随时查看到git版本修改信息（超好用）
选中函数添加注释：Add jsdoc comments
正则预览插件（写正则很方便）： Regex Previewer
注释醒目插件（多种注释带颜色，区分不同程度注释）：Better Comments
自动引入import：npm Intellisense
sass转换：live sass compiler（需要使用shift+ctrl+p 打开搜索sass找到编译）
less转换：easy less （保存自动编译）
一共几个：atom one dark theme（atom系列的都好看）
同步vscode配置：settings sync（出问题就重置一下设置，重新登录授权就可以了）

自动补齐node代码：

npm install -g typings

typings install dt~node –global –save

typings install dt~express –global

typings install dt~lodash –global

创建jsconfig.json空文件

自定义代码补齐snippets

打开方法

（1）首选项==>用户代码片段

（2）ctrl+shift+p 打开命令面板，输入snippets后回车

使用方法

"html template": {
 "prefix": "vh",  //vh是使用时输入的代码
 "body": [  //body里面填写需要自动完成的代码
 "console.log('${1:content}');",
 "${2:label}"
 ],
 "description": "htmls template"  //为提示内容;
}

符号介绍
- ${1:content}，代表第一个占位符，也可以直接$1；
- ${2:label}，代表第二个占位符，使用tab进行切换，以此类推
- $0，tab切换最后的位置；
- 使用$1content光标会到第一个去

填写body内容规范

（1）字符串间如果值里包含特殊字符需要 \ 进行转义

（2）换行：\r或者\n

（3）tab键制表符：\t

（4）如果换行，需要加逗号；

添加右键vscode打开

新建1.reg（一样要是reg后缀）
找到VsCode安装目录，替换即可
```
Windows Registry Editor Version 5.00
```

[HKEY_CLASSES_ROOT*\shell\VSCode]
@=”Open with Code”
“Icon”=”D:\Program Files (x86)\Microsoft VS Code\Code.exe”

[HKEY_CLASSES_ROOT*\shell\VSCode\command]
@=”"D:\Program Files (x86)\Microsoft VS Code\Code.exe" "%1"“

Windows Registry Editor Version 5.00

[HKEY_CLASSES_ROOT\Directory\shell\VSCode]
@=”Open with Code”
“Icon”=”D:\Program Files (x86)\Microsoft VS Code\Code.exe”

[HKEY_CLASSES_ROOT\Directory\shell\VSCode\command]
@=”"D:\Program Files (x86)\Microsoft VS Code\Code.exe" "%V"“

Windows Registry Editor Version 5.00

[HKEY_CLASSES_ROOT\Directory\Background\shell\VSCode]
@=”Open with Code”
“Icon”=”D:\Program Files (x86)\Microsoft VS Code\Code.exe”

[HKEY_CLASSES_ROOT\Directory\Background\shell\VSCode\command]
@=”"D:\Program Files (x86)\Microsoft VS Code\Code.exe" "%V"“

Cmder添加右键： Cmder.exe /REGISTER ALL（需要管理员运行）



## vscode 使用bash终端

将下面代码加入到vscode设置json里面，找到自己的git地址；

```json
"terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe", // 添加默认终端工具

Vs code格式化处理方案

安装插件

（1）ESlint：javascript代码检测工具，可以配置每次保存时格式化

（2）vetur：可以格式化html、标准css，标准js（有分号、双引号那种）、vue文件

（3）Prettier-code formatter：只关注格式化，没有eslint检查语法能力

（4）Manta's Stylus Supremacy：格式化stylus插件（不用就不装），因为vetur会把css格式化有分号、大括号那种，此插件可以格式化成stylus风格

配置vscode，在文件 -> 首选项 -> 设置，点击右上角的打开json

{
  // vscode默认启用了根据文件类型自动设置tabsize的选项
 "editor.detectIndentation": false,
 // 重新设定tabsize
 "editor.tabSize": 2,
 // 每次保存的时候自动格式化
 "editor.formatOnSave": true,
 // #每次保存的时候将代码按eslint格式进行修复
 "eslint.autoFixOnSave": true,
 // tslint保存修复
 "tslint.autoFixOnSave": true,
 // 让prettier使用eslint的代码格式进行校验
 "prettier.eslintIntegration": true,
 // 去掉代码结尾的分号
 "prettier.semi": false,
 // 使用带引号替代双引号
 "prettier.singleQuote": true,
 // 让函数(名)和后面的括号之间加个空格
 "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
 // 这个按用户自身习惯选择
 "vetur.format.defaultFormatter.html": "js-beautify-html",
 // 让vue中的js按编辑器自带的ts格式进行格式化
 "vetur.format.defaultFormatter.js": "vscode-typescript",
 "vetur.format.defaultFormatterOptions": {
     "js-beautify-html": {
         "wrap_attributes": "force-aligned"
         // vue组件中html代码格式化样式
     }
 },
 // 格式化stylus, 需安装Manta's Stylus Supremacy插件
 "stylusSupremacy.insertColons": false, // 是否插入冒号
 "stylusSupremacy.insertSemicolons": false, // 是否插入分号
 "stylusSupremacy.insertBraces": false, // 是否插入大括号
 "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
 "stylusSupremacy.insertNewLineAroundBlocks": false // 两个选择器中是否换行
}

解决’-‘分隔符不能双击选中

添加到setting中；

"editor.wordSeparators": "`~!@#$%^&*()=+[{]}\\|;:'\",.<>/?"

配置path autocomplete插件

配置该插件必须安装插件：path autocomplete

可以自动补齐引入目录，当使用项目别名引入文件时，也可以自动补齐了，也可以专门针对项目设置，添加到项目.vscode/setting.json文件里

"path-autocomplete.pathMappings": {
    "@": "${folder}/src",
},

VsCode直接使用debugger

场景：在浏览器debugger时，当查看到某个文件的错误时，需要修改文件，就得到编辑器里面找到该文件，比较鸡肋，现在使用vscode的debugger时，则是直接往文件里面跳转，可以直接方便的进行修改
好处：在编辑器里面直接调试，也可以明显的显示每个变量当前值，更方便操作
安装软件：Debugger for Chrome插件

配置vscode debugger

{
"version": "0.2.0",
"configurations": [
 {
   "type": "chrome", // 使用chrome进行调试,会打开浏览器,操作到断点位置会跳转到断点文件
   "request": "launch",
   "name": "Chrome项目调试", // 会直接出现在第二步里提供选择
   "url": "http://localhost:3006", // 打开的网址,端口和要调试的项目端口一致
   "webRoot": "${workspaceFolder}/src", // chrome插件带的,指定根目录或者执行文件
   "skipFiles": ["node_modules"] // 跳过node_modules文件不进入源码断点
 },
 {
   "type": "node", // 调试js文件,不需要打开浏览器直接进行调试
   "request": "launch",
   "name": "node脚本调试",
   "skipFiles": [
     "<node_internals>/**"
   ],
   "program": "${file}", // 打开当前的js文件进行调试
 }
]
}