经过配置 VSCode 来提升生产力

代码编辑器这些年发展很快。一些年前，尚未 Visual Studio Code（VS Code）。你可能在用 Sublime Text、Atom、Bracket 等。随着 VS Code 的发布，它已经变成了开发者中最受欢迎的编辑器。

为何选择 VS Code

开发者喜欢它由于

• 可定制
• Debug 方便
• 支持 Emmet
• 支持插件
• 集成了 Git
• 集成了终端
• 智能补全
• 主题等

VS Code 确实很强大，这篇文章会涉及 VS Code 的配置，介绍一些出色的插件，让 VS Code 的生产力更上一个台阶。

终端

能够用 iTerm2 和 Zsh 配置终端 2而后应用到 VS Code 终端上。

配置 Zsh 后，在 Terminal > New Terminal 启动 VS Code 内置终端运行下面的命令

source ~/.zshrc

复制代码

或者

. ~/.zshrc

复制代码

在 shell 里执行 .zshrc 配置文件里的内容。

字体

FiraCode 酷毙了，由于它支持合字 1，下载安装 FiraCode，在 settings.json 文件里添加。

"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true,

复制代码

在命令行里启动

在终端里启动 VS Code 逼格很高。按住 CMD + SHIFT + P，输入 shell command 选择 Install code command in path。在终端里切换到项目路径下，输入 code . 在 VS Code 里打开项目。

配置

VS Code 的工做空间设置位于 settings.json 中。可订制性很高。

打开 settings.json 快捷键

CMD + ,

复制代码

译注：新版本须要手动打开 .vscode/settings.json

复制粘贴下列代码到 settings.json 文件：

{
    "editor.multiCursorModifier": "ctrlCmd",
    "editor.formatOnPaste": true,
    "editor.wordWrap": "bounded",
    "editor.trimAutoWhitespace": true,
    "editor.fontFamily": "Fira Code",
    "editor.fontLigatures": true,
    "editor.fontSize": 14,
    "editor.formatOnSave": true,
    "files.autoSave": "onFocusChange",
    "emmet.syntaxProfiles": {
        "javascript": "jsx"
    },
    "eslint.autoFixOnSave": true,
    "eslint.validate": [
        "javascript",
        "javascriptreact"
    ],
    "javascript.validate.enable": true,
    "git.enableSmartCommit": true,
    "files.trimTrailingWhitespace": true,
    "editor.tabSize": 2,
    "gitlens.historyExplorer.enabled": true,
    "diffEditor.ignoreTrimWhitespace": false,
    "workbench.sideBar.location": "right",
    "explorer.confirmDelete": false,
    "javascript.updateImportsOnFileMove.enabled": "always",
}

复制代码

插件

下面是一些有用的插件，能够提高开发体验

浏览这些插件，

• 到 View -> Extensions
• 在 marketplace 搜索插件
• 点击安装

1. Auto Import

有了这个插件，就不须要再手动引入文件了。若是是基于组件的项目，直接输入组件名插件会自动处理 imported。

2. Add jsdoc comments

这个插件能够生成代码注释。选中函数首行，按 CMD + SHIFT + P，选择 Add Doc Comments。

3. ESDoc MDN

有时候，咱们可能会忘了一些 API 的用法，这个插件就派上用场了。不用打开浏览器查找文档，直接输入

//mdn [object].[method];

复制代码

4. CSS Peek

它可以直接在上代码显示它的 CSS 样式。这对于那些历史项目颇有用。

5. GitLens

GitLens 提升了 Git 的可能性。它能作的有不少，好比无缝浏览 Git 仓库，查看代码的版本、提交人等信息。

6. ESLint

这个插件给 VS Code 集成了 ESLint 来 lint 代码。须要在当前项目或者全局安装 ESLint 以最大发挥这个插件的特性。

当前项目安装 ESLint，运行

npm install eslint

复制代码

或者，全局安装

npm install -g eslint

复制代码

而后在当前项目中建立一个 .eslintrc 配置文件，运行

./node_modules/.bin/eslint --init

复制代码

或者运行

eslint --init

复制代码

7. Debugger for Chrome

这个插件能够直接在 Google Chrome 浏览器里调试 JavaScript 代码。

8. Google Fonts

使用这个扩展添加字体变得很简单。不再须要再浏览器里搜索字体了。按 CMD + SHIFT + P 搜索 Google fonts 访问字体列表。

9. TODO Hightlight

有不少 TODO 是须要优先处理的，大部分时间 TODO 都被忽略了。TODO hightlight 经过高亮它们来缓解这一问题。

10. Docker

有了这个插件能够在离线状况下建立 Dockerfiles。它还提供了语法高亮、自动补全等功能。

按 CMD + SHIFT + P 搜索 Add Docker files。

11. Code Spell Checker

可以方便的检查代码拼写错误。

12. Import Cost

Import Cost 显示代码里导入包的代价。它能帮助查找性能瓶颈。

13. HTMLHint

这个插件能校验 HTML，能够方便的写出符合标准的代码。

14. Peacock

这个插件能够改变 workspace 的颜色。当有多个 VS Code 窗口时，想要快速区分，这个插件就派上用场了。

在安装完 Peacock 后，单击设置图标 > settings，选择 workspace settings 标签页，单击 {} 粘贴以下代码。

{
    "workbench.colorCustomizations": {
        "activityBar.background": "#e90b8d",
        "activityBar.foreground": "#fff",
        "activityBar.inactiveForeground": "#b5b5b5",
    },
    "peacock.affectedElements": [
        "activityBar",
    ]
}

复制代码

还能够给 affectedElements 添加 titleBar 和 statusBar， 而后在 colorCustomizations 里定义它们的颜色。

要使用内置颜色，按 CMD + SHIFT + P，输入 peacock 选择你喜欢的主题。这会覆盖 settings.json 文件里 workspace 的定义。

15. Prettier

写代码的时候敲的最多的恐怕是空格和 tab 键，Prettier 能够帮你减负。它能格式化代码使其可读性更强。

你还可使用 Visual Studio Code 来作更多特别棒的事。

扫码关注 freeCodeCamp 官方微信公众号