VScode用TS写Vue使用到的一些扩展详解

1.Auto Rename Tag

标签更改时自动更名

2.Beautify css/sass/scss/less

Beautify是一个可以美化CSS、SASS、SCSS和LESS代码的扩展程序。它可以在编辑器中自动格式化代码，使其更易于阅读和理解。Beautify扩展支持多种编辑器，包括Sublime Text、Atom、VS Code等。通过使用Beautify扩展，您可以提高代码的可读性，使其更易于维护和修改。

3.HTML Boilerplate

4.npm Intellisense

npm Intellisense是一个VSCode插件，它为npm包的导入和自动补全提供了智能提示功能。这个插件能够根据package.json文件中的依赖关系，自动补全模块的导入语句、函数和属性等。这可以帮助开发者减少手动输入的工作量，并减少因手动输入可能产生的错误。

5.Veter

Vetur是一个VS Code的Vue插件，提供了代码补全、高亮等功能。Vetur不仅支持Vue中的template模板以外，还支持大多数主流的前端开发脚本和插件，比如Sass、TypeScript、Jade和Less等等。

Vetur现在可以帮助塑造Vue生态系统。它的框架支持现在可与9个流行的Vue库一起使用。例如，当安装Nuxt或Quasar时，这些框架会在其NPM软件包中包含自动生成的JSON元数据文件。Vetur然后选择它们，并在编辑器中提供自动完成和悬停信息。

此外，还有一些其他功能，如错误修复和提供建议，这都使Vetur成为一个强大且值得使用的工具。

6. 

在您使用TypeScript、element-plus和windicss进行Vue 3开发时，以下是一些推荐的代码提示插件：

1. Vetur：Vetur是Vue.js的官方插件，提供了对Vue文件的语法高亮、错误检查、自动完成和格式化等功能。它与TypeScript和windicss兼容，可以帮助您编写更高效的Vue代码。
2. Vue 3 Snippets：这是一个用于Vue 3的代码片段插件，提供了快速插入Vue 3常用代码片段的功能。它可以帮助您更快速地编写Vue组件和相关代码。
3. WindiCSS Intellisense：WindiCSS是一个用于Vue的样式框架，WindiCSS Intellisense是WindiCSS的代码提示插件。它提供了对WindiCSS的属性和类名的自动完成和提示功能，可以帮助您更高效地编写WindiCSS样式。
4. TypeScript Nightly：这是一个由Microsoft官方维护的插件，提供了对TypeScript的语法高亮、错误检查、自动完成和类型推断等功能。它是一个活跃开发的项目，可以提供最新的TypeScript功能和语言特性。
5. Element Plus Intellisense：这是Element Plus的代码提示插件，提供了对Element Plus组件的属性和事件的自动完成和提示功能。它可以帮助您更快速地编写Element Plus组件的相关代码。

这些插件可以有效地提高您的开发效率，减少手动输入的工作量，并帮助您避免一些常见的错误。您可以根据自己的需求选择安装其中的一个或多个插件。