关于 VS Code

VS Code 简介

VS Code (opens new window) 是一个跨平台代码编辑器，由微软开发并开源，
VS Code 兼顾了轻便性和扩展性，是前端开发（甚至其他语言）的主流编辑器。
（另一些编辑器/IDE，例如：WebStorm、Sublime Text 等）

用 Brew 安装 VS Code：brew cask install visual-studio-code

安装完成后，可以 注册 code 命令 (opens new window)，
使得在命令行中执行 code ./project1 即可用 VS Code 打开项目或文件。

VS Code 基本功能

• 命令行
  • 注册 code 命令 (opens new window)
• 功能系统
  • 命令面板 (opens new window)
  • 插件系统 (opens new window)
  • 内建终端 (opens new window)
  • 内建 Git (opens new window)
  • snippets (opens new window)
  • settings (opens new window)
• 增强功能
  • intellisense (opens new window)
  • 定义跳转 (opens new window)
  • 全局重命名 (opens new window)
  • 代码格式化 (opens new window)
• 开发
  • Debugger (opens new window)
• 快捷键 (opens new window)（Mac）
  • cmd + p、cmd + shift + p
  • cmd + f、cmd + shift + f
  • cmd + d、cmd + shift + L
  • opt + shift + o：organize imports

VS Code 源码

• 从 VSCode 看大型 IDE 技术架构 (opens new window)

使用 VS Code

入门

• VS Code Top-Ten Pro Tips (opens new window)
  10 分钟：10 个 VS Code 常用功能一览
• Visual Studio Code Intro & Setup (opens new window)
  40 分钟：（2017 年的视频，有些功能现在可能改变，但总体是相似的）
  VS Code 界面功能和配置，基本使用，一些插件介绍，Git 简介
• Visual Studio Code Can Do That: Tips & Tricks : Build 2018 (opens new window)
  80 分钟：
• 25 VS Code Productivity Tips and Speed Hacks (opens new window)

插件

我用的一些重要插件：

• 功能增强
  • Settings Sync (opens new window)：同步所有配置到 Git Gist
  • GitLens — Git supercharged (opens new window)：Git 增强
  • Code Runner (opens new window)：快捷键直接运行代码文件
  • Diff Tool (opens new window)：Diff 两个文件
  • Code Outline (opens new window)：显示代码大致结构
  • Quokka.js (opens new window)：直接显示代码运行结果
  • LeetCode (opens new window)：在本地刷 LeetCode
  • open in browser (opens new window)：用浏览器打开文件
• 界面增强
  • Dracula (opens new window)：高亮主题
  • Material Icon Theme (opens new window)：图标主题
  • Better Comments (opens new window)：不同颜色标记不同类型的注释
  • Todo Tree (opens new window)：高亮显示 TODO
  • Bracket Pair Colorizer (opens new window)：用不同颜色配对不同层级的括号
  • indent-rainbow (opens new window)：彩虹色缩进
  • Import Cost (opens new window)：显示包的 import 大小
  • filesize (opens new window)：显示文件大小
• 自动化
  • Path Intellisense (opens new window)：路径自动补全
  • npm Intellisense (opens new window)：包名自动补全
  • Visual Studio IntelliCode (opens new window)：代码自动补全（AI-based）
  • Prettier (opens new window)：格式化
  • ESLint (opens new window)：静态检查
  • Sort lines (opens new window)：多行字典排序
  • Markdown All in One (opens new window)：Markdown 增强（参考 Markdown 学习指南）
• HTML/JSX
  • Auto Close Tag (opens new window)：自动闭合标签
  • Auto Rename Tag (opens new window)：自动重命名标签（同步开头结尾）
• CSS
  • 无
• JS
  • 无
• React
  • ES7 React/Redux/GraphQL/React-Native snippets (opens new window)：React 开发插件集
• Vue
  • Vue.js Extension Pack (opens new window)：Vue 开发插件集
  • Vue 2 Snippets (opens new window)：Vue 代码片段