VSCode

• 【利器篇】前端40+精选VSCode插件，总有几个你未拥有！- 掘金 (opens new window)

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",
}