web前端常用vscode插件大全

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

结语

如果本文对你有帮助的话，请给我点赞打call哦~o(￣▽￣)ｄo
有其他问题留言 over~