今天给大家分享一些Vscode常用的插件
语法检查
ESLint
EsLint可以帮助我们检查Javascript编程时的语法错误。比如:在Javascript应用中,
你很难找到你漏泄的变量或者方法。EsLint能够帮助我们分析JS代码,找到bug并
确保一定程度的JS语法书写的正确性
TSLint
检查typescript编程时的语法错误语法
HTMLHint
html代码检测
beautify
格式化代码的工具
浏览器
Live Server
浏览器实时刷新 ALT+L ALT+O
open in browser
能够直接在编辑器中打开html,而该插件支持快捷键与鼠标右键快速在浏览器中打开html文件,
支持自定义打开指定的浏览器,包括:Firefox,Chrome,Opera,IE以及Safari
JQuery
jQuery Code Snippets
jQuery代码智能提示
代码提示
Path Intellisense
自动路径补全
Document This
添加注释块 连续两次Ctrl+alt+d 出现如下注释
/**
* @class App
* @extends {Component}
*/
CSS 样式
CSS Peek
使用此插件,你可以追踪至样式表中 CSS 类和 ids 定义的地方。当你在 HTML 文件中右键单击选择器时,
选择“ Go to Definition 和 Peek definition ”选项,它便会给你发送样式设置的 CSS 代码。
Color Info
为你提供你在 CSS 中使用颜色的相关信息。你只需在颜色上悬停光标,就可以预览色块中色彩模型的
(HEX、 RGB、HSL 和 CMYK)相关信息
colorize
可视化颜色
Sass
Sass CSS预处理器
Less
Less CSS预处理器
Stylus
Stylus CSS预处理器
vue
vetur
Vue 语法高亮显示, 语法错误检查, 代码自动补全。Vue多功能集成插件,包括:语法高亮,智能提示,
emmet,错误提示,格式化,自动补全,debugger
VueHelper
vue代码片段
Vue TypeScript Snippets
vue的 typescript 代码片段
Vue 2 Snippets
vue 2代码片段
react
React-Native/React/Redux snippets for es6/es7
react代码片段提示
react-beautify
格式化 javascript, JSX, typescript, TSX 文件
CSS Blocks
持css模块化的智能提示,跳转,墙裂推荐
Node
eggjs
相关帮助插件,代码片段,智能提示等
微信小程序
mpvue snippets
mpvue的一些代码片段,以及部分原生小程序的代码提示
minapp
用VS Code写小程序必备的插件,里面有众多实用的特性集成
Markdown 插件
Markdown All in One
Markdown 的提示插件用这一个足以,集成了语法快捷键、Math、预览等,很实用
markdownlint
对 markdown 的语法格式规范进行代码提示
主题
Themes
当然,在众多的实用插件中,岂能少了漂亮的主题呢?你每天都会与你的 VSCode 编辑器进行“亲密的接触”,
为何不把它打扮得更漂亮些呢?下面是我个人比较喜欢的一个主题
Dracula Official 代码背景主题
Eva Theme 代码背景主题
One Monokai Theme 代码背景主题
Aglia Theme 代码背景主题
One Dark Theme 代码背景主题
Material Icon Theme 文件图标
Icon Fonts
能够在项目中添加图标字体的插件。该插件支持超过 20 个热门的图标集,
包括了 Font Awesome、Ionicons、Glyphicons 和 Material Design Icons
SVG Viewer
在 Visual Studio 代码中添加了许多实用的 SVG 程序,你无需离开编辑器,
便可以打开 SVG 文件并查看它们。同时,它还包含了用于转换为 PNG 格式和生成数据 URI 模式的选项
TODO Highlight
能够在你的代码中标记出所有的 TODO 注释,以便更容易追踪任何未完成的业务。
在默认的情况下,它会查找 TODO 和 FIXME 关键字。当然,你也可以添加自定义表达式
Quokka
Quokka 是一个调试工具插件,能够根据你正在编写的代码提供实时反馈,能够预览变量的函数和计算值结果。
使用方法: ctrl+shift+p 输入 quokka 选择 new javascript 就可以了