vscode开发项目常用插件
文章目录
- Vetur
- ESLint
- Prettier
- Auto Rename Tag
- Path Intellisense
- CSS Rem
- CSS Peek
- Less IntelliSense
- WindiCSS IntelliSense
- vscode-styled-components
- Beautify
- Bracket Pair Colorizer
- Open-In-Browser
Vetur
这是每个Vue开发者必备的工具，它集成了HTML、JavaScript、CSS的语法高亮和代码片段，提供自动补全功能，极大缩短了代码编写时间。此外，它还支持格式化代码和Linting功能，帮助开发者及时发现语法错误和潜在问题，确保代码质量
ESLint
这是一个JavaScript代码检查工具，对Vue文件中的JavaScript代码同样有效。它能够帮助开发者发现代码错误、统一代码风格，增强代码的可读性和可维护性
Prettier
这是一个代码格式化工具，支持多种语言，包括JavaScript、CSS、Vue等。通过与ESLint集成，Prettier能够在保存文件时自动格式化代码，保证代码的一致性，节省查错和手动格式化代码的时间，避免因格式差异引起的不必要的团队冲突
Auto Rename Tag
这个插件主要用于自动同步修改HTML/XML标签的起始和结束部分。在Vue框架下进行前端开发时，该插件大大提升了代码的编辑效率，节约了修改成对标签时的时间成本
Path Intellisense
这个插件提供了文件路径的自动完成功能，自动推荐项目中的文件路径。在导入文件或填写Vue组件的template部分时，该功能极大地提高了开发效率
CSS Rem
这个插件在VSCode中的px和rem单位之间转换，并支持WXSS
CSS Peek
允许用户在HTML文件中快速跳转到相关的CSS规则，点击或悬停在HTML元素时，插件会在侧边栏中显示对应的CSS属性和值
Less IntelliSense
这个插件提供了对Less文件的智能提示功能
WindiCSS IntelliSense
这个插件是针对Visual Studio Code的Tailwind CSS类排序器
vscode-styled-components
在JS文件中写样式时，提供智能提示功能
Beautify
格式化代码，支持JavaScript、HTML、CSS等语言的代码美化
Bracket Pair Colorizer
成对儿的括号以不同颜色区别，提高代码可读性
Open-In-Browser
在快捷菜单中添加在浏览器中打开文件的选项，支持多种浏览器