From d2e74b882a48a4f2b88b185715c37f3de9b4b7f4 Mon Sep 17 00:00:00 2001 From: qianguyihao Date: Sun, 14 Apr 2019 19:06:41 +0800 Subject: [PATCH] =?UTF-8?q?add:VS=20Code=E7=9A=84=E5=B8=B8=E7=94=A8?= =?UTF-8?q?=E5=BF=AB=E6=8D=B7=E9=94=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 00-前端工具/01-VS Code的使用.md | 99 ++++++++++++++++++++----- 17-前端综合/02-2019年Web前端最新导航.md | 4 - 2 files changed, 80 insertions(+), 23 deletions(-) diff --git a/00-前端工具/01-VS Code的使用.md b/00-前端工具/01-VS Code的使用.md index b70afb9..5b4c3cf 100644 --- a/00-前端工具/01-VS Code的使用.md +++ b/00-前端工具/01-VS Code的使用.md @@ -1,5 +1,4 @@ - ## 前言 VS Code 本来是前端人员专用，但由于它实在是太好用了，于是，各种开发方向的码农也正在用 VS Code 作为他们的主力编程工具。甚至是一些写作的同学，也把 VS Code 作为 markdown 写作工具。 @@ -8,7 +7,7 @@ VS Code 本来是前端人员专用，但由于它实在是太好用了，于 ### VS Code 的介绍 -VS Code 的全称是 Visual Studio Code，是一款开源的、免费的、跨平台的\高性能的、轻量级的代码编辑器。它在性能、语言支持、开源社区方面，都做的很不错。 +VS Code 的全称是 Visual Studio Code，是一款开源的、免费的、跨平台的、高性能的、轻量级的代码编辑器。它在性能、语言支持、开源社区方面，都做的很不错。 ### 编辑器 与 IDE @@ -48,26 +47,31 @@ VS Code 的安装很简单，直接去官网下载安装包，然后双击安装 上图中，直接点击 download 下载安装即可。 -## VS Code的基本功能 - -### 命令面板 +## 命令面板 Mac用户按住快捷键 `Cmd+Shift+P` （Windows用户按住快捷键`Ctrl+Shift+P`），可以打开命令面板。效果如下： ![](http://img.smyhvae.com/20190329_1750_2.png) +命令面板有很多强大的功能，这里列举一些。 + +### 字体设置 + 如果们需要搜索各种设置项，就可以用到命令面板。比如说，在命令面板输入“字体”，可以进行字体的设置，效果如下： ![](http://img.smyhvae.com/20190329_2110.png) -再比如说，在命令面板输入“快捷键”，就可以进入快捷键的设置。 +### 快捷键设置 -### 插件扩展 +在命令面板输入“快捷键”，就可以进入快捷键的设置。 -VS Code 有一个很强大的功能就是支持插件扩展。我来列举一个常见的插件，这些插件都是装机必备。 +### 修改文本的大小写 +选中文本后，在命令面板中输入 transfrom，就可以修改文本的大小写了。 -### 文件对比 +20190414_1751.png + +## 文件对比 VS Code 默认支持**对比两个文件的内容**。选中两个文件，然后右键选择「将已选项进行比较」即可，效果如下： @@ -83,8 +87,8 @@ VS Code自带的对比功能并不够强大，我们可以安装插件`compareit | Mac快捷键 | Win快捷键 | 作用 | 备注 | |:-------------|:-------------|:-----|:-----| -| Cmd + ← | | 将光标定位到当前行的最左侧 | | -| Cmd + → | | 将光标定位到当前行的最右侧 | | +| **Cmd + ←** | | 将光标定位到当前行的最左侧 | 很常用 | +| **Cmd + →**| | 将光标定位到当前行的最右侧 | 很常用 | | Cmd + ↑ | Ctrl + Home | 将光标定位到文章的第一行| | | Cmd + ↓ | Ctrl + End | 将光标定位到文章的最后一行 | | @@ -92,9 +96,9 @@ VS Code自带的对比功能并不够强大，我们可以安装插件`compareit - 「方向键」：在**单个字符**之间移动光标 -- 「option + 左右方向键」：在**单词**之间移动光标 +- 「option + 左右方向键」：在**单词**之间移动光标 。（很常用） -- 「Cmd + 左右方向键」：在**整行**之间移动光标。 +- 「Cmd + 左右方向键」：在**整行**之间移动光标。（很常用） - 「Cmd + Shift + \」：在**代码块**之间移动光标。 @@ -102,13 +106,52 @@ VS Code自带的对比功能并不够强大，我们可以安装插件`compareit | Mac快捷键 | Win快捷键 | 作用 | 备注 | |:-------------|:-------------|:-----|:-----| -| **option + delete** | | 删除光标之前的一个单词 | 英文有效 | +| **option + delete** | | 删除光标之前的一个单词 | 英文有效，很常用 | | option + backspace | | 删除光标之后的一个单词 | | -| **Cmd + delete** | | 删除光标之前的整行内容 | | +| **Cmd + delete** | | 删除光标之前的整行内容 | 很常用 | | Cmd + backspace | | 删除光标之后的整行内容 | | +| --- | --- |--- | --- | +| Cmd + shift + K | Ctrl + Shift + K | 删除整行| 按「Cmd + X」也可以删除整行，虽然它的作用是剪切 | 备注：上面所讲到的移动光标、删除操作的快捷键，在其他编辑器里，也是同样的操作。 +### 编辑操作 + +| Mac快捷键 | Win快捷键 | 作用 | 备注 | +|:-------------|:-------------|:-----|:-----| +| **Cmd + Enter** | Ctrl + Enter | 在当前行下面新增一行，然后跳至该行 | 即使光标不在行尾，也能快速向下插入一行 | +| **Option + ↑** | Alt + ↑| 将代码向上移动 | 很常用 | +| **Option + ↓** | Alt + ↓| 将代码向下移动 | 很常用 | + +### JS语言相关的快捷键 +| Mac快捷键 | Win快捷键 | 作用 | 备注 | +|:-------------|:-------------|:-----|:-----| +| Cmd + / | Ctrl + / | 添加单行注释 | 很常用 | +| **Option + Shift + F** | Alt + shift + F | 代码格式化 | 很常用 | +| Ctrl + J | | 合并代码行 | Win 用户可以在命令面板索索”合并行“ | +| Cmd + | | | | +| Cmd + U | Ctrl + U | 撤销光标的移动和选择。将光标的移动回退到上一个位置 | | +| | | | | +| | | | | + +### 跳转操作 + +| Mac快捷键 | Win快捷键 | 作用 | 备注 | +|:-------------|:-------------|:-----|:-----| +| **Ctrl + Tab** | | 在已经打开的文件之间进行跳转 | | +| **Cmd + P** | Ctrl + P | 在当前的项目工程里，**全局**搜索文件 | 很常用 | +| **Ctrl + G** | | 跳转到指定行 | | +| Cmd + Shift + O | Ctrl + shift + O | 在当前文件的各种**方法之间**进行跳转 | | + +### 多光标的使用 + +**技巧1**：按住 「Option」键（windows 用户是按住「Alt」键） ，然后在页面中希望中现光标的位置点击鼠标。 + +**技巧2**：选中某个文本，然后反复按住快捷键「 Cmd + D 」键（windows 用户是按住「Ctrl + D」键）， 即可将全文中与光标当前所在位置的词相同的词逐一加入选择。 + +**技巧3**：选中一堆文本后，按住「Option + Shift + i」键（windows 用户是按住「Alt + Shift + I」键），既可在**每一行的末尾**都创建一个光标。 + + ### 自定义快捷键 按住快捷键「Cmd + Shift + P」，弹出命令面板，在命令面板中输入“快捷键”，可以进入快捷键的设置。 @@ -117,7 +160,27 @@ VS Code自带的对比功能并不够强大，我们可以安装插件`compareit ![](http://img.smyhvae.com/20190329_2120.png) -## 常用插件推荐 +## VS Code 的常用技巧 + +### 查找某个函数被在哪些地方被调用了 + +比如我已经在`a.js`文件里调用了 `foo()`函数。那么，如果我想知道`foo()`函数在其他文件中是否也被调用了，该怎么做呢？ + +做法如下：在 `a.js` 文件里，选中`foo()`函数（或者将光标放置在`foo()`函数上），然后按住快捷键「Shift + F12」，就能看到 `foo()`函数在哪些地方被调用了，非常实用。 + + +### 鼠标操作 + +- 在当前行的位置，鼠标三击，可以选中当前行。 + +- 用鼠标单击文件的**行号**，可以选中当前行。 + +- 在某个**行号**的位置，**上下移动鼠标，可以选中多行**。 + + +## 插件扩展 / 插件推荐 + +VS Code 有一个很强大的功能就是支持插件扩展。我来列举一个常见的插件，这些插件都是装机必备。 ### Settings Sync @@ -126,7 +189,7 @@ VS Code自带的对比功能并不够强大，我们可以安装插件`compareit - 作用：多台设备之间，同步 VS Code 配置。[荐] ### vscode-syncing --- + - 地址： - 作用：多台设备之间，同步 VS Code 配置。 @@ -137,5 +200,3 @@ VS Code自带的对比功能并不够强大，我们可以安装插件`compareit - - diff --git a/17-前端综合/02-2019年Web前端最新导航.md b/17-前端综合/02-2019年Web前端最新导航.md index 16c8d14..83bf022 100644 --- a/17-前端综合/02-2019年Web前端最新导航.md +++ b/17-前端综合/02-2019年Web前端最新导航.md @@ -60,10 +60,6 @@ 你的项目要是能上 GitHub trending，绝对火得一塌糊涂。 -## 学习资源 - -- 慕课网： - ## 资讯 - 虎嗅网：