常用 VS Code 扩展推荐

[toFrankie]

写在前面

在此记录日常中 VS Code 用得较多的插件，会偏向 Web 前端多一些。

主题类

作为颜值党，第一反应是更换默认主题。下面这配色一见钟情，深得我心。

https://github.com/antfu/vscode-theme-vitesse

目前在使用的插件：

• Vitesse Theme
• Carbon Product Icons
• Material Icon Theme

我的配置 👇

{
  "workbench.iconTheme": "material-icon-theme",
  "workbench.colorTheme": "Vitesse Black",
  "workbench.productIconTheme": "icons-carbon",
  "autoDetectColorScheme": false,
  "workbench.preferredDarkColorTheme": "Vitesse Black",
  "workbench.preferredLightColorTheme": "Vitesse Light"
}

编辑类

HTML/JSX

• Auto Close Tag - 自动添加配对的结束标签
• Auto Rename Tag - 自动重命名配对标签

支持 JSX/TSX 等扩展语法。

关于自动重命名标签，其实有内置 editor.linkedEditing（默认关闭）。开启后，不安装第三方插件也可以实现相同的效果，使用 1.87 版本亲测，已支持 HTML、Vue Template、JSX/TSX。但像 Vue 可能要安装 Vue - Official 插件才可以正常识别。

JS/TS

• JavaScript (ES6) code snippets in StandardJS style - 其定义了 ES6 常用的 Snippet，通过键入 keyword 触发。

个人用得较多的是 imp、imd、clg，对应为 import fs from fs、import { rename } from 'fs'、console.log()。其实 VS Code 是有内置 Import Statement，但体验上感觉不如该插件。

重命名

• change-case - 更改命名规则，提供了非常丰富的规则，比如 fooBar → FOO_BAR 等。

智能提示类

• Path Intellisense - 路径智能提示，键入 .、.. 或 / 即可自动触发路径提示。
• CSS Modules - 如果你在使用 CSS Module 的话，它可以提供提示，且可以快速跳转至定义处。
• CSS Peek - 跟上面插件类似，假设在 HTML 中引入了外部 CSS，点击 id 或 class 处可以快速跳转至定义处。

快速跳转，需 ⌘ + Click 或 Ctrl + Click 组合。也可使用 ⌘ + ⌥ + Click 在侧栏打开。

快速跳转，本质上是利用了 Go to Definition（转到定义）的能力。

检查与格式化类

这个就不多说了。

• ESLint
• Prettier - Code formatter
• Stylelint
• CSScomb
• ShellCheck
• Code Spell Checker

它们都要求本地/全局有按照相应依赖。

像 ESLint 如果没有安装依赖，VS Code 会有安装的提示。

像 Stylelint 如果找不到依赖，则不做任何格式化处理。

像 Prettier 如果本地找不到任意本地配置文件（比如 .prettierrc），则使用插件本身的默认配置，可手动配置。

其中 CSScomb 是一个相对小众的插件吧，目前已不再维护，我主要用来对 CSS 属性进行排序（保存时）。感兴趣可看这篇文章。

我的配置 👇

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.fixAll.prettier": "explicit",
    "source.fixAll.stylelint": "explicit"
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  
  "prettier.printWidth": 100,
  "prettier.semi": false,
  "prettier.arrowParens": "avoid",
  "prettier.singleQuote": true,
  
  "eslint.options": {
    "extensions": [".js", ".ts", "jsx", ".tsx"],
    "fix": true
  },
  "eslint.workingDirectories": [
    {
      "mode": "auto"
    }
  ],
  
  
  "csscomb.formatOnSave": true,
  "csscomb.syntaxAssociations": {
    "*.wxss": "css",
    "*.acss": "css"
  },
  "csscomb.ignoreFilesOnSave": ["node_modules/**"],
  "csscomb.preset": "~/Library/Mobile Documents/com~apple~CloudDocs/Terminal/csscomb/preset-custom.json",
}

提示类

• Import Cost - 显示导入包的大小。
• Image preview - 图片预览，可支持本地/网络链接图片。
• TODO Highlight - 高亮 TODO:、FIXME: 等注释，以便更明显地提醒还有尚未完成的事情。

其中 Image preview 有时不能正确解析到一些不以 .png 等常见扩展名结尾的图片链接，可以配置 gutterpreview.urlDetectionPatterns 选项处理。比如微信公众号的图片资源链接。

我的配置 👇

{
  "importCost.mediumPackageDarkColor": "#7cc36e4d",
  "importCost.smallPackageDarkColor": "#7cc36e4d",
  "importCost.mediumPackageLightColor": "#7cc36e4d",
  "importCost.smallPackageLightColor": "#7cc36e4d",
  "importCost.largePackageLightColor": "#d44e404d",
  "importCost.largePackageDarkColor": "#d44e404d",
  
  "gutterpreview.urlDetectionPatterns": ["/^http(s)*://mmbiz.qpic.cn/i"],
  
  "todohighlight.isEnable": true,
  "todohighlight.isCaseSensitive": true,
  "todohighlight.keywords": [
    {
      "text": "TIPS:",
      "color": "#fff",
      "backgroundColor": "#64aaf0",
      "isWholeLine": false
    }
  ]
}

由于 Import Cost 默认颜色有点喧宾夺主的意思，于是在原来颜色基础上调整到 30% 的不透明度。

其他

• Live Server - 可以实时 Reload 的本地开发服务器。
• Github Blogger - 非常便捷的 Github Issue 博客编辑工具。
• Code Runner - 用于运行代码片段。
• Markdown Preview Enhanced - Markdown 语录增强扩展。
• CodeGeeX: AI Code AutoComplete, Chat, Auto Comment - “免费版 Github Copilot”？如果没有付费使用 Github Copilot，它或许是个不错的选择。
• open in browser - 在浏览器打开。
• Polacode-2022 生成漂亮的代码截图。

有时需要写个临时 HTML 示例来调试/验证某些功能，诸如此类的，Live Server 是一个非常不错的选择，很便捷。

References

• VS Code - Auto rename HTML tags in React, Vue, and others