Hello，大家好，我是 Sunday。
很多同学在使用 VSCode 进行项目开发时，会遇到两个极端的情况：
- 没有安装任何插件，直接把 VSCode 当成"记事本"再用
- 安装了一大堆的插件，卡的要死不说，各种插件还会产生冲突
所以，咱们今天就列举出 10 个常用的提效插件，帮助你明确插件使用，再也不会为 VSCode 插件烦恼啦~
01：Material Icon Theme（图标美化）
Material Icon Theme 是一种用于 Visual Studio Code 的图标主题，它的作用是为代码编辑器中的文件和文件夹图标提供统一的、美观的图标。通过使用 Material Icon Theme，开发者可以更直观地区分不同类型的文件，从而更快地定位和管理项目中的文件。
Material Icon Theme 提供了丰富的图标库，涵盖了常见的文件类型和文件夹类型，例如代码文件、图片文件、配置文件、压缩文件等。这些图标都遵循 Material Design 的设计风格，简洁清晰，让用户在浏览文件时能够一目了然地知道文件的类型和内容。
除此之外，Material Icon Theme 还支持自定义配置，用户可以根据自己的喜好调整图标的大小、颜色和显示样式，从而定制出符合个人审美和工作习惯的图标主题。
有了这个插件，不同的配置文件可以直接通过图标明确的展示出来， 再也不怕写错单词而不自知了
02：Tabnine（AI 自动代码补全）
Tabnine是一款人工智能自动补全工具，可用于Javascript、Python、Typescript等编程语言。它通过分析代码上下文和常见的编程模式，提供智能的代码补全建议，帮助开发人员提高编码效率和准确性。
Tabnine的作用非常明显，它可以大大节省开发人员的时间，减少因为拼写错误或者语法错误导致的调试时间。通过智能的代码提示和补全，Tabnine可以帮助开发人员更快地编写出正确的代码，并且减少不必要的犯错。同时，Tabnine还可以学习项目中的特定习惯和模式，提供更加个性化的代码补全建议，让开发人员更加高效地完成工作。
03：Prettier（代码格式化工具）
Prettier 是一个流行的代码格式化工具，它可以帮助开发人员自动格式化他们的代码，使其具有一致的风格和结构。无论是 JavaScript、CSS、HTML 还是其他类型的代码，Prettier 都能够自动处理并统一格式，使团队成员之间的代码风格保持一致。
Prettier 的作用非常明确，它可以帮助开发人员节省大量的时间和精力。在团队协作开发中，不同的开发人员可能有不同的代码风格习惯，而使用 Prettier 可以消除这种差异，减少不必要的代码审查和修改时间。此外，Prettier 还可以避免因为格式化不当而引起的代码冲突，保证代码库的整洁和可维护性。
除了在团队协作中的作用，Prettier 也可以作为个人开发者的利器。它可以帮助开发者专注于代码逻辑和功能实现，而不用花费太多精力在代码格式上。通过 Prettier 的自动化格式化，开发者可以更加高效地编写和维护自己的代码。
04：Volar（Vue 必备）
Vue 语言特性（Volar）是一个为 Vue 3 开发者提供的一款插件，它的主要作用是提供更强大的语言支持和更智能的功能（开发 vue 的必备神器）。Volar 提供了许多功能，包括模板智能感知、组件智能感知、代码智能感知等。这些功能可以帮助开发者更高效地编写 Vue 3 代码，并且减少出错的可能性。
Volar 的模板智能感知功能可以帮助开发者在编写模板时获得更好的提示和补全，让开发过程更加流畅。而组件智能感知功能可以让开发者更容易地理解组件之间的关系，提高代码的可读性和可维护性。此外，Volar 还提供了代码智能感知功能，可以帮助开发者更快地定位到代码中的问题，并提供相应的修复建议。
05：ES7+React（React 必备）
ES7+ React/Redux/React-Native snippets 是一组用于快速生成 React、Redux 和 React-Native 代码的代码片段集合。这些代码片段可以在开发过程中节省大量时间，提高开发效率。它们可以帮助开发人员快速生成常见的代码模板，如组件、动作、状态和导航等，从而减少重复劳动并避免出现常见的错误。
ES7+ React/Redux/React-Native snippets 支持最新的 JavaScript 标准（ES7 及以上），并且与现代的 React 和 React-Native 开发流程紧密集成。它们可以在各种开发环境中使用，包括 Visual Studio Code、Atom、Sublime Text 等。开发人员可以根据自己的喜好选择合适的编辑器，并通过安装相应的插件来使用这些代码片段。
通过使用 ES7+ React/Redux/React-Native snippets，开发人员可以更加专注于业务逻辑的实现，而不是花费大量时间编写样板代码。这些代码片段还可以帮助开发人员遵循最佳实践，提高代码质量和可维护性。总之，ES7+ React/Redux/React-Native snippets 是现代前端开发中不可或缺的利器，它们为开发人员提供了更加高效和愉悦的开发体验。
06：open in browser 或者 Live Server（运行 HTML 到浏览器）
以文件协议在浏览器中打开（open in browser）和以 http 协议使用 Live Server 是前端开发中常见的两种工具。它们的作用分别如下：
-
open in browser（在浏览器中打开）：这是一种简单方便的工具，可以通过右键单击 HTML 文件并选择"在浏览器中打开"来快速预览网页效果。它可以帮助开发人员快速查看他们所编写的网页在不同浏览器中的显示效果，从而方便进行调试和优化。
-
Live Server：这是一个更加强大的工具，它可以在本地启动一个简单的服务器，并实时监测文件的变化，自动刷新页面。这样开发人员在编辑 HTML、CSS、JavaScript 等文件时，无需手动刷新浏览器，可以立即看到修改后的效果。这大大提高了开发效率，特别是在调试和实时预览网页时非常有用。
这两种工具都是为了方便开发人员在前端开发过程中快速预览和调试网页效果而设计的，它们能够提高开发效率，减少不必要的重复操作，是前端开发中常用的利器。
07：别名路径跳转
见名知意。
支持任何项目，可以自由配置映射规则，自由配置可缺省后缀名列表
鼠标移动到路径上，按住ctrl并单击就会跳转
08：Code Spell Checker（检查和纠正代码中拼写错误）
在编写代码时，经常会因为拼写错误而导致程序出现错误，而传统的拼写检查工具往往无法识别代码中的专有名词、变量名或函数名等。Code Spell Checker 就是针对这一问题而开发的工具，它能够识别代码中的单词，并根据编程语言的规范和常见命名约定来检查拼写是否正确，提供纠正建议。
Code Spell Checker 的作用主要体现在以下几个方面：
- 提高代码质量：通过及时发现并纠正代码中的拼写错误，可以提高代码的质量和可读性，减少因拼写错误引起的bug。
- 提升开发效率：避免因为拼写错误而浪费时间在调试和排查问题上，让开发人员能够更专注于代码逻辑和功能实现。
- 适用于多种编程语言：Code Spell Checker 支持多种常见的编程语言，包括 JavaScript、Python、C# 等，能够满足不同开发人员的需求。
- 定制化配置：用户可以根据自己的项目需求和编程习惯进行定制化配置，提高检查的准确性和实用性。
Code Spell Checker 是一款非常实用的工具，它能够帮助开发人员在编写代码时避免拼写错误，提高代码质量和开发效率。对于需要长时间维护和迭代的项目来说，使用 Code Spell Checker 肯定会带来很多便利和好处。
09：A-super-translate（英语小白必备良药）
就像它的介绍说的一样：英语小白必备良药
支持划词翻译：
支持翻译并替换选择内容：
10：Codelf（变量起名神器）
搜索来自Github，BitBucket，Google Code，CodePlex，Sourceforge，Fedora Project，GitLab的项目，以找到真实世界中使用的变量名称。
提供在线搜索功能
前端训练营：1v1私教，终身辅导计划，帮你拿到满意的
offer。 已帮助数百位同学拿到了中大厂offer。欢迎来撩~~~~~~~~