前端面试档案馆

VSCode

Macbook Pro 插件

  • EditorConfig for VS Code: 项目中配置编辑器
  • Material Icon Theme: 文件图标

Macbook Pro 配置

.editorconfig

# EditorConfig is awesome: https://EditorConfig.org

# top-most EditorConfig file
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true

[*.md]
trim_trailing_whitespace = false

主题

推荐

  • One Dark Pro: 偏红 主题 - 推荐，较温和些
  • Material theme: 主题 - 绿色
  • Material Icon Theme: 左侧文件图标
  • Bracket Pair Colorizer: 给括号加上不同的颜色

不推荐

  • Dracula Official: 吸血鬼 主题 - 废弃，颜色太亮
  • Material Theme: 编辑器 主题

必装插件

  • HTML CSS Support: 智能提示 CSS 类名以及 id
  • HTML Snippets: 智能提示 HTML 标签，以及标签含义
  • JavaScript (ES6) code snippets: ES6 语法智能提示
  • Auto Rename Tag: 自动完成另一侧标签的同步修改
  • Eslint:
  • Prettier: Prettier - Code formatter
  • Sass

辅助插件：

  • CSS Peek: 快速定位 class 位置
  • javascript console utils: 快速打印 console
  • Path Intellisense: 自动提示文件路径，支持各种快速引入文件

进阶工具：

  • Code Runner: 在 vscode 上运行各种语言，可在底部控制台输出调试
  • Git Graph：版本控制可视化
  • Live Server: 本地服务器
  • Todo Tree：记录开发进度
  • markdownlint: 格式化文档
  • Markdown All in One: 优化 Markdown 文档

相关配置 settings：

{
  // markdownlint
  "editor.codeActionsOnSave": {
    "source.fixAll.markdownlint": true
  }
}

好玩儿的插件

  • REST Client: HTTP 请求测试，替代 Postman
  • Debugger for Chrome: 映射 vscode 上的断点到 chrome 上，方便调试
  • koroFileHeader: 生成文件头部注释和函数注释的插件
    • ctrl+alt+i: 生成作者信息
    • ctrl+alt+t: 注释函数
    • ctrl+shift+p: >codedesign: 选择生成神兽
  • PolaCode: 快速生成漂亮的代码截图

推荐插件

  • Auto Import
  • Beautify
  • Npm Dependency
  • color picker // css 颜色选择器

Vue 插件

  • Vetur: vue 语法提示
  • Vue 2 Snippets
  • Vue VSCode Snippets: 官网代码片段插件

React 插件

  • Simple React Snippets：技术胖推荐
  • React/Redux/react-router Snippets: React/Redux/react-router 语法智能提示

小程序 插件

  • minapp: 微信小程序标签、属性的智能补全（同时支持原生小程序、mpvue 和 wepy 框架，并提供 snippets）
  • wechat-snippet: 代码片段自动完成 | 作为上个插件的补充
  • wxml: 高亮显示、格式化

Egg.js

  • eggjs：egg 开发快速生成代码

VSCode 快捷键（Mac 版）

光标移动

  • 移动到单词的最前面：option + ←
  • 移动到单词最末尾：option + →
  • 将当前行代码移动到上一行：option + ↑
  • 将当前行代码移动到下一行：option + ↓
  • 移动到当前行最前面：cmd + ←
  • 移动到当前行最末尾：cmd + →
  • 花括号之间跳转：cmd + shift +
  • 移动到文档第一行或最后一行：cmd + ↑ / cmd + ↓ 文本选择
  • 基于单词，行，文档的光标操作加上个 shift 键，就可以移动光标的同时选择文本；例如，选择当前光标所在位置到当前行最- 前面的代码：cmd + ← + shift

删除操作

  • 删除当前行光标后的所有字符：cmd + fn + delete
  • 删除当前行光标前的所有字符：cmd + delete
  • 删除当前单词光标后的字符：option + fn + delete
  • 把当前单词光标前的字符删除：option + delete

添加注释

  • 注释一行代码：cmd + /
  • 注释一整段代码：option + shift + A

格式化代码

  • 格式化代码：option + shift + F
  • 格式化选中行代码：cmd + K cmd + F
  • 代码缩进：cmd + shift + P

文件、符号、代码之间的快速跳转

  • control+ tab(同时按住)，继续按着 control 键，松开 tab 键： 打开当前打开文件的列表，选择要打开文件，松开 control 就能打开对应文件
  • cmd + P 打开最近打开文件列表，同时列表顶部出现搜索框，搜索文件名，回车（enter），可以再当前窗口打开对应文件；- 使用 cmd + enter 会在新的编辑器窗口打开这个文件
  • control + G：行跳转，输入对应数字回车，可以跳转到当前文件的当前行
  • cmd + P(输入文件名 + “:” + 行数)：跳转到指定文件的指定行数
  • cmd + shift + O：调出当前文件的符号（函数名等），使用方向键或者搜索，回车，就能跳转到你想要的符号；如果输入“:”可以对当前文件的所有符号进行分类
  • cmd + T：打开多个文件，搜索多个文件中的符号 F12：跳转到函数的定义处
  • cmd + F12：跳转到函数的实现位置；注：js 中没有接口的概念，定义和实现是相同的，所以 js 中的 F12 和 Cmd + F12 效果是一样的
  • shift + F12：打开函数引用的预览（把光标放在函数或者类上，按 shift+F12 可以打开一个引用列表和内嵌编辑器）

鼠标操作

  • 在 vscode 中，单击鼠标左键：把光标移动到响应的位置；双击鼠标左键：将当前光标下的单词选中；三击鼠标左键：选中当前行代码；四次点击鼠标左键：选中整个文档
  • 鼠标左键单击行号：直接选中所在行；选中后，再按着 shift，鼠标左键再次选择行：可以选中多行代码
  • 悬停提示窗口：当鼠标移动到某些文件上之后，一会就会显示跟鼠标下文本相关的信息；如果鼠标放在某个函数上，按下 cmd 时，则能在悬停提示的窗口上看到该函数的实现。
  • 代码的跳转和链接：如果我们把鼠标放在函数上时，函数下方会出现一个下划线，然后当我们按下鼠标左键时，就能跳转到该函数的定义处。cmd + 鼠标左键，跳转到函数、变量定义的地方。当我们再编写 Markdown 这样的非编程语言的文档时，还可以通过 cmd+鼠标左键能打开超级链接

折叠代码

  • cmd + option + ][

VSCode 配置（setting.json）

我的华硕游戏本 Win10：

{
  /* Editor */
  "editor.tabSize": 2,
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },

  /* 格式化，先安装扩展 Prettier-Code formatter */
  "editor.formatOnPaste": true /* 粘贴式格式化代码 */,
  "editor.formatOnSave": true /* 必须打开这个才生效 */,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  "files.associations": {
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript"
  },
  "emmet.includeLanguages": {
    "wxml": "html"
  },
  "minapp-vscode.disableAutoConfig": true,
  "terminal.integrated.fontFamily": "Meslo LG S for Powerline",

  /* file图标 */
  "workbench.iconTheme": "material-icon-theme",

  /* todo-tree settings */
  "todo-tree.tree.showScanModeButton": false,
  // 在注释中搜索以 * // ，# ，; ，开头的标签！ -- 或 / *
  "todo-tree.regex.regex": "((\\*|//|#|<!--|;|/\\*|^)\\s*($TAGS):|^\\s*- \\[ \\])",
  "todo-tree.general.tags": ["TODO", "TOFIX", "BUG", "TAG"],
  "todo-tree.regex.regexCaseSensitive": true,
  "todo-tree.filtering.excludeGlobs": ["**/node_modules"],
  "todo-tree.highlights.customHighlight": {
    "TODO": {
      "icon": "issue-closed",
      "foreground": "#02dc00",
      "rulerColour": "#02dc00",
      "iconColour": "#02dc00",
      "rulerLane": "full"
    },
    "TOFIX": {
      "icon": "beaker",
      "foreground": "#fb0200",
      "rulerColour": "#fb0200",
      "iconColour": "#fb0200",
      "rulerLane": "full"
    },
    "BUG": {
      "icon": "bug",
      "foreground": "#008000",
      "rulerColour": "#008000",
      "iconColour ": "#008000",
      "rulerLane": "full"
    },
    "TAG": {
      "icon": "tag",
      "foreground": "#67cdfe",
      "rulerColour": "#67cdfe",
      "iconColour": "#67cdfe",
      "rulerLane": "full"
    },
    "NOTE": {
      "icon": "note",
      "foreground": "#f90",
      "rulerColour": "#f90",
      "iconColour ": "#f90",
      "rulerLane": "full"
    }
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "terminal.integrated.profiles.windows": {
    "Git_Bash": {
      "path": "D:\\software\\Git\\bin\\bash.exe"
    }
  },
  "terminal.integrated.defaultProfile.windows": "Git_Bash"
}
上次更新:
Contributors: kyxiao