本文记录用vscode进行前端开发时,常用到的有用的vscode插件,将不定时更新~
1、Chinese (Simplified)
将编辑器变成简体中文
2、vscode-icon
让 vscode 资源树目录加上图标,官方出品的图标库
3、Import Cost
引入包大小计算,对于项目打包后体积掌握很有帮助
4、gitLens
代码管理插件,多人协作开发必备神器,可以看到代码的作者,提供git相关便捷的操作。使用教程参考
5、Prettier
代码格式化
6、markdown all in one
为 Markdown 样式提供健康快捷键,列表的自动化处理,自动格式化表格,提供数学公式的支持,自动补全
7、HTML Boilerplate
,html5自动补全
8、auto close tag
写标签时自动补全尾标签
9、Atuo Rename Tag
修改 html 标签,自动完成尾部闭合标签的同步修改
10、open in browser
在编辑器内鼠标右键,可以选择将html页面在浏览器中打开
11、css peek
快速跳转到样式的定义,按住ctrl键同时点击样式类的名称即可跳转到样式的定义。(注:仅仅对html中引用外部样式,即单独css文)件有用,对vue内部样式没有用)
12、css-auot-prefix
为了使页面能够在主流浏览器上显示,部分css属性就需要添加不同的兼容前缀,Css-auot-prefix可以自动补全css的前缀,适用于css、less、scss。
使用方法:在需要处理的css文件里按ctrl+shift+p,选择Autoprefixer:Run选项
13、Path Intellisense
在代码中引入文件或组件时自动补全路径
14、i18n Ally
轻量且功能强大的可视化编辑插件,提供了增删改查、视图审阅、在线翻译等功能,极大地提高了开发者翻译多语言的效率。更多使用指南
15、vue-helper
vue代码进行代码提示
16、vetur
vue语法高亮、智能感知、Emmet等(只适用于vue2语法),包含格式化功能: Alt+Shift+F 格式化全文
17、volar
同vetur,但是适用于vue3语法
18、Typescript Vue Plugin(Volar)
适用于vue3+typescript可以用
19、Simple React Snippets
快速生成react代码片段, 官方说明
20、ES7+ React/Redux/React-Native/JS snippets
也是快速生成常用代码块