我最喜欢的 VSCode 扩展和设置

本文最初于 2018 年 11 月 20 日发布于：https://nickjanetakis.com/blog/my-favorite-vscode-extensions-and-settings

补充：我不再使用这个设置了。2019 年 3 月，我改用 Vim，因为 VSCode 的编写效率太低。阅读我为什么改用 Vim。

我认为自己是一名通用开发人员。作为一名自由职业者，我倾向于涉猎各种不同的语言和技术，所以能够使用像 VSCode 这样几乎适用于所有领域的编辑器真是太好了。

VSCode 扩展

如果您打开 VSCode 扩展面板 ( CTRL + Shift + X)，您可以按名称搜索这些扩展中的任何一个，以获取每个扩展的完整详细信息并在那里下载它们。

列表之后，还有一个 1 行脚本，您可以使用它来安装所有这些扩展，当然您也可以编辑掉您不想要的扩展。

主题

让我们从两个主题开始。

虽然我大部分时间都使用浅色主题，但我喜欢保留浅色和深色主题。我通常在光线充足的房间里写代码，我发现浅色主题更容易阅读文本，但关灯后我会使用深色主题。

GitHub Plus 主题 Elixir 适配 [Light]

这个主题与常规的 GitHub Plus Light 主题完全相同，但它对 Elixir 的语法着色支持更好。它的外观如下。

德古拉官方[黑暗]

德古拉，你绝对不会出错！它长这样。

功能

这将是按字母顺序排列的非主题扩展列表。

自动热键

AutoHotkey 是适用于 Windows 的脚本语言。此扩展添加了语法高亮和代码片段。

Docker

Docker 不仅为 Dockerfiles 添加了语法高亮，还为 Dockerfiles 和 docker-compose.yml 文件添加了自动完成功能。非常方便！

DotENV

DotENV 为具有环境变量的点文件添加语法高亮显示，例如.env。

erb

erb 为 ERB 模板语言添加了语法高亮支持。

Excel 查看器

Excel Viewer 提供预览窗口，方便您打开 CSV 文件并按列排序。非常适合轻量级 CSV 浏览。

获取文本

gettext 为po、pot和potx文件 (i18n 相关) 添加了语法高亮显示。

HTML 代码片段

HTML Snippets 添加了大量 HTML5 代码片段。

金贾

Jinja 为 Jinja 2 模板语言添加了语法高亮和代码片段。

Liquid 语言支持

Liquid 语言支持为 Liquid 模板语言添加了语法高亮显示。

Markdown 预览 Github 样式

Markdown 预览 Github Styling 可以将 Markdown 预览设置为与你的README.md文件在 GitHub 上完全相同。真的非常实用！

nginx.conf

nginx.conf 为 nginx 配置文件添加语法高亮。

偏微分

部分差异可让您比较文件、剪贴板和选定文本之间的文本差异。

彩虹 CSV

Rainbow CSV 通过对每列进行不同的着色，让查看 CSV 文件变得非常容易。

shellcheck

shellcheck 是 Shell / Bash 脚本的优秀 linting 工具。

拼写正确

Spell Right 是一款超快的离线拼写检查器。

systemd 单元文件

systemd-unit-file 为 systemd 单元文件添加语法高亮显示。

待办事项树

Todo Tree 将在您的代码中查找行TODO，FIXME并在侧边栏的树视图中显示它们。

vscode-elixir

vscode-elixir 为 Elixir 编程语言添加了语法高亮等功能。

vscode-gemfile

vscode-gemfile 可让您将鼠标悬停在您的 gem 上Gemfile并在 RubyGems 上获取它的链接。

VSCodeFirstUpper

VSCodeFirstUpper 允许你将文本字符串转换为不同的标题大小写样式。我所有的博客文章标题都用它。

字数统计

WordCounter 在您的状态栏中添加字数、字符数、行数和阅读时间的计数。

快速安装这些扩展

只需一行代码即可安装上述所有扩展程序。只需将其复制/粘贴到您的终端即可。您可以从下面的列表中删除您不需要的扩展程序。

code \
  --install-extension abusaidm.html-snippets \
  --install-extension ban.spellright \
  --install-extension bierner.markdown-preview-github-styles \
  --install-extension bung87.vscode-gemfile \
  --install-extension coolbear.systemd-unit-file \
  --install-extension CraigMaslowski.erb \
  --install-extension dracula-theme.theme-dracula \
  --install-extension fimars.github-plus-theme-elixir-adapted \
  --install-extension GrapeCity.gc-excelviewer \
  --install-extension Gruntfuggly.todo-tree \
  --install-extension hangxingliu.vscode-nginx-conf-hint \
  --install-extension kirozen.wordcounter \
  --install-extension mechatroner.rainbow-csv \
  --install-extension mikestead.dotenv \
  --install-extension mjmcloug.vscode-elixir \
  --install-extension mrorz.language-gettext \
  --install-extension neilding.language-liquid \
  --install-extension PeterJausovec.vscode-docker \
  --install-extension ryu1kn.partial-diff \
  --install-extension samuelcolvin.jinjahtml \
  --install-extension shanoor.vscode-nginx \
  --install-extension slevesque.vscode-autohotkey \
  --install-extension timonwong.shellcheck \
  --install-extension wholroyd.jinja \
  --install-extension zkirkland.vscode-firstupper

我通过运行以下命令生成了该列表：

code --list-extensions | xargs -L 1 echo code --install-extension

等一下，Python 和 Ruby 语言扩展在哪里？

我没有使用它们，因为我的所有应用程序都在 Docker 内部运行，所以自动完成之类的功能对我没有帮助，因为 VSCode 还无法弄清楚 Docker 容器中运行的东西在哪里。

最终它将能够解决这个问题，然后我会研究使用这些扩展。

我仅使用 vscode-elixir 扩展来获得 Elixir 的语法高亮支持。VSCode 默认提供 Python 和 Ruby 的语法高亮支持，无需任何扩展。

这种设置的一个好处是 VSCode 的输入速度非常快。完全不会出现任何卡顿，也不会因为自动完成窗口的错误信息而感到困扰。

这也是我不使用 Ansible 扩展的原因，尽管我一直都在用 Ansible。它的自动完成窗口拖慢了我的速度。我把 linting 和代码格式警告留给VSCode 之外的yamllint工具来处理。ansible-lint

等一下，调试怎么样？

说实话，调试 Web 应用程序很难。

我的意思是，当然，当我使用 VB6 和 C# 开发原生 Windows 应用程序时，我很喜欢这个调试器，但我从未找到一个不错的 Web 应用程序调试解决方案，所以根据经验，随着时间的推移，我发现大多数时候使用打印语句会更快。

我偶尔也会使用我所用的编程语言内置的交互式调试器，但它与 VSCode 没有连接。

VSCode 设置

这是我上次使用 VSCode 以来的最新设置：

{
    "editor.fontSize": 15,
    "terminal.integrated.fontSize": 15,
    "editor.minimap.enabled": false,
    "editor.mouseWheelZoom": true,
    "editor.rulers": [80],
    "editor.tabSize": 2,
    "editor.cursorWidth": 5,
    "editor.cursorBlinking": "solid",
    "editor.renderWhitespace": "boundary",
    "explorer.autoReveal": false,
    "workbench.colorCustomizations": {
        "activityBar.background": "#021e45",
        "statusBar.background": "#021e45",
        "statusBar.foreground": "#e0e0e0",
        "editorLineNumber.foreground": "#d1d1d1",
        "editorOverviewRuler.errorForeground": "#fff"
    },
    "[yaml]": {
        "editor.autoIndent": false
    },
    "files.associations": {
        "*.erb": "erb"
    },
    "files.exclude": {
        "**/.git": true,
        "**/.svn": true,
        "**/.hg": true,
        "**/CVS": true,
        "**/.DS_Store": true,
        "**/_site": true,
        "**/tmp": true,
        "**/*.pyc": true,
        "**/*.asset-cache": true,
        "**/*.cache": true,
        "**/*.jekyll-cache": true,
        "**/*.tweet-cache": true,
        "**/__pycache__": true,
        "**/.pytest_cache": true,
        "**/*.egg-info": true,
        "**/*.coverage": true,
        "**/celerybeat-schedule": true,
        "**/node_modules": true,
        "**/bower_components": true
    },
    "files.insertFinalNewline": true,
    "files.trimFinalNewlines": true,
    "files.trimTrailingWhitespace": true,
    "files.eol": "\n",
    "[markdown]": {
        "files.trimTrailingWhitespace": false
    },
    "telemetry.enableTelemetry": false,
    "terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\wsl.exe",
    "terminal.external.windowsExec": "C:\\WINDOWS\\System32\\wsl.exe",
    "workbench.list.openMode": "doubleClick",
    "workbench.sideBar.location": "left",
    "workbench.startupEditor": "newUntitledFile",
    "git.ignoreMissingGitWarning": true,
    "shellcheck.run": "onSave",
    "shellcheck.useWSL": true,
    "extensions.ignoreRecommendations": true,
    "workbench.activityBar.visible": true,
    "workbench.colorTheme": "GitHub Plus Elixir Adapted",
    "editor.accessibilitySupport": "off",
    "window.title": "${activeEditorLong}",
    "editor.detectIndentation": false,
    "editor.autoIndent": false,
    "problems.decorations.enabled": false,
    "editor.renderControlCharacters": false,
    "breadcrumbs.enabled": false,
    "editor.autoClosingQuotes": "never",
    "editor.autoSurround": "never",
    "editor.autoClosingBrackets": "never",
    "shellcheck.disableVersionCheck": true,
    "todo-tree.defaultHighlight": {
      "foreground": "green",
      "type": "none"
    },
    "todo-tree.customHighlight": {
      "TODO": {},
      "FIXME": {}
    }
  }

你最喜欢的 VSCode 扩展和设置有哪些？欢迎在下方留言！

文章来源：https://dev.to/nickjj/my-favorite-vscode-extensions-and-settings-k5l