Visual Studio Code 前端相关配置(vue开发)

最近看到网上VScode挺火的,也下了一个玩了玩,总结了一些配置,一些插件。都是一些我自己用的配置插件。仅供参考。

主题的话,我个人还是觉得Monokai最舒服,毕竟是sublime起家的。

通用插件

HTML Snippets

超级实用且初级的 H5代码片段以及提示

HTML CSS Support

html 标签上写class 智能提示当前项目所支持的样式
新版已经支持scss文件检索

vscode-icon

vscode 资源树目录加上图标,必备良品!

Path Intellisense

自动路劲补全,默认不带这个功能的,赶紧装

Npm Intellisense

require 时的包提示(最新版的vscode已经集成此功能)

beautify

格式化代码的工具

Atuo Rename Tag

修改 html 标签,自动帮你完成尾部闭合标签的同步修改,不过有些bug

HTML Boilerplate

通过使用 HTML 模版插件,你就摆脱了为 HTML 新文件重新编写头部和正文标签的苦恼。你只需在空文件中输入 html,并按 Tab 键,即可生成干净的文档结构。

Prettier

Prettier 是目前 Web 开发中最受欢迎的代码格式化程序。安装了这个插件,它就能够自动应用 Prettier,并将整个 JS CSS 文档快速格式化为统一的代码样式。

输入format

Color Info

这个便捷的插件,将为你提供你在 CSS 中使用颜色的相关信息。你只需在颜色上悬停光标,就可以预览色块中色彩模型的(HEX RGBHSL CMYK)相关信息了。

Vue插件

以下推荐vue框架所需的插件

vetur

语法高亮、智能感知、Emmet

Quokka

Quokka 是一个调试工具插件,能够根据你正在编写的代码提供实时反馈。它易于配置,并能够预览变量的函数和计算值结果

JavaScript(ES6) code snippets 

ES6语法智能提示以及快速输入,除js外还支持.ts.jsx.tsx.html.vue,省去了配置其支持各种包含js代码文件的时间

VSCode快捷键

Visual Studio Code 前端相关配置(vue开发)_第1张图片

 

 

 

 

 

你可能感兴趣的:(Visual Studio Code 前端相关配置(vue开发))