mirror of https://github.com/qianguyihao/Web.git
update: VS Code 配置项
This commit is contained in:
qianguyihao
parent
8fb1f7268e
commit
3c2861a912
|
|
@ -108,7 +108,7 @@ VS Code支持以下平台：
|
|||
|
||||
|
||||
|
||||
VS Code被分为一下五个区域：
|
||||
VS Code被分为以下五个区域：
|
||||
|
||||
- 编辑器
|
||||
- 侧边栏
|
||||
|
|
@ -158,16 +158,14 @@ VS Code 用得熟不熟，首先就看你是否会用快捷键。以下列出的
|
|||
|
||||
### 3、移动光标
|
||||
|
||||
| Mac 快捷键 | Win 快捷键 | 作用 | 备注 |
|
||||
| :---------------------- | :-------------------- | :------------------------- | :--------- |
|
||||
| 方向键 | 方向键 | 在**单个字符**之间移动光标 | 大家都知道 |
|
||||
| **option + 左右方向键** | **Ctrl + 左右方向键** | 在**单词**之间移动光标 | 很常用 |
|
||||
| **Cmd + 左右方向键** | **Fn + 左右方向键** | 在**整行**之间移动光标 | 很常用 |
|
||||
| Cmd + ← | Fn + ←（或 Win + ←） | 将光标定位到当前行的最左侧 | 很常用 |
|
||||
| Cmd + → | Fn + →（或 Win + →） | 将光标定位到当前行的最右侧 | 很常用 |
|
||||
| Cmd + ↑ | Ctrl + Home | 将光标定位到文章的第一行 | |
|
||||
| Cmd + ↓ | Ctrl + End | 将光标定位到文章的最后一行 | |
|
||||
| Cmd + Shift + \ | | 在**代码块**之间移动光标 | |
|
||||
| Mac 快捷键 | Win 快捷键 | 作用 | 备注 |
|
||||
| :---------------------- | :----------------------------------------- | :----------------------------------------------------------- | :--------- |
|
||||
| 方向键 | 方向键 | 在**单个字符**之间移动光标 | 大家都知道 |
|
||||
| **option + 左右方向键** | **Ctrl + 左右方向键** | 在**单词**之间移动光标 | 很常用 |
|
||||
| **Cmd + 左右方向键** | **Fn + 左右方向键**（或 Win + 左右方向键） | 将光标定位到当前行的最左侧、最右侧（在**整行**之间移动光标） | 很常用 |
|
||||
| Cmd + ↑ | Ctrl + Home | 将光标定位到文件的第一行 | |
|
||||
| Cmd + ↓ | Ctrl + End | 将光标定位到文件的最后一行 | |
|
||||
| Cmd + Shift + \ | | 在**代码块**之间移动光标 | |
|
||||
|
||||
### 4、编辑操作
|
||||
|
||||
|
|
@ -190,20 +188,27 @@ VS Code 用得熟不熟，首先就看你是否会用快捷键。以下列出的
|
|||
|
||||
你看到了没？上面的两个场景，我全程没有使用鼠标，只通过简单的复制粘贴和方向键，就做到了如此迅速的copy代码。你说是不是很高效？
|
||||
|
||||
### 5、多光标编辑
|
||||
### 5、多光标选择/多光标编辑
|
||||
|
||||
| Mac 快捷键 | Win 快捷键 | 作用 | 备注 |
|
||||
| ----------------------------- | -------------------------- | ------------------------------------ | ---- |
|
||||
| **Cmd + Option + 上下键** | **Ctrl + Alt + 上下键** | 在连续的多列上，同时出现光标 | |
|
||||
| **Option + 鼠标点击任意位置** | **Alt + 鼠标点击任意位置** | 在任意位置，同时出现光标 | |
|
||||
| Option + Shift + 鼠标拖动 | Alt + Shift + 鼠标拖动 | 在选中区域的每一行末尾，出现光标 | |
|
||||
| Cmd + Shift + L | Ctrl + Shift + L | 在选中文本的所有相同内容处，出现光标 | |
|
||||
多光标选择在编程的**提效**方面可谓立下了汗马功劳。因为比较难记住，所以你要时不时回来复习这一段。
|
||||
|
||||
其他的多光标编辑操作：（很重要）
|
||||
| Mac 快捷键 | Win 快捷键 | 作用 | 备注 |
|
||||
| --------------------------------- | ------------------------------ | ------------------------------------------------------------ | ---------------------------------------- |
|
||||
| **Option + 鼠标连续点击任意位置** | **Alt + 鼠标连续点击任意位置** | 在任意位置，同时出现多个光标 | 很容易记住 |
|
||||
| Cmd + D | Ctrl + D | 将光标放在某个单词的位置（或者先选中某个单词），然后反复按下「 **Cmd + D** 」键， 即可将下一个相同的词逐一加入选择。 | 较常用 |
|
||||
| **Cmd + Shift + L** | **Ctrl + Shift + L** | 将光标放在某个单词的位置（或者先选中某个单词），然后按下快捷键，则所有的相同内容处，都会出现光标。 | 很常用。比如变量重命名的时候，就经常用到 |
|
||||
|
||||
### 6、多列选择/多列编辑
|
||||
|
||||
多列选择是更高效的多光标选择，所以单独列成一小段。
|
||||
|
||||
| Mac 快捷键 | Win 快捷键 | 作用 | 备注 |
|
||||
| ------------------------- | ---------------------- | ------------------------------------------------------------ | -------------------- |
|
||||
| Cmd + Option + 上下键 | Ctrl + Alt + 上下键 | 在连续的多列上，同时出现多个光标 | 较常用 |
|
||||
| Option + Shift + 鼠标拖动 | Alt + Shift + 鼠标拖动 | 按住快捷键，然后把鼠标从区域的左上角拖至右下角，即可在选中区域的每一行末尾，出现光标。 | 很神奇的操作，较常用 |
|
||||
| **Option + Shift + i** | **Alt + Shift + I** | 选中一堆文本后，按下快捷键，既可在**每一行的末尾**都出现一个光标。 | 很常用 |
|
||||
|
||||
- 选中某个文本，然后反复按住快捷键「 **Cmd + D** 」键（windows 用户是按住「**Ctrl + D**」键）， 即可将全文中相同的词逐一加入选择。
|
||||
|
||||
- 选中一堆文本后，按住「**Option + Shift + i**」键（windows 用户是按住「**Alt + Shift + I**」键），既可在**每一行的末尾**都创建一个光标。
|
||||
|
||||
### 6、删除操作
|
||||
|
||||
|
|
@ -427,16 +432,28 @@ VS Code 会在代码的右侧，默认显示缩略图。你可以在设置项里
|
|||
|
||||
**方式一**：
|
||||
|
||||
改完代码后，默认不会自动保存。你可以在设置项里搜索`files.autoSave`，修改配置项如下：
|
||||
改完代码后，默认不会自动保存。你可以在设置项里搜索`files.autoSave`，修改参数值为`afterDelay` ，即可自动保存。如下：
|
||||
|
||||
|
||||
|
||||
|
||||
上图中，我们将配置项修改为`onFocusChange`之后，那么，当光标离开该文件后，这个文件就会自动保存了。**非常方便**。
|
||||
files.autoSave的参数值有以下几种：
|
||||
|
||||
- off（默认值）：不自动保存。
|
||||
- afterDelay（建议配置）：文件修改超过一定时间（默认1秒）后，就自动保存。
|
||||
- onFocusChange：当前编辑器失去焦点时，则自动保存。如果我们将配置项修改为`onFocusChange`之后，那么，当光标离开该文件后，这个文件就会自动保存了。
|
||||
- onWindowChange：VS Code软件失去焦点时，则自动保存。
|
||||
|
||||
**方式二**：
|
||||
|
||||
当然，你也可以直接在菜单栏选择「文件-自动保存」。勾选后，当你写完代码后，文件会立即实时保存。
|
||||
|
||||
### 7、热退出
|
||||
|
||||
当VS Code退出后，它可以记住未保存的文件。如果你希望达到这种效果，那么，你需要先将设置项`files.hotExit`的值改为 `onExitAndWindowClose`。这个配置项要不要改，看你个人需要。比如我自己平时设置的值是`onExit`。
|
||||
|
||||
|
||||
|
||||
|
||||
### 7、保存代码后，是否立即格式化
|
||||
|
||||
保存代码后，默认**不会立即**进行代码的格式化。你可以在设置项里搜索`editor.formatOnSave`查看该配置项：
|
||||
|
|
@ -469,9 +486,9 @@ VS Code 会根据你所打开的文件来决定该使用空格还是制表。也
|
|||
|
||||
|
||||
|
||||
这样做，是为了取消系统的自动缩进。 参考链接：https://www.yisu.com/zixun/327399.html
|
||||
这样做，是为了取消系统的自动缩进，建议自己手动格式化比较好。 参考链接：https://www.yisu.com/zixun/327399.html
|
||||
|
||||
- **editor.insertSpaces**：按 Tab 键时插入空格（默认）。截图如下：
|
||||
- **editor.insertSpaces**：按 Tab 键时插入空格（默认值为true）。截图如下：
|
||||
|
||||
|
||||
|
||||
|
|
@ -511,7 +528,7 @@ VS Code 会根据你所打开的文件来决定该使用空格还是制表。也
|
|||
|
||||
看到了没？哪里有空格、哪里是缩进，全都一目了然。
|
||||
|
||||
### 9、新建文件后的默认文件类型
|
||||
### 12、新建文件后的默认文件类型
|
||||
|
||||
当我们按下快捷键「Cmd + N」新建文件时，VS Code 默认无法识别这个文件到底是什么类型的，因此也就无法识别相应的语法高亮。
|
||||
|
||||
|
|
@ -521,7 +538,7 @@ VS Code 会根据你所打开的文件来决定该使用空格还是制表。也
|
|||
|
||||
上图中的红框部分，填入你期望的默认文件类型。我填的是`html`类型，你也可以填写成 `javascript` 或者 `markdown`，或者其他的语言类型。
|
||||
|
||||
### 10、删除文件时，是否弹出确认框
|
||||
### 13、删除文件时，是否弹出确认框
|
||||
|
||||
当我们在 VS Code 中删除文件时，默认会弹出确认框。如果你想修改设置，可以在设置项里搜索`xplorer.confirmDelete`。截图如下：
|
||||
|
||||
|
|
@ -529,6 +546,20 @@ VS Code 会根据你所打开的文件来决定该使用空格还是制表。也
|
|||
|
||||
我建议这个设置项保持默认的打钩就好，不用修改。删除文件前的弹窗提示，也是为了安全考虑，万一手贱不小心删了呢？
|
||||
|
||||
### 14、在新窗口打开文件/文件夹
|
||||
|
||||
通过 `window.openFoldersInNewWindow`（默认值为off）和`window.openFilesInNewWindow`（默认值为default），可以配置在打开文件夹、打开文件时，是否开启一个新的窗口。我个人建议，把这两个配置项都设置为 on，避免旧的窗口被覆盖：
|
||||
|
||||
|
||||
|
||||
补充知识—— `window.restoreWindows`可以用来配置 如何恢复之前的会话窗口。涉及到的场景是：你把 VS Code 关闭了，然后又打开了，是否要展示之前打开过的文件、文件夹？参数值有以下几种：
|
||||
|
||||
- one：默认配置。只会重新打开上一次回话中最后操作的那一个窗口。
|
||||
- none：打开一个空的窗口，不包含任何文件、文件夹。
|
||||
- all（建议配置）：恢复上一次会话中的所有窗口。
|
||||
- folders：恢复上一次会话中包含文件夹的窗口。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -585,13 +616,13 @@ Mac 用户按住快捷键 `Cmd + \`， Windows 用户按住快捷键`Ctrl + \`
|
|||
|
||||
当然，使用快捷键`Cmd + \`只是其中一种方式，我们还有很多种方式打开并行编辑。我们来做一个汇总。
|
||||
|
||||
如果你已经打开了一个编辑器，那么可以通过一下几种方式在另一侧打开另一个编辑器：（按照使用频率，从高到低排序）
|
||||
如果你已经打开了一个编辑器，那么可以通过以下几种方式在另一侧打开另一个编辑器：（按照使用频率，从高到低排序）
|
||||
|
||||
- 使用快捷键`Cmd + \`将编辑器一分为二。
|
||||
- 使用快捷键`Cmd + P`调出文件列表，选择要打开的文件，然后按下 `Cmd + Enter`快捷键。【重要】
|
||||
- 按住 Option 键的同时，单击资源管理器的文件（Windows 用户是按 Alt 键）。
|
||||
- 点击编辑器右上角的 `Split Editor`按钮。
|
||||
- 选择菜单栏「查看--> 编辑器布局」，然后选择你具体想要的布局，如下图所示。
|
||||
- 选择菜单栏「查看--> 编辑器布局」，然后选择你具体想要的布局，如下图所示：
|
||||
|
||||
|
||||
|
||||
|
|
@ -670,6 +701,8 @@ source ~/.bash_profile
|
|||
|
||||
- Cmd + G（Win 用户是 F3）：在当前文件中搜索，光标仍停留在编辑器里
|
||||
|
||||
多个搜索结果出来之后，按下 Enter 键之后跳转到下一个搜索结果，按下 Shift + Enter 键之后跳转到上一个搜索结果。
|
||||
|
||||
另外，你可能会注意到，搜索框里有很多按钮，每个按钮都对应着不同的功能，如下图所示：
|
||||
|
||||
|
||||
|
|
@ -848,29 +881,13 @@ VS Code 默认支持 Emmet。更多 Emmet 语法规则，可以自行查阅。
|
|||
|
||||
上方的第二行配置，取决于个人习惯，我是直接设置为`"editor.fontLigatures": null`，因为我不太习惯连字。
|
||||
|
||||
### 19、代码格式化：Prettier
|
||||
### 19、代码格式化
|
||||
|
||||
我们可以使用 `Prettier`进行代码格式化，会让代码的展示更加美观。步骤如下：
|
||||
VS Code 默认对 JavaScript、TypeScript、JSON、HTML 提供了开箱即用的代码格式化支持。其他语言则需要先安装相应的插件才能支持。
|
||||
|
||||
（1）安装插件 `Prettier`。
|
||||
另外，我们还可以安装 Prettier 插件进行**更精细**的代码格式化。下一段将插件的时候，会讲解。
|
||||
|
||||
（2）在项目的根路径下，新建文件`.prettierrc`，并在文件中添加如下内容：
|
||||
|
||||
```json
|
||||
{
|
||||
"printWidth": 150,
|
||||
"tabWidth": 4,
|
||||
"semi": true,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "es5",
|
||||
"tslintIntegration": true,
|
||||
"insertSpaceBeforeFunctionParenthesis": false
|
||||
}
|
||||
```
|
||||
|
||||
上面的内容，是我自己的配置，你可以参考。
|
||||
|
||||
更多配置，可以参考官方文档：<https://prettier.io/docs/en/options.html>
|
||||
|
||||
### 20、文件传输：sftp
|
||||
|
||||
|
|
@ -1094,11 +1111,35 @@ React/Redux/react-router 的语法智能提示。
|
|||
|
||||
### 21、Prettier：代码格式化
|
||||
|
||||
Prettier 是一个代码格式化工具，只关注格式化，但不具备校验功能。在一个多人协同开发的团队中，统一的代码编写规范非常重要。一套规范可以让我们编写的代码达到一致的风格，提高代码的可读性和统一性。自然维护性也会有所提高。
|
||||
Prettier 是一个代码格式化工具，**只关注格式化，但不具备校验功能**。在一个多人协同开发的团队中，统一的代码编写规范非常重要。一套规范可以让我们编写的代码达到一致的风格，提高代码的可读性和统一性。自然维护性也会有所提高，代码的展示也会更加美观。
|
||||
|
||||
### 22、ESLint：代码格式校验
|
||||
步骤如下：
|
||||
|
||||
日常开发中，建议用可以用 Prettier 做代码格式化，然后用 eslint 做校验。
|
||||
（1）安装插件 `Prettier`。
|
||||
|
||||
（2）在项目的根路径下，新建文件`.prettierrc`，并在文件中添加如下内容：
|
||||
|
||||
```json
|
||||
{
|
||||
"printWidth": 150,
|
||||
"tabWidth": 4,
|
||||
"semi": true,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "es5",
|
||||
"tslintIntegration": true,
|
||||
"insertSpaceBeforeFunctionParenthesis": false
|
||||
}
|
||||
```
|
||||
|
||||
上面的内容，是我自己的配置，你可以参考。
|
||||
|
||||
更多配置，可以参考官方文档：<https://prettier.io/docs/en/options.html>
|
||||
|
||||
|
||||
|
||||
### 22、ESLint：代码格式的校验
|
||||
|
||||
日常开发中，建议用 Prettier 做代码格式化，然后用 eslint 做校验。很多人把这两个插件的功能弄混了。
|
||||
|
||||
### 23、Beautify
|
||||
|
||||
|
|
|
|||
|
|
@ -192,11 +192,13 @@ BFF，即 Backend For Frontend（服务于前端的后端）。玉伯在《[从
|
|||
|
||||
前端正在广泛使用的构建工具 gulp、Webpack，就是基于 Node.js 来实现的。
|
||||
|
||||
### 5、 做 PC 端的软件（基于 Electron 框架）
|
||||
### 5、 做 PC 客户端软件（基于 Electron 框架）
|
||||
|
||||
Electron 框架就是基于 Node.js 的。也可以说：Electron 是 Node.js 在PC客户端的技术。
|
||||
Electron 框架就是基于 Node.js 的，可以用来开发客户端软件。
|
||||
|
||||
有一点你可能会感到惊讶：程序员们都在用的代码编辑器 VS Code 软件， 就是用 JS 语言实现的。
|
||||
Electron 原名为 Atom Shell，是由 GitHub 开发的一个开源框架。Electron 以 Node.js 作为运行时（runtime），以 chromium 作为渲染引擎，使开发者可以使用 JS 这种前端技术栈开来发跨平台的桌面GUI应用程序。
|
||||
|
||||
有一点你可能会感到惊讶：程序员们都在用的代码编辑器 VS Code 软件， 就是基于 Electron 框架来开发的。其他使用 Electron 进行开发的知名应用还有：Skype、GitHub Desktop、Slack、WhatsApp等。
|
||||
|
||||
还有一个例子是：电子游戏直播网站 [Twitch](https://www.twitch.tv/)，号称是国外游戏直播的鼻祖，它在 PC 端的客户端软件，就是用 Electron 框架的。你会发现，Twitch 的网站视觉，和 PC 端的视觉，几乎是一样的。如果两端都采用 JS 语言，就可以极大的复用现有的工程。
|
||||
|
||||
|
|
|
|||
|
|
@ -118,7 +118,7 @@ Koa 是一个非常优秀的框架，然而对于企业级应用来说，它还
|
|||
|
||||
Electron（原名为Atom Shell）是GitHub开发的一个开源js框架。 它允许使用Node.js（作为后端）和Chromium（作为前端）完成桌面GUI应用程序的开发。
|
||||
|
||||
也就是说，我们可以用 js 语言开发客户端软件了。其实呢，VS Code 这个客户端软件就是用 js 语言写的。
|
||||
也就是说，我们可以用 js 语言开发客户端软件了。比如说，VS Code 这个客户端软件就是用 js 语言写的。
|
||||
|
||||
- Redux：<https://www.redux.org.cn/>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue