VSCode实用插件推荐

lihouyi
15,654 阅读15分钟

​Visual Studio Code 是由微软开发的一款免费、跨平台的文本编辑器。由于其卓越的性能和丰富的功能，VSCode毫无疑问也是目前市场上最为流行的轻量级代码编辑器之一。VSCode能够如此强大还源自于它的插件市场，一款好的插件能够较为明显的提升大家的开发效率，废话不多说，直接上插件！

本文会持续更新！（最近更新2024.03.18）

注：插件只是辅助，选取合适自己的即可，安装过多可能会导致插件冲突或性能消耗过大~

基本插件

  1. 《Chinese (Simplified) (简体中文) Language》

    汉语基础语言包，解救英语不好的同学~

image-20230512180520167.png

  1. 《Comment Translate》

    选定之后悬停翻译，再也不用复制粘贴翻译啦！

    更换有道翻译源：

    • Ctrl+Shift+p，在弹出的搜索框中输入translate,点击“更改翻译源”。
    • 选择“More”，并在右边弹出的窗口中下载有道翻译。
    • 下载完成后修改settings配置

    settings配置：

     "commentTranslate.source": "DarkCWK.youdao-youdao",
 //此处的有道要提前下载有道翻译插件，其余翻译源有问题
 //当然如果你用的时候没有报错，可以直接用默认设置
 "commentTranslate.targetLanguage": "zh-CN"

image-20230524091704431.png

  1. 《Open-In-Browser》

    由于 VSCode 没有提供直接在浏览器中打开文件的内置界面，所以此插件在快捷菜单中添加了在默认浏览器查看文件选项，以及在客户端（Firefox，Chrome，IE）中打开命令面板选项。

image-20230512181539265.png

  1. 《Live Server》

    一个具有实时加载功能的小型服务器，可以使用它来破解html/css/javascript，但是不能用于部署最终站点。换句话说，我们可以在项目中实时用live-server作为一个实时服务器实时查看开发的网页或项目效果。

    另外：《Live ServerPP》项目来自 Live Server，在原有功能上增加了以下功能：

    • 支持websocket 消息服务，可以用于调试websocket 客户端
    • 支持可编程虚拟文件，可用于模拟服务端API接口

image-20230512180901610.png

  1. 《Code Runner》

    此插件要预先安装node.js，插件安装后可以直接运行在 node 环境中，.js文件右上方会有一个运行小按钮，点击后可以在 vscode 控制台中输出运行结果。必备！

image-20230611083359485.png

  1. 《GitLens》

    增强了git功能，支持在VSCode查看作者、修改时间等等，必备插件。当然对于初学者来说，可以先不使用该插件以便熟悉git命令！

image-20230616001613181.png

  1. 《vscode-icons》

    图标插件有很多，这里推荐VSCode官方出品的图标库。

image-20230512181220113.png

  1. 《Atom One Dark Theme》

    VSCode百分百好评主题，笔者最喜欢的主题之一！

image-20230512184826825.png

此外还有（推荐由高到低）：

  1. 《Todo Tree》

    代办事项插件，可以在侧边栏记录TODO注释，并且可以高亮注释行，好物无需多言~

image-20230628143608244.png

快速配置：

"todo-tree.highlights.customHighlight": {
    "BUG": {
      "icon": "bug",
      "foreground": "#F56C6C",
      "type": "text"
    },
    "FIXME": {
      "icon": "flame",
      "foreground": "#FF9800",
      "type": "tag-and-comment"
    },
    "TODO": {
      "foreground": "#FFEB38",
      "type": "line"
    },
    "NOTE": {
      "icon": "note",
      "foreground": "#67C23A",
      "type": "whole-line"
    },
    "INFO": {
      "icon": "info",
      "foreground": "#909399",
      "type": "text-and-comment"
    },
    "TAG": {
      "icon": "tag",
      "foreground": "#409EFF",
      "type": "line"
    },
    "HACK": {
      "icon": "versions",
      "foreground": "#E040FB",
      "type": "line"
    },
    "XXX": {
      "icon": "unverified",
      "foreground": "#E91E63",
      "type": "line"
    }
},
"todo-tree.general.tags": ["BUG", "HACK", "FIXME", "TODO", "INFO", "NOTE", "TAG", "XXX"]

效果如图：

image-20230628150855303.png

时间统计插件

  1. 《Coding Tracker》

    一个记录你在 VSCode 内编程时间的插件，该插件要先预安装node.js。

image-20230512185345924.png

下载完成后，按下快捷键 ctrl + shift + p，弹出对话框 ，在对话框内输入 查看你的编程记录报告。

image-20230512185435099.png

插件运行后页面如下：

image-20230512185458920.png

  1. 《WakaTime》

    统计在 VSCode 里写代码的时间，可在官网直接查看编程时间。墙裂推荐！

    使用步骤：

    （1）安装WakaTime插件，安装好后会显示输入api key的输入栏。

    （也可在Preferences=>Packages Settings=>WakaTime=>settings-user进行配置api key）

    （2）登录wakaTime官网，登录并注册账号，右上角个人信息 => settings => 复制Secret API Key。

    （3）如果系统没有安装Python的话，wakaTime是无法正常运行的，需要安装python。

    （4）安装成功后即可在WakaTime官网查看到自己的编程时长。

image-20230518143217147.png

20200618_2300.png

开发效率插件

  1. 《Auto Close Tag》

    自动闭合HTML/XML标签，没什么好说的，墙裂推荐！

image-20230512185802202.png

  1. 《Auto Rename Tag》

    自动完成另一侧标签的同步修改，没什么好说的，墙裂推荐！（已经被内置到VScode中了，设置中搜索editor.linkedEditing，随后勾选即可）

image-20230512185854403.png

  1. 《Template String Converter》

    当在字符串中使用${}会自动转换为 JavaScript 的模板字符串，再也不需要手动改单/双引号为反引号了！

image-20230627154026483.png

  1. 《Prettier - Code formatter》

    自动格式化代码插件。

image-20230512190956479.png

修改settings:

/*  prettier的配置 */
    "prettier.printWidth": 100, // 超过最大值换行
    "prettier.tabWidth": 4, // 缩进字节数
    "prettier.useTabs": false, // 缩进不使用tab，使用空格
    "prettier.semi": false, // 句尾添加分号
    "prettier.singleQuote": true, // 使用单引号代替双引号
    "prettier.proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行
    "prettier.arrowParens": "avoid", //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
    "prettier.bracketSpacing": true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
    "prettier.endOfLine": "auto", // 结尾是 \n \r \n\r auto
    "prettier.htmlWhitespaceSensitivity": "ignore",
    "prettier.ignorePath": ".prettierignore", // 不使用prettier格式化的文件填写在项目的.prettierignore文件中
    "prettier.jsxSingleQuote": false, // 在jsx中使用单引号代替双引号
    "prettier.parser": "babylon", // 格式化的解析器，默认是babylon
    "prettier.requireConfig": false, // Require a 'prettierconfig' to format prettier
    "prettier.trailingComma": "es5", // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
    "terminal.integrated.allowMnemonics": true,
    //额外配置
    "prettier.eslintIntegration": false, //不让prettier使用eslint的代码格式进行校验
    "prettier.stylelintIntegration": false, //不让prettier使用stylelint的代码格式进行校验
///报错的话，检查一下有没有用逗号与上一项设置分隔

或者在项目的根路径下，新建文件.prettierrc，并在文件中添加如下内容：

{
  "printWidth": 150,
  "tabWidth": 4,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "tslintIntegration": true,
  "insertSpaceBeforeFunctionParenthesis": false
}

可以直接进Prettier中文官网进行在线测试

  1. 《CSS Peek》

    使用 Ctrl + 鼠标左键 快速查看CSS定义。

image-20230512191510241.png

效果如图：

image-20230512191742474.png

  1. 《Vue Peek》

    CSS Peek 对 Vue 没有支持，该插件提供了对 Vue 文件的支持。

image-20230516204806439.png

  1. 《Easy LESS》

    用于实现编写less文件后生成css或者wxss文件。

image-20230521154648853.png

根据个人喜好可以添加一些设置：

  // Easy LESS配置
 "less.compile": {
      "compress": false,//是否压缩
      "sourceMap": false,//是否生成map文件，有了这个可以在调试台看到less行数
      "out": true, // 是否输出css文件，false为不输出，千万不要是false
      "outExt": ".wxss", // 输出文件的后缀,小程序可以写'.wxss'
      // "outExt": ".css", // 输出文件的后缀,小程序可以写'.wxss'
 }

  1. 《Vue VScode Snippets》

    可以构建代码片段的缩写，大大节约开发时间，把时间花在逻辑上而不是繁琐的模板语法上，墙裂推荐！

image-20230512192113153.png

  1. 《Regex Previewer》

    实时预览正则表达式的效果。

image-20230512194923747.png

  1. 《any-rule》

    国人开发的正则表达式生成插件，右键选择正则大全，即可在弹出的输入框中搜索自己想要的正则表达式。

image-20230527174428585.png

  1. 《CodeIf》

    Codelf通过搜索在线开源平台Github, Bitbucket, Google Code, Codeplex, Sourceforge, Fedora Projec的项目源码，帮开发者从中找出已有的匹配关键字的变量名。这个搜索服务支持直接搜索中文。codeif支持中文查询，输入中文意思，codeif可以根据需要查询尽可能满足需要的结果，并展示与查询结果相关的支持各种编程语言的代码片段以及代码库。

image-20230512200127033.png

  1. 《Tabnine AI Autocomplete for Javascript, Python, Typescript, PHP, Go, Java, Ruby & more》

    人工智能代码完成助手的专家指导，提高生产力，深受数百万开发人员的信任。无论你是新开发人员还是经验丰富的专业人员，独立工作还是团队工作，Tabnine 的 AI 助手都将通过使用所有最流行的编码语言和ide来完成代码，从而提高你的开发速度。（世事无常，借此处纪念一下kite）

image-20230516201537948.png

  1. 《AWS Toolkit -- CodeWhisperer》

    亚马逊 AI 编程助手 Amazon CodeWhisperer，是一款帮助程序员更快更安全编写代码的工具，可以在开发者按alt + c实时提供代码建议，并且对于个人用户完全免费！使用时只需要打好注释（英文最准确，中文也支持），也就是你的需求，然后在注释下方按alt + c就能够获取建议了。

    另外，CodeWhisperer使用时需要注册，注册流程较长这里就不一一列举了~注册完成后在侧边栏选择aws进入 CodeWhisperer 选择 Auto-Suggestions 即可。

image-20230615144011627.png

  1. 《CodeGeeX》

    CodeGeeX 是一款基于大模型的全能的智能编程助手。它可以实现代码的生成与补全、自动添加注释、代码翻译以及智能问答等功能，能够帮助开发者显著提高工作效率。CodeGeeX 支持主流的编程语言，并适配多种主流 IDE，并且中文注释效果好，可以说是对标 GitHub CoPilot 的国产工具中做的最好的一个。

    本插件使用极其简单，安装后进官网注册即可。注册完成后重启VSCode（有的不用重启），在代码上方打上注释，换行后插件会给与对应的推荐代码。除此之外，该插件还支持代码翻译、自动添加注释和智能问答，功能强大，并且对于个人开发者完全免费，良心插件，墙裂推荐！

image-20230812085309382.png

  1. 《TONGYI Lingma》

    基于阿里云通义代码大模型打造的智能编码助手，提供行级/函数级实时续写、自然语言生成代码、单元测试生成、代码注释生成、代码解释、研发智能问答、异常报错排查等能力。于2023年10月31日推出，目前体验略胜于CodeGeeX，两者选其一即可。

image-20231108112257459.png

智能提示插件

  1. 《ES7 React/Redux/GraphQL/React-Native snippets》

    React/Redux/react-router 的语法智能提示。

image-20230516200259739.png

  1. 《Vue - Official》

    Volar 升级替换版，是一个为 Vue.js (Vue3) 开发者提供增强功能的插件，旨在提升 Vue.js 开发体验和效率。它与支持的编辑器集成，为开发者提供智能感知、代码补全、类型推导、组件导航等特性。该插件2.x.x版本仍存在各种问题，建议回退到1.8.x版本

image-20240318093119584.png

  1. 《Vetur》

    Vue2多功能集成插件，包括：语法高亮，智能提示，emmet，错误提示，格式化，自动补全，debugger。VSCode 官方钦定Vue2插件，Vue2开发者必备。

image-20230512195022861.png

如果你开启了"editor.formatOnSave": true，并且同时使用了 ESLint，则可以使用以下配置来避免冲突：

 //解决保存后自动添加分号
 "vetur.format.defaultFormatter.js": "vscode-typescript",
 // 在函数名称前加一个空格
 "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
 "vetur.format.defaultFormatter.html": "js-beautify-html",
 "vetur.format.defaultFormatterOptions": {
     "js-beautify-html": {
         "indent_with_tabs": false,
         "wrap_line_length": 150,
         // - auto: 仅在超出行长度时才对属性进行换行。
         // - force: 对除第一个属性外的其他每个属性进行换行。
         // - force-aligned: 对除第一个属性外的其他每个属性进行换行，并保持对齐。
         // - force-expand-multiline: 对每个属性进行换行。
         // - aligned-multiple: 当超出折行长度时，将属性进行垂直对齐。
         "wrap_attributes": "aligned-multiple"
     },
   },

  1. 《ESLint》

    基于VSCode插件ESLint高亮错误，并通过配置自动帮助我们修复错误。总的来说，ESLint是一个用于检查和修复 JavaScript 代码的工具。

image-20230706222121704.png

简单配置：

 //保存代码，不自动格式化
 "editor.formatOnSave": false,
 // 当保存的时候，eslint自动帮我们修复错误
 "editor.codeActionsOnSave": {
   "source.fixAll": true
 },

  1. 《JavaScript (ES6) code snippets》

    js（es6）的代码片段提示、补全，提高开发效率。

image-20230512191953579.png

  1. 《Parameter Hints》

    提示JavaScript函数的参数类型及消息。

image-20230524083154601.png

  1. 《vscode-styled-components》

    在JS文件中写样式时，有智能提示。

image-20230524082504637.png

  1. 《HTML CSS Support》

    智能提示CSS类名以及id。

image-20230512191304816.png

  1. 《Code Spell Checker》

    这个拼写检查程序的目标是帮助捕获常见的单词拼写错误，可以检测驼峰命名。有点严格，强迫症患者可以选择不用。

image-20230516201019503.png

  1. 《Error Lens》

    当我们输入一些错误的语法格式的时候，它都会有一些提示！

image-20230512194144683.png

  1. 《SonarLint》

    可让您在编码问题出现之前修复它们：就像拼写检查器一样，SonarLint 在您编写代码时突出显示错误和安全漏洞，并提供明确的补救指导，以便您可以在代码提交之前修复它们。VS Code 中的 SonarLint 支持分析 JavaScript、TypeScript、Python、Java、HTML 和 PHP 代码。强无敌！

image-20230526155530478.png

  1. 《Axios Snippets》

    一键生成axios骨架，可以提供axios发起各类请求的代码补全。初学阶段可以使用，实际开发中由于大多使用的框架，很少会单独使用axios。

image-20230607090719251.png

编程美化插件

  1. 《Highlight Matching Tag》

    突出显示匹配的开始和/或结束标签。官方支持的标记：HTML和JSX。其他样式（XML，Vue，Angular，PHP）也可以使用，但不能保证正常使用。

image-20230512190136580.png

效果如图：

image-20230512190306074.png

  1. 《image preview》

    预览图片插件，推荐！

image-20230512190344436.png

效果如图：

image-20230512190617043.png

  1. 《Svg Preview》

    可以显示你的SVG图片，还可以编辑~

image-20230722160414067.png

效果如图：

image-20230722161122128.png

  1. 《Color Highlight》

    可以用来设置 CSS 颜色的样式。除了 CSS 之外，它还会对不显示默认颜色的 JavaScript、HTML、JSON 等文件进行着色。该插件会对颜色名称、RGB、RGBA 和十六进制颜色进行着色。

image-20230512192656857.png

效果如图：

image-20230512192756480.png

  1. 《highlight-icemode》

    选中相同的代码时，让高亮显示更加明显。设置步骤：选中下载的插件，点击拓展设置，将里面的highlight-icemode.backgroundColor以及highlight-icemode.borderColor改成你想要设置的颜色。或者直接打开settings.json，添加代码："highlight-icemode.backgroundColor": "red", "highlight-icemode.borderColor": "blue"即可。

    安装这个插件之后，VSCode自带的高亮就可以关掉了："editor.selectionHighlight": false。

image-20230518135740543.png

  1. 《indent-rainbow》

    彩虹缩进，谁会拒绝小彩虹呢！当然，要是不喜欢默认的颜色，可以在扩展设置里面调整。此外，不喜欢小彩虹还能够换成带颜色的线条！

image-20230615235512031.png

  1. 《Bracket Pair Colorizer》

    该插件可以为你把成对的括号做颜色区分，并且提供一根连接线。方便我们审阅代码结构。

    不过此插件目前已经弃用，我们可以通过在设置栏输入：@id:editor.bracketPairColorization.enabled @id:editor.guides.bracketPairs跳转到对应的设置界面，通过勾选以下内容即可实现高亮

image-20230521120903625.png

效果如图：

image-20230521121032735.png

格式转换插件

  1. 《Markdown Preview Enhanced》

    一款用于预览和编辑Markdown文件的扩展。它提供了丰富的功能，包括实时预览、自定义CSS样式、数学公式支持、图表支持、导出PDF/HTML等。这个扩展还支持通过Pandoc转换Markdown文件为其他格式，并支持通过Mermaid和PlantUML等工具生成流程图和UML图。

    这里介绍Markdown转PDF流程，更多详情参考MPE官网

    转换步骤：

    (1)点击文件选项，打开需要转换的md文件。

    (2)鼠标光标停留在打开的md文件上，右键/ctrl+右键，选中【MPE:打开侧边预览】选项。

    (3)光标停留在右侧预览框中，右键/ctrl+右键，选中Open in Browser。

    (4)在打开的浏览器页面，ctrl+p，显示打印页面，选中“另存为pdf”，可以自行设置是否加页眉页脚、缩放比例等。然后点保存即可。

    第三步还可以右键,选中Chrome（Puppeteer），选择PDF，即可转换为PDF格式

image-20230518133904686.png

  1. 《JavaScript Booster》

    通过分析代码及其上下文自动建议快速操作以重构或增强代码。它支持来自重构条件、声明、函数、TypeScript、promise、JSX 等的多种代码操作。只需注意左侧的灯泡并按下它即可了解如何转换光标下的代码。

image-20230526141924729.png

效果如图：

image-20230526141834509.png

截图与绘图插件

  1. 《Draw.io Integration》

    这个插件将draw.io的功能集成进了VSCode，并打包成了插件供开发者下载使用，大家直接就能使用 VSCode画出完美的流程图、思维导图与 UML 图了！墙裂推荐！！！

    插件使用：新建一个文档文件，修改后缀名为drawio，随后将该文件使用VSCode打开即可。

image-20230603102405915.png

绘图页面：

image-20230605100506744.png

  1. 《Polacode》

    代码截图工具，打开代码编辑页面，然后按Ctrl + Shift + P ，输入polacode。打开后，将代码块复制粘贴到打开的插件界面，如果格式有问题，可以在VSCode中先使用Shift + Tab反向缩进到最左侧，再进行复制即可。（推荐一个网页版代码截图工具：Codepng）

image-20230605092710124.png

效果如图：

image-20230605092810014.png

avatar
文章
阅读
粉丝

友情链接：