vscode那些事儿

2015年，微软发布了Visual Studio Code

一、编辑器配置

下面介绍两种方案。

1、设置文件

文件 -> 首选项 -> 设置vscode的字体大小，缩进。

{
  "editor.fontSize": 16,
  "editor.tabSize": 4,
  "editor.detectIndentation": false
}

2、新建.editorconfig文件

root = true

[*]
charset = utf-8
indent_style = tab //使用制表符
indent_size = 4 //4个空格为一个缩进
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

二、快捷键

、在当前窗口新建标签：command + N；
、关闭当前标签：command + W；
、打开命令板：command + shift + P；
、自动补全：Tab；
、撤销：command + Z；
、向左缩进：command + [；
、向右缩进：command + ]；

、插入行后：command + Enter；
、插入行前：command + shift + Enter；
、上下移动当前行：option + ↑/↓；
、上下复制当前行：shift + option + ↑/↓；

、注释整行：command + / ；
、取消注释：连着按两次注释行的命令，即可取消注释；
、注释已选择内容：command + K + command + U ；
、删除整行：command + X ;
、删除当前行：command + shift + K ;

、查找关键字：command + F ；
、替换当前关键字：command + shift + H ；
、替换所有匹配的关键字：command + option + Enter ；
、查找并替换关键字：command + option + F ；

、选词(按住-继续选择下个相同的字符串)：command + D ；
、左右逐词选择：command + shift + ←/→ ；
、向上选中多行：shift+command + option + ↑ ；
、向下选中多行：shift+command + option + ↓ ；
、向左选中文本：shift+command + option + ← ；
、向右选中文本：shift+command + option + → ；
、选择整行(按住-继续选择下行)：command + i；
、矩形垂直选区：左手按键option + shift，右手在触摸板上选区；
、选中当前关键字出现的所有位置：command + shift + L ；

、在上面插入光标：command + option + ↑ ；
、在下面插入光标：command + option + ↓ ；
、跳到当前行的头部：Fn + ← ；
、跳到当前行的尾部：Fn + → ；
、跳到文档开始处：command + ↑ ；
、跳到文档结束处：command + ↓ ；
、跳转到某行：control + G；

、新建html文件：! + tab 或 html: + tab ；
、格式化代码：、预览markdown：command + shift + v ；

三、优点

比sublime开源，比atom更快，比webstorm更轻。用sublime适合写python，用vscode适合写typescript，内置js调试器，无插件化的代码diff，git，markdown。

四、插件

1、Prettier

格式化代码。

2、css peek

追踪css定义的地方。鼠标右键html的某个classname，转到css定义的地方。我自己尝试失败，没有找到定义的地方。

3、color info

预览颜色信息。

4、cssrem

把px转换成rem。

5、can i use

显示兼容性。光标放在某个属性上，command + shift +p，运行“Can I Use”，可以在底部状态栏看浏览器支持的情况。也可以把鼠标悬浮在某个属性上，出现下拉框显示浏览器支持的情况。

6、Path Intellisense

自动补全文件路径名。

7、Bracket Pair Colorizer

对括号着色。

8、Document This

在js，ts中自动生成注释。

9、eslint

静态代码检查。

10、lodash

提示js代码段。

11、Npm Intellisense

提示安装包。

12、vetur

vue语法高亮。

13、VueHelper

vue2的代码段。

14、vue peek

追踪单文件组件定义的地方。

15、Generator-vue-components

生成vue组件。

16、Reactjs snippets

智能提示。

17、React Component

创建组件。

18、generate-react-component

创建组件。

19、React/Redux/react-router Snippets

很有用的react生态。

20、React Native Tools

调试代码，运行react-native命令。

21、React-Native/React/Redux snippets for es6/es7

提示react的代码段。

22、code runner

运行选中的代码。

23、Quokka

调试js，ts，预览计算结果。

24、Debugger for Chrome

在vscode中，调试运行在chrome里面的js代码。

25、Open in Browser

在浏览器中打开。

26、git blame

查看谁修改了代码。

27、git history

查看提交历史。

五、某些问题

1、git找不到

报错 未找到Git。请安装Git，或在"git.path" 设置中配置。windows系统中，可以在文件 -> 首选项 -> 设置文件中配置。

{
  "git.path": "D:/software/Git/Git/bin/git.exe",
}

2、太占cpu

尤其是安装了大量的插件后，cpu使用率100%，电脑容易卡机。要么卸载一些插件，要么使用更高的电脑配置。

3、保存后变成双引号

// 文件 -> 首选项 -> 设置

{
    "eslint.autoFixOnSave": true,
    "eslint.validate": [
        "javascript",
        "javascriptreact"
    ]
}

六、断点调试代码

1、配置文件解读
2、服务端简单文件
3、服务端复杂文件
4、客户端简单文件
5、客户端复杂文件