VSCode配置备忘录

[fi3ework]

主题

1. One Dark Pro 来自 Atom 的配色，非常舒服，而且配色非常细致，一些浏览器内置的函数（比如 getElementsByTags）会与普通的函数的配色不同，减少出错的可能。
2. Material Icon Theme Material Design 的图标配色，全面+漂亮。
3. Dracula Official 很有名的Dracula 主题。
4. Eva Theme 有点像 One Dark Pro，也挺好看的。

扩展

装机必备

1. ESLint, TSLint 不解释
2. Prettier 前端代码格式话题的终结者
3. Debugger for Chrome 在 VSCode 中使用 Chrome 调试 JS 代码
4. Auto Close Tag 自动补全 HTML 标签，VSCode 在 1.16 之后已经内置了 .html 文件的补全，但是这个扩展可以完成 Vue，JS，TS，JSX，TSX 的补全。
5. Auto Rename Tag 和上面的 Auto Close Tag 是好基友，这个是在修改标签的时候，自动修改与之匹配的另一半标签（事实上是同一个大佬写的插件）。
6. Path Intellisense 智能感知正在填写的路径。
7. npm Intellisense 与上一个类似，自动感知 npm 包的路径。
8. Bracket Pair Colorizer 将括号对以相同颜色标识出来，并且高亮他们之间的行。
9. Bookmarks 怀念 Visual Studio 的书签吗，这是 VSCode 的书签扩展。
10. JavaScript (ES6) code snippets 内置大量的常用代码段模板，节约生命，不要再敲重复的代码了。

推荐

1. Settings Sync 同步你的 VSCode 配置到 Github 的 gist 上，妈妈再也不用担心我换电脑了。
2. Sass 为 Sass 提供的缩进，语法高亮，自动补全，代码段扩展。
3. Document This 能根据函数自动生成规范的代码注释模板。
4. TODO Highlight 高亮 TODO/FIXME，并能在控制台中列出所有这些注释，有效减少挖坑不填。
5. Dash 在 VSCode 中把光标移到要查找的函数下，ctrl + h 直接弹出 Dash 并跳转到该函数对应的文档。
6. colorize CSS 中的设置的颜色的底色会变为该颜色，直接预览。
7. Image preview 能够在编辑器代码行数的旁边显示链接的图片的预览。
8. filesize 在底部状态栏显示当前文件大小，点击后还可以看到 gzip 后的大小、详细创建、修改时间。
9. Project Manager 给自己的项目取一个名字，随时快速的打开标记过的项目。
10. vscode-faker 本地的 mock 数据，能生成一些假的 URL，名字，日期等。
11. TypeScript Importer 自动搜索工作区文件中的TypeScript定义，并将所有已知符号作为完成项，以允许代码完成。
12. Open in Browser 虽然 VSCode 也自带了 “在浏览器中打开“ 这个功能，但是不知道为什么我不能用，这个扩展也是同样的功能，但是更强大，能选择在任何浏览器中打开。
13. IntelliSense for CSS class names in HTML CSS 类名补全，会自动扫描整个项目里面的 CSS 类名并在你输入类名时做智能提示，不过现在三大框架写多了很少手写 HTML 了。
14. Code Spell Checker 能够检测单词拼写，并且还能给出一定的周边提示。
15. Visual Studio Keymap 为 VSCode 配置与 Visual Studio 相同的快捷键，适合有使用 VS 习惯的开发者，同理也有 Sublime、Atom 的键位配置。
16. EditorConfig for VS Code 统一不同编辑器之间的风格设置

React

1. React-Native/React/Redux snippets for es6/es7 React 全家桶必备，几个字母快速敲出引入 React，生命周期，redux 的 reducer 等函数的模板。

常用快捷键

划重点！都是有用的！都给我记住了！我们的口号是！没有鼠标！（逃

编辑

1. cmd + d：选中光标当前所在的单词
2. cmd + /：注释 / 反注释
3. cmd + Enter：当前行上面新开一行
4. cmd + shift + Enter：当前行下面新开一行
5. alt + ↑/↓：上 / 下移行
6. cmd + shift + alt + arrow ：跨行列选择
7. cmd + shift + K：删除当前行，太长了，我直接定义成了 ctrl + D
8. ctrl + shift + ↑/↓：向上 / 下复制当前行
9. ctrl + ↑/↓：向上/下滚屏一行
10. cmd + PageUp/PageDown：向上/下滚屏一页
11. alt + cmd + s：保存全部文件，要按出这个键位的姿势简直反人类，我改成了 ctrl + shift + s
12. cmd + k, cmd + 1：一级折叠，折叠最外层的函数，在读源码的时候很有用
    cmd + k, cmd + 2/3/4/5...: n 级折叠，折叠第 n 层的嵌套
    cmd + k, cmd + 0：全部折叠
    cmd + k, cmd + j：展开所有
    alt + cmd + [：普通折叠光标所在的代码
    alt + cmd + ]：普通展开光标所在的代码
    cmd + k, cmd + [：递归折叠光标所在的代码（即里面的嵌套也会折叠）
    cmd + k, cmd + ]：递归展开光标所在的代码（即里面的嵌套也会展开）

侧边栏

1. ctrl + b：展开/隐藏侧边栏
2. cmd + 0：聚焦到侧边栏
3. cmd + shift + e：打开资源管理器
4. cmd + shift + d：打开 debug 栏
5. cmd + shift + f：打开搜索栏

底部面板

1. ctrl + j：打开/关闭底部面板
2. ctrl + ` ：打开/关闭终端
3. shift + cmd + u：打开/关闭输出
4. shift + cmd + m：打开/关闭问题

编辑器

1. shift + cmd + [/]：切换打开的编辑器（页面），太麻烦了，被我改成了 ctrl + [/]
2. ctrl + tab：显示当前编辑器组中所有编辑器并切换，长按可以不断切换，短按则会切换到上一个使用的编辑器。
3. ctrl + number：切换组内不同的编辑器
4. cmd + 1/2/3 ：切换并聚焦到不同的编辑器组
5. cmd + \：拆分编辑器

搜索

1. cmd + f：搜索
2. cmd + e：搜索当前选中的内容，如果没有选中的内容就搜索当前光标所在单词，相当于 ctrl + d + ctrl + f
3. cmd + alt + f：替换

配置

工作区配置

隐藏d.ts

在根目录的 .vscode 中的 settings.json 中如下配置（也就是工作区配置）

{
  "files.exclude": {
      "**/.git": true,
      "**/*.js.map": true,
      "**/*.d.ts": true,
  }
}

参考: Hide .js.map files in Visual Studio Code

Prettier 配置

module.exports = {
  // printWidth: 80,
  tabWidth: 2,
  // useTabs: false,
  semi: false,
  singleQuote: true
  // trailingComma: 'none',
  // bracketSpacing: true,
  // jsxBracketSameLine: false,
  // arrowParens: 'avoid',
  // rangeStart: 0,
  // rangeEnd: Infinity,
  // proseWrap: "preserve"
}

参考

1. vscode 前端插件推荐
2. 一些非常有用的 VSCode 扩展
3. 学几招 vscode 技巧