前端常用的插件大集合

231 阅读2分钟

拥有互联网精神的各位兄弟们

希望大家能指点一下用什么方式都最大限度增加自己的开发速度

我收集了一大波插件

各位帮忙看下这些插件那些比较好用

想问哈还有没有其他方式能加快开发速度的方式

自己搞一个脚手架行不行

还有vscode我不常用

我常用的是sublime

有没有大佬把sublime的配置分享一下


嵌套函数区分

  • Bracket Pair Colorizer

编写代码的过程中,免不了会有函数嵌套或是其他一些逻辑判断等层层嵌套,随着代码量的增加,你会不会感觉括号嵌套太多层而导致代码难以阅读。


语法检查格式化插件

  • ESLint+Prettier

在创建项目时使用语法检查器能够规范代码格式,不符合规则的代码会给出错误提示,将影响项目运行。

使用了语法检查器本来是让代码开发变得规范,如果影响了项目运行就不太合适,这个时候可以使用ESLint插件和Prettier - code formatter插件自动格式化代码,修正不符合规范的代码。


Material Icon Theme

  • 项目图标插件

这款主题叫做 Material Icon Theme,它采用了 Google Material Design 风格,文件图标以及文件夹图标覆盖非常的全面。


实时刷新网页

  • LiveServer

监听实时编译Scss文件

  • LiveSassCompiler

vue-official插件

  • Alt+Shift+F (格式化全文)
  • Ctrl+K Ctrl+F(格式化选中代码,两个Ctrl需要同时按着)

代码块插件

  • Vue VSCode Snippets

自动自动闭合HTML/XML标签

  • Auto Close Tag

自动完成另一侧标签的同步修改

  • Auto Rename Tag

自动跳转组件

  • Vue Peek

不同的主题支持

  • Vue Theme

服务器开发

  • Vite

自动路径补全

  • Path Intellisense

语法纠错

  • EsLint

view in browser

—— 如何用浏览器预览运行html文件

Debugger for Chrome

—— 映射vscode上的断点到chrome上,方便调试(配置有点麻烦,其实我没用这个)


ES6语法智能提示以及快速输入,

除js外还支持.ts,.jsx,.tsx,.html,.vue,省去了配置其支持各种包含js代码文件的时间

JavaScript(ES6) code snippets


让 html 标签上写class 智能提示当前项目所支持的样式

  • HTML CSS Support

code runner

  • 后端开发语言运行

px to rem & vw

  • 移动端开发

Code Spell checker

  • 英文代码拼写检查

Material Theme

  • 不同的色彩风格以及好看的图标样式

Prettier

  • 格式化(美化)代码

Bracket Pair Colorizer

  • 将配对的括号现实相同的颜色
  • 不配对的括号现实不同的颜色