安装VSCode

官网下载安装，安装完成后使用快捷键ctrl + shift + x搜索插件。

界面优化

1、汉化

安装 Chinese (Simplified) Language Pack for Visual Studio Code 插件，完成后重启 VS Code 即可。

2、主题

浅色主题：Atom One Light Theme
深色主题：One Dark Pro

3、注释

koroFileHeader

在vscode中用于生成文件头部注释和函数注释的插件

语言支持

4、vue支持

Vetur 插件提供 Vue 语法高亮，代码片段，自动补全，格式化代码等功能。

5、SVG

SVG 插件提供语法高亮，自动补全，文档提示，颜色选择，URL 跳转，ID 快速修改，SVG 预览与导出 PNG 等功能。

代码片段

6、Vue VSCode Snippets

Vue VSCode Snippets自动补全插件

项目管理

7、统一代码风格

EditorConfig 有助于维护跨多个编辑器和IDE从事同一项目的多个开发人员的一致编码风格。

在项目根目录下新建一个.editorconfig文件，该文件用来定义项目的编码规范，并且其优先级比编辑器自身的设置要高。安装 EditorConfig for VS Code 插件后，保存/格式化文件时.editorconfig中的配置将应用到编辑文件中。注意，格式化规则一定要和各种 lint 规则保持一致。

# 如果未指定 root = true，则 EditorConfig 将继续在项目外部查找 .editorconfig 文件。
root = true

# 设置文件字符集
charset = utf-8

# 以下配置适用文件类型，可对不同文件类型设置不同规则
[*.{js,jsx,ts,tsx,vue,scss,json}]

# 保存时将换行符转换为 LF
end_of_line = lf

# 缩进格式
indent_style = space
indent_size = 2

# 保存时自动删除行尾的空白字符
trim_trailing_whitespace = true

# 保存时在文件末尾插入空白行
insert_final_newline = true

8、ESLint

代码格式检查工具，安装 ESLint 插件之前，需要运行npm install -g eslint

9、项目切换

保存项目目录，方便切换不同项目。

安装 Project Manager 插件。完成后多出一个 Project Manager 活动栏，已保存的项目都在这里面进行管理。

10、Git 可视化

VS Code 中的 SourceTree

安装 Git Graph 插件，使用快捷键Shift + Alt + G打开 Git Graph 页面。

11、Git 日志

一个强大的 Git 日志管理工具 GitLens — Git supercharged

安装完成后，每一行代码旁边都会显示日志，默认格式为：提交者 + 修改日期 + commit message

12、项目管理

安装gitflow插件

13、git-commit-lint-vscode

在 vscode 扩展中搜索 git-commit-lint-vscode 即可找到该插件

实用工具

14、css自动排序

为 CSS 属性排序, 让我们的代码更加简洁优雅。

安装 CSScomb 插件。在settings.json中添加配置：

{
    "csscomb.formatOnSave": true, // 保存时自动格式化
}

在项目根目录新建一个csscomb.json文件（或者也可以直接设置”csscomb.preset”的值为你的自定义 JSON 对象）。
复制官方配置文件内容到csscomb.json。
修改如下：

// 修改缩进格式
+ "block-indent": "  ",
- "block-indent": "    ",
// 花括号前不换行
+ "space-before-opening-brace": " ",
- "space-before-opening-brace": "\n",
// CSS 声明之间插入换行符
+ "space-between-declarations": "\n",