VS Code 是流行的代码编辑器，可以通过插件支持各种语句的高亮、调试、编译等

设置

字体喜欢使用 JetBrains Mono，字号设为 14，并开启连字

快捷键

功能	快捷键	功能	快捷键
移动行	`alt` + `up` / `down`	查找文件	`ctrl` + `p`
显示相关插件的命令	`ctrl` + `shift` + `p` 或 `F1`	多行同时添加内容（光标）	`ctrl` + `alt` + `up` / `down`
光标跳到下一个单词	`ctrl`+ `left` / `RIGHT`	行增加/减少缩进	`ctrl` + `[` / `]`
隐藏底部控制面板	`ctrl` + `j`	显示/隐藏左侧目录栏	`ctrl` + `b`

语言支持

Markdown

Markdown All in One

几乎涵盖了大部分内容

Markdown Preview Enhanced

Markdown 预览

Unicode Latex

将 Latex 符号转化为 Unicode 符号，更容易辨认

JavaScript/TypeScript + React

原生支持（毕竟 VS Code 就是用 TypeScript 编写的，所有的扩展都是用 JS 写的，但可以添加一些提高开发效率的代码片段

JavaScript (ES6) code snippets

支持 JS/TS，JSX/TSX，html 等

摘录一些常用的：

导入与导出

触发方式	功能	示例
`imp`	导入整个模块	`import fs from 'fs';`
`imn`	匿名模块导入	`import 'animate.css'`
`imd`	使用解构导入	`import {rename} from 'fs';`
`rqr`	需要包	`require('');`
`req`	以 const 需要包	`const packageName = require('packageName');`
`mde`	默认导出	`module.exports = {};`
`env`	导出命名变量	`export const nameVariable = localVariable;`
`enf`	导出命名函数	`export const log = (parameter) => { console.log(parameter);};`
`edf`	默认导出函数	`export default function fileName (parameter){ console.log(parameter);};`

多样的方法

触发方式	功能	示例
`fre→`	forEach	`array.forEach(currentItem => {})`
`fof→`	for ... of for	`(const item of object) {}`
`fin→`	for ... in	`for(const item in object) {}`
`anfn→`	创建匿名函数	`(params) => {}`
`nfn→`	创建命名函数	`const add = (params) => {}`
`dob→`	解构对象	`const {rename} = fs`
`dar→`	解构数组	`const [first, second] = [1,2]`
`sti→`	设置间隔	`setInterval(() => {});`
`sto→`	设置时间	`setTimeout(() => {});`

控制台方法

触发方式	功能	示例
`clg→`	console log	`console.log(object)`
`clo→`	console log 对象及其名字	`console.log('object :>> ', object);`

ES7+ React/Redux/React-Native snippets

React 的代码片段，参见 vscode-react-javascript-snippets

ESLint

向 VS Code 添加 ESLint 支持

提示是英文，可以改为中文 ESLint Chinese Rules

Python

相对于编写大型项目的 PyCharm 和分析数据的 Jupyter Notebook，VS Code 中的 Python 更适合小型项目的开发

Python

Python 的基础支持

Python Indent

纠正 VS Code 中 Python 的缩进

扩展推荐

主题

Atom One Light Theme

个人比较喜欢白色主题，可能是通常在白天编程养成的

Material Icon Theme

图标库

功能强化

Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code

中文语言包

代码截图

可以简单地在几个项目之间切换

以十六进制查看二进制文件

可以一键运行多种语言的代码，也可以只运行选中部分的代码

Partial Diff

可以部分比较代码

VS Code Counter

统计项目/目录中代码的行数，并分别以语言和目录等统计

突出错误提示

预览正则表达式的效果

统计编程时间

支持直接查看 pdf

以树视图查看并高亮 TODO，FIXME 等注释

TODO Highlight

类似于上面的，但是只有高亮的效果

json

在侧边栏添加了快速查看和操作 JSON 的按钮

Git 集成插件

GitHub Pull Requests

查看 GitHub 上的 Pull Request 和 Issue

Git Graph

Git 图形化显示和操作

Git Blame

可以在状态栏看到当前所选行的 git blame 信息

gitignore

通过输入 Add gitignore 从 github/gitignore 存储库中拉取 .gitignore 模板来添加本地文件.gitignore

GitLens — Git supercharged

功能更多，更强，但是要付费

开发效率

change-case

改变命名风格

命令	变量名	命令	变量名
camel	`findFirst`	constant	`FIND_FIRST`
dot	`find.first`	kebab 或 param	`find-first`
lower	小写	lowerFirst	首字母小写
upper	大写	upperFirst	首字母大写
no	`find first`	pascal	`FindFirst`
path	`find/first`	sentence	`Find first`
snake	`find_first`	swap	大小写反转
title	`find_first`

Codelf

给变量取名

Prettier - Code formatter

自动格式化代码

还有支持 ESLint 的版本 Prettier ESLint

需要在项目中安装依赖：npm install -D prettier eslint prettier-eslint
对于 TypeScript，还需要安装：npm install -D @typescript-eslint/parser typescript

shell-format - Visual Studio Marketplace

shell scripts, Dockerfile, gitignore, dotenv, /etc/hosts, jvmoptions 等的格式化工具

使用方法：输入 Format Document

Image preview

图片预览

Better Comments

可以给注释分类，分别是

*：强调
!：警告
?：问题
TODO：代办

better-comments

indent-rainbow

彩虹色的缩进（写 Python 必备）

这是我比较喜欢的配置：

// Using the light mode
"indentRainbow.indicatorStyle": "light",
// we use a simple 1 pixel wide line
"indentRainbow.lightIndicatorStyleLineWidth": 1,
// the same colors as above but more visible
"indentRainbow.colors": [
    "rgba(255,255,64,0.3)",
    "rgba(127,255,127,0.3)",
    "rgba(255,127,255,0.3)",
    "rgba(79,236,236,0.3)"
],