web前端常用vscode插件大全
vscode
VS Code（Visual Studio Code）是由微软研发的一款免费、开源的跨平台文本（代码）编辑器。前端开发几乎完美的编辑器。
推荐我所使用的插件
打开：
- open in browser
浏览器打开文件，快捷键：alt+b 或右键打开 - 自动刷新–>Live Server
右键打开或终端打开，local host：5500选择文件，自动刷新。
样式类：
- Bracket Pair Colorizer
括号高亮显示 - change-case
清洁代码，普通文本一键转换包括驼峰命名、下划线分隔命名，snake_case 命名以及 CONST_CAS 命名等。 - Color Info
css样式颜色提示，可以自动选择颜色。鼠标停留就可以预览色块中色彩模型的（HEX、 RGB、HSL 和 CMYK）相关信息了。 - GlassIt-VSC
使vscode软件整体变透明的插件，包括背景，字体，透明度可以调节。ctrl+alt+z透明，ctrl+alt+c恢复正常。我自己特别喜欢，把vscode放在浏览器上面，配合自动保存，和自动刷新，只要一改代码，就立马能看见效果。
主题：
我最喜欢的三个：
- One Dark Pro 黑色背景 很舒服。
- high contrast 黑色背景 高对比度，配合背景透明，调到很低也很清晰。
- light 白色背景 也很清晰。不适合配合透明。
代码提示：
- intelliSense for CSS class names in HTML
把项目中link引用的 css 文件内里的名称智能提示在 html 中。 - jQuery Code Snippets
jQuery代码提示。例如：jqajax–>自动生成ajax样式 - JavaScript (ES6) snippets
JavaScript (ES6) 代码提示。 - SQL Server (mssql)
sql语句代码提示。 - ExpressJs 4 Snippets
用于VS Code的ExpressJs 4代码段。 - Vetur
vue 代码提示。 - Vue 2 Snippets
Vue 2 代码段。 - Bootstrap 4, Font awesome 4, Font Awesome 5 Free & Pro snippets
Bootstrap 4代码提示片段。
工具类：
- 自动保存
vscode 自带功能，选项栏： 文件–>选择自动保存 - vscode-pdf
vscode中打开pdf格式文档。 - Image Preview
鼠标移到路径里显示图像预览。 - Easy LESS
less格式语法自动转换相对应css文件，方便引用。 - htmltagwrap
在选中HTML标签中外面套一层别的标签 “Alt + W” 。 - Auto Rename Tag
自动重命名标签，关联使用，更改开始标签，结束标签同时更改。 - Path Intellisense
路径补全。
功能类：
-
Chinese (Simplified) Language Pack for Visual Studio Code
简体中文版。 -
Prettier - Code formatter
代码格式化软件，支持：html，css，js，json，php，nodejs、等，强烈推荐！
使用方式：
· CMD + Shift + P -> Format Document
· 重新绑定editor.action.formatDocument，在editor.action.formatSelection在vscode的键盘快捷键菜单。 -
CSS Peek
追踪至样式表中 CSS 类和 ids 定义的地方。当你在 HTML 文件中右键单击选择器时，选择“ Go to Definition 和 Peek definition ”选项，它便会给你发送样式设置的 CSS 代码。 -
vue-peek
同css peek，追踪 vue定义的地方。 -
ESLint
在团队协作中，为避免低级 Bug、产出风格统一的代码，公司会预先制定编码规范。EsLint帮助我们检查Javascript编程时的语法错误。比如：在Javascript应用中，你很难找到你漏泄的变量或者方法。EsLint能够帮助我们分析JS代码，找到bug并确保一定程度的JS语法书写的正确性。
具体安装教程，借鉴：
https://blog.csdn.net/walid1992/article/details/54633760?utm_source=blogxgwz0
总结
以上都是亲自使用过的，强烈推荐哦~~~