引言

这段时间项目不是很忙，所以抽空来说一说我在项目中使用vscode的心得和体会；

所谓工欲善其事必先利其器，对于程序员来说，每天接触最多的就是编辑器了，之前用过Webstorm、Atom、SublimeText，现在使用最广泛的就是Vscode，相比前三种，Vscode更加轻量化，插件的生态范围更广泛；

每次使用一种新的编辑器，总想调到最理想的使用状态，下面就将从外观配置、代码规范检查、功能增强这四个方面分别介绍下：

外观配置

vscode-icons

vscode的文件图标主题色；

Linux & Windows系统： File > Preferences > File Icon Theme > VSCode Icons 进行设置；

MacOS系统： Code > Preferences > File Icon Theme > VSCode Icons 进行设置；

代码规范检查

EditorConfig for VS Code

主要是用来设定项目中统一的代码规范，几乎所有主流 IDE 都有支持，避免团队中每个人使用不同的编辑器导致代码格式问题；

下面是我常用的一些配置：

# http://editorconfig.org
root = true

[*]
indent_style = space
indent_size = 4
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

[Makefile]
indent_style = tab

eslint

eslint的功能：

• 在执行代码之前发现并修复语法错误，减少调试耗时和潜在 bug
• 保证项目的编码风格统一，提高可维护性
• 督促团队成员在编码时遵守约定的最佳实践，提高代码质量

// 安装eslint
npm install eslint --save-dev
// 使用eslint --init生成 .eslintrc文件
eslint --init

可以配置成独立的.eslintrc文件，直接在 package.json 文件里的 eslintConfig 字段指定配置

Prettier - Code formatter

• 美化javascript、typescript、css代码；
• 可以在根目录创建prettier.config.js文件来进行手动配置

module.exports = {
    singleQuote: true,
    trailingComma: 'es5',
    endOfLine: 'lf'
};

Document This

通过使用Ctrl + Alt + D生成jsDoc的注释；

功能增强

GitLens — Git supercharged

增强VSCode内置的Git功能, 一目了然地显示代码作者身份，无缝导航和连接Git存储库，通过强大的比较命令获得有价值的信息。

Auto Rename Tag

html标签自动重命名，我猜你肯定装过，不作过多解释；

Auto Close Tag

html标签自动闭合，不作过多解释；

Path Intellisense

路径自动补全；

将Git内置到Vscode终端

在用户设置 -> settting.json文件加入以下代码

 // #将git内置到vscode终端
"terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",