代码编辑器这些年发展很快。一些年前,还没有 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 酷毙了,因为它支持合字,下载安装 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 添加 titleBarstatusBar, 然后在 colorCustomizations 里定义它们的颜色。

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

15. Prettier

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

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

原文链接:https://www.freecodecamp.org/news/how-to-set-up-vscode-to-improve-your-productivity-fb14c81d4991/,作者:Chiamaka Ikeanyi