# Visual Studio Code

# 一、插件推荐

open in browser:直接在浏览器中打开

Trailing Spaces:这个插件会帮我们标出一些无用的尾部空格,方便删除。

One Dark Pro:我用的主题。

Iconify IntelliSense (opens new window) Iconify 图标插件

I18n-ally (opens new window) i18n 插件

ESLint (opens new window) 脚本代码检查

Prettier (opens new window) 代码格式化

Stylelint (opens new window) css 格式化

DotNev (opens new window) .env 文件 高亮

Auto Rename Tag 自动重命名成对的HTML标记,修改开始标签,结束标签会同步修改

Markdown Preview Enhanced Markdown预览增强插件

# 二、配置

控制编辑器是否应呈现控制字符:"editor.renderControlCharacters": true

显示空格:"editor.renderWhitespace": "all"

设置Tab为两个空格:"editor.tabSize": 2

集成终端显示行数:"terminal.integrated.scrollback": 10000

自动换行:"editor.wordWrap": "on"

关闭预览滚动条:"editor.minimap.enabled": false

# 三、编辑

# 快速选择操作

选中多行并同时操作:选中一堆文本后,按住Option + Shift + i,既可在每一行的末尾都创建一个光标。

多处地方同时操作:Option + 鼠标点击想同时操作的行

垂直选择:shift + option + 'Click' 或 shift + alt/option + command + 'arrow key'

依次选择相同字符串:按Ctrl+D,若需要跳过其中一个可以按Ctrl+K,Ctrl+D

逐个选择文本:option + Shift +右/左箭头

# 移动光标

单词之间移动光标:option+左右方向键

# 跳转

在已经打开的文件之间进行跳转:Ctrl + Tab

在当前的项目工程里,全局搜索文件:Cmd + P

跳转到指定行:Ctrl + G

括号间跳转 Windows: Ctrl+Shift+\ MAC: CMD + Shift + \

# 搜索

在当前文件中搜索,光标仍在编辑器里:Cmd + G

全局搜索:Cmd + Shift + F

查找文件名: Ctrl+P (Cmd+P on Mac)

# 代码行编辑

删除一行:Cmd + Shift + K

剪切一行:Cmd + x

当前行的下面新开始一行:Cmd + Enter

当前行的上面新开始一行:Cmd + Shift + Enter

将代码向上向下移动: Option+方向键

行合并:Ctrl + j

按照字母顺序排序:调出命令面板,然后搜索 “按升序排列行” 或者 “按降序排列行” 命令执行。

撤销光标的移动和选择:有的时候你移动完光标之后,又希望把光标回退到上一个位置,这时你只需按下 Cmd + U

# 其他

格式化代码 shift+command+f

重新打开关闭的编辑页面:command + Shift + T

通过匹配文本打开文件:command + T

显示命令窗口: command+p

开启终端:ctrl+`

# 四、Html编辑

# 4.1 插件

  • Live Server
  • Vetur
  • vue-helper

# 4.1 快速创建html

输入!生成效果如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11

# 五、命令行的使用

# 5.1 安装

Cmd+Shift+P 搜shell

# 5.2 打开文件

最基本的命令行使用方式是在 code 命令后加上文件或者文件夹的地址,这样VS Code 就会在一个新窗口中打开这个文件或文件夹。

MAC-➜  ~ code alter\ table\ adl_seller_gmv_contribute_mf.sql
1

# 5.2 窗口复用

MAC-➜  ~ code -r .
1

# 5.3 打开文件,指定跳转到某行

code -r -g package.json:128
1

# 5.4 比较两个文件的内容

code -r -d a.txt b.txt
1

# 5.5 直接管道输出内容到vscode

ls | code -
1
更新时间: 5/24/2023, 1:14:31 PM