Visual Studio Code 使用指南

Visual Studio Code 快捷键

# 禅模式
[cmd k z]

侧栏：cmd + B
合并代码为一行：control + J
折叠代码：option + cmd + [ / ]
重命名变量：F2


# 命令面板
命令面板：cmd + P
`@` 当前文件中搜索
`>` 搜索可用命令


# 调试
* 面板：cmd + J
* 问题面板：shift + cmd + M
* 输出面板：shift + cmd + U
* 调试面板：shift + cmd + Y


# Code Runner
运行：control + option + N
停止：control + option + M


# vscode-fileheader：添加头文件
control + option + i


# Document This：JSDoc 注释
连按两遍 control + option + d


# Prettier：代码格式化
shift + cmd + p


# ToDo
TODO:
FIXME:


# Turbo Console Log
* 自动添加 log 代码：选中变量 control + option + L
* 注释所有 log 代码：    shift + option + C
* 取消注释所有 log 代码： shift + option + U
* 删除所有 log 代码：    shift + option + D

插件和扩展

主题和图标

• Material Theme
• Material Icon Theme

字体和语言包

• Chinese (Simplified) Language Pack for Visual Studio Code - 适用于 VS Code 的中文（简体）语言包
• Fira Code - 具有连字的字体
• 设置参考：Visual Studio Code — how to enable this new sexy Fira Code font?

字体的 Font Family 设置中，修改 Menlo, Monaco, 'Courier New', monospace, 为 Fira Code，然后勾选连字选项

Git 版本控制

• GitLens - 增强了 Visual Studio Code 中内置的 Git 功能
• Git Project Manager - Git 项目管理器

远程协作开发

• Live Share

实时运行代码

• Quokka.js - 实时运行代码
• Code Runner

运行代码：control + option + n
停止运行：control + option + m

括号配对着色 (Bracket Pair Colorizer) 和彩虹缩进 (Indent Rainbow)

• Bracket Pair Colorizer - 括号配对着色
• indent-rainbow - 对空格缩进进行彩虹着色
• Indenticator - 视觉上突出显示当前缩进的深度

自动闭合标记 (Auto Close Tag) 和自动重命名标记 (Auto Rename Tag)

• Auto Close Tag
• Auto Rename Tag

snippets (代码片段)

• Emmet - 前端代码片段输入神器，VS Code 已经内置.
• JavaScript (ES6) code snippets
• smarty

文档注释

• Better Comments - 为注释添加样式

// Better Comments
  // 是否激活多行注释高亮效果
  "better-comments.multilineComments": true,
  // 是否激活普通文本注释高亮效果
  "better-comments.highlightPlainText": true,
  // 自定义 Tag 注释效果
  "better-comments.tags": [{
      "tag": "!",
      "color": "#FF2D00",
      "strikethrough": false,
      "backgroundColor": "transparent"
    },
    {
      "tag": "?",
      "color": "#3498DB",
      "strikethrough": false,
      "backgroundColor": "transparent"
    },
    {
      "tag": "//",
      "color": "#474747",
      "strikethrough": true,
      "backgroundColor": "transparent"
    },
    {
      "tag": "todo",
      "color": "#FF8C00",
      "strikethrough": false,
      "backgroundColor": "transparent"
    },
    {
      "tag": "*",
      "color": "#98C379",
      "strikethrough": false,
      "backgroundColor": "transparent"
    }
  ]

• Document This - 自动为 TypeScript 和 JavaScript 文件生成详细的 JSDoc 注释。

注释生成的方法：键盘连按两遍 control + option + D

• vscode-fileheader - 自动生成文件头注释，并自动更新修改时间
  配置文件：

// File header Configuration
"fileheader.Author": "Your Name",
"fileheader.LastModifiedBy": "Your Name",

使用方法：键盘快捷键 control + option + i

• JSDoc
• ESDoc

TODO 高亮

• TODO Highlight - 高亮 TODO/FIXME 注释，并搜寻所有 TODO。

语法：

// TODO:
// FIXME:

搜寻所有 TODO 命令：List highlighted annotations

代码格式化

• Beautify
• Prettier - Code formatter - 代码格式化工具

用法：

1. command + Shift + P -> Format Document
OR
1. Select the text you want to Prettify
2. command + Shift + P -> Format Selection

Turbo Consolo Log

Turbo Consolo log - 自动添加/删除 Log 代码

• 自动添加打印代码：选中变量，control + option + L
• 注释所有打印代码：option + shift + C
• 取消注释所有打印代码：option + shift + U
• 删除所有打印代码：option + shift + d

Polacode - 带有定制字体和主题的代码截屏

类似于 Mac 应用： Carbonize

代码规范

• ESLint - 代码规范和错误检查工具

$ sudo npm install eslint -g
$ eslint init

参考： 1-VScode 格式化 ESlint - 方法（最全最好用方法！）

ESLint、JSHint、TSLint 傻傻分不清楚

代码压缩和打包

• minifier - 代码压缩工具
• webpack - 打包器

cross-env 与 config 项目环境变量配置

1. 在papackage.json的scripts中声明

"scripts": {
    "dev": "cross-env NODE_ENV=development PORT=80 ... index.js",
    "test": "cross-env NODE_ENV=test PORT=8081 ... index.js",
},

2. 可跨平台使用的环境变量

const env = process.env.NODE_ENV;
console.log('env:', env);
// env:development
const port = process.env.PORT;
console.log('port:', port);
// port:8080

3. 根据环境变量自动加载不同的config文件

//
// ./config
//      development.js
//      test.js
//
// 1. npm run dev
// 加载 development.js
//
// 2. npm run test
// 加载 test.js

JSON 序列化

• Paste Json As Code - 将复制黏贴来的 json 文件直接序列化成代码

markdown 扩展

...

Node.js 扩展

...

Vue.js 扩展

...

C/C++ 扩展

• 在 macOS 下使用 Visual Studio Code 进行 C/C++ 开发
• C/C++ for Visual Studio Code (Preview)
• Visual Studio Code 的 C/C++ 扩展功能

Docker 和 Kubernetes 扩展

...

参考

• [译] Visual Studio Code 文档
• Gitbook：史上最好用的编辑器：VSCode
• Visual Studio Code 常用快捷键
• 在用 VSCode? 看完这篇文章，开发效率翻倍！最后一条厉害了～
• 20 个帮你更快搬砖的 vscode 快捷键
• Visual Studio Code 快捷键参考 - 中文翻译
• 提高 JavaScript 开发效率的高级 VSCode 扩展！
• 提高 JavaScript 开发效率的高级 VSCode 扩展之二！
• 使用 VSCode + ESLint 实践前端编码规范
• npm - ESLint:可组装的 JavaScript 和 JSX 检查工具
• JSDoc
• Visual Studio Code 插件市场
• VSCode Plugin