vscode好用的插件

最近在使用 vscode ,记录下 vscode 一些插件及用法。

1 如何安装插件

在最左侧的“扩展”中搜索并安装,简单方便,快捷键是ctrl + shift + x

2 好用的插件

2.1 代码拼写检查 Code Spell Checker

当你代码中有单词拼写错误时,插件可以给出错误拼写单词的建议。对于没有的单词,也可以添加到词典中。

2.2 CSS 类名智能提示

HTML 中调用定义好的样式名时,有时需要经常在 HTMLCSS 文件之间切换,来回地查看你已定义好的 CSS 类名。

而有了 IntelliSense for CSS class names in HTML 插件后,你可以在 HTML 中需要调用 CSS 类名的地方,此插件会智能地给你已定义 CSS 类名的提示。

2.3 必备调试工具 Debugger for Chrome

使用了 Debugger for Chrome 后,当代码在 Chrome 中运行后,你可以直接在 VSCode 中加上断点,点击运行后,Chrome 中的页面继续运行,执行到你在 VSCode 中添加的断点后,你可以直接在 VSCode 中进行单步调试。

2.4 代码检查工具 ESLint

ESLint 是一个语法规则和代码风格的检查工具,可以用来保证写出语法正确、风格统一的代码。

2.5 HTML CSS Support

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

2.6 VUE插件 vetur

开发vue时必备,语法高亮、智能感知、Emmet等。

2.7 文件图标 vscode-icons

vscode-icons 插件可以实现对各种文件类型的文件前的图标进行优化显示,这样我们在查看长长的文件列表的时候,可以直接通过文件的图标就可以快速知道文件的类型,而不用去看文件的后缀。