vscode配置

135 阅读2分钟

插件下载

基础

Auto Close Tag:自动闭合HTML标签 

ESLint:代码规范检查与实时纠错 

Prettier:代码格式化工具,支持多语言 

GitLens:增强Git功能,显示代码历史记录 

Path Intellisense:路径智能提示 

Error Lens:实时高亮代码错误 

GitHub Copilot:AI代码补全与建议 

调试预览

Live Server:实时刷新HTML页面 

Browser Preview:内置浏览器预览 

Image Preview:图片路径悬浮预览

外观

Indenticator:直观的代码缩进深度

CSS

CSS Peek:主要作用是帮助开发人员更轻松地查找和导航CSS样式表中的类、ID、选择器和样式定义。

操作:当您在HTML文件中按住Ctrl键并将鼠标悬停在某个类或ID上时,会显示一个查看窗口,其中包含了应用于该元素的CSS样式。此外,您还可以通过单击查看窗口或在类或ID的名称上按F12键来跳转到CSS代码的定义位置。

CSS Initital Value:显示每个 CSS 属性初始值

JS

JavaScript (ES6) code snippets:它为 JavaScript、TypeScript、HTML、React 和 Vue 提供了 ES6 的语法支持。

JavaScript (ES6) Code Snippets 包含了大量的预定义代码片段,旨在简化 JavaScript ES6 语法的使用,并且还支持 TypeScript、JSX 和无分号代码。这些代码片段可以帮助开发者在使用 JavaScript 进行开发时,快速插入常用的代码模板,从而提高编码效率。

框架相关

VUE

Vue 3 Snippets:Vue 3代码片段 

VueHelper:Vue 2组件跳转与API提示 

React

ES7 React/Redux Snippets:React代码片段 

React Style Helper:内联样式辅助工具 

效率

Path Intellisense:自动完成文件名的 Visual Studio Code 插件

Import Cost:此扩展将在编辑器中内联显示导入包的大小。该扩展使用 webpack 来检测导入的大小。

any-rule:这下在使用正则判断表单内容时就不用每次都到处去百度了。