Visual Studio Code
Visual Studio Code
一、插件推荐
open in browser:直接在浏览器中打开
Trailing Spaces:这个插件会帮我们标出一些无用的尾部空格,方便删除。
NightOwl:我用的主题。
Iconify IntelliSense Iconify 图标插件
I18n-ally i18n 插件
ESLint 脚本代码检查
Prettier 代码格式化
Stylelint css 格式化
DotNev .env 文件 高亮
Text Pastry Extend the power of multiple selections in VS Code. Modify selections, insert numeric sequences, incremental numbers, generate uuids, date ranges, insert continuously from a word list and more.
Auto Rename Tag 自动重命名成对的HTML标记,修改开始标签,结束标签会同步修改
Markdown Preview Enhanced Markdown预览增强插件
vue vscode snippets :代码片段
二、配置
控制编辑器是否应呈现控制字符:"editor.renderControlCharacters": true
显示空格:"editor.renderWhitespace": "all"
设置Tab为两个空格:"editor.tabSize": 2
集成终端显示行数:"terminal.integrated.scrollback": 10000
自动换行:"editor.wordWrap": "on"
关闭预览滚动条:"editor.minimap.enabled": false
启用括号对指南:Editor > Guides:Bracket Pairs
根据系统主题自动更换主题:autoDetectColorScheme
三、编辑
快速选择操作
选中多行并同时操作:选中一堆文本后,按住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>
五、命令行的使用
5.1 安装
Cmd+Shift+P
搜shell
5.2 打开文件
最基本的命令行使用方式是在 code 命令后加上文件或者文件夹的地址,这样VS Code 就会在一个新窗口中打开这个文件或文件夹。
MAC-➜ ~ code alter\ table\ adl_seller_gmv_contribute_mf.sql
5.2 窗口复用
MAC-➜ ~ code -r .
5.3 打开文件,指定跳转到某行
code -r -g package.json:128
5.4 比较两个文件的内容
code -r -d a.txt b.txt
5.5 直接管道输出内容到vscode
ls | code -