前置知识
- 本文推荐插件,主要针对 web前端开发;
- 部分插件可能会因为版本更新等原因,会有所变化;
通用插件
- HTML CSS Support
html 标签class属性等 智能提示
新版已经支持scss文件检索
标签
Auto Close Tag
自动闭合标签【HTML/XML】
Auto Rename Tag
改变标签时,同时自动修改闭合标签【HTML/XML】
格式化
beautify
可以格式化JSON|JS|HTML|CSS|SCSS,比内置格式化好用
Prettier
用于代码格式化,将整个 JS 和 CSS 文档快速格式化为统一的代码样式。
如果还想使用 ESLint,可以试试 Prettier – Eslint 插件
CSS相关
SCSS IntelliSense Preview
SCSS智能提醒,配置强大
CSS Peek
使用此插件,可以跳转至样式表中 CSS 类和 ids 定义的位置。
在 HTML 文件中右键单击选择器,选择“ Go to Definition 和 Peek definition ”选项,便会跳转到相应的 CSS 代码处。
浏览器
open in browsers
在浏览器中打开,默认快捷键:Alt+Shift+B
Debugger for Chrome
注释
Document This :
JS文件头部添加文档注释
vscode-fileheader
HTML添加头部文档注释,看情况使用,我是不会告诉你,你是在给自己加戏。。。
路径
Path Autocomplete
路径智能补全
Path Intellisense
路径智能感知
颜色
color picker
color info
悬停于颜色代码之上时,会显示相应的样式颜色信息(HEX、 RGB、HSL 和 CMYK);
Colorize
给颜色代码匹配一个相应的背景颜色,更加直观;
Output Colorizer
可以给终端日志输出着色
Bracket Pair Colorizer
自动标识相匹配括号的颜色,有利于区分
代码片段
HTML Snippets
H5代码片段以及提示
JavaScript (ES6) code snippets
ES6的代码片段,实用
JavaScript Snippet Pack
ES5及以下的代码片段,实用
语法校验
ESLint
大名鼎鼎的代码检查工具,提高我们代码质量
stylelint
用于css/scss/less语法检查
Regex Previewer
实时测试正则表达式
Quokka.js
调试工具插件,能够根据你正在编写的代码提供实时反馈
Git相关
GitLens
Git History
markdown
markdownlint
Markdown / CommonMark linting 和 样式检查
Markdown-TOC
为当前文本添加头部目录
Markdown table prettifier
表格格式化
markdown preview Github’s styling
github 样式风格的预览效果
Markdown PDF
markdown 格式保存为 PDF 格式
其他
Syncing
这个同步插件要比官方市场那个最高下载量的要好,支持删除同步!
Minify
用于压缩合并 JavaScript 和 CSS 文件
Version Lens
可以查看 package.json 内部版本的变动信息
Code Runner : 代码编译运行看结果,支持众多语言
SVG Viewer
查看SVG 文件
框架插件
(1)vue
vetur
语法高亮、智能感知、Emmet等
VueHelper
snippet代码片段
(2)React
React Native Snippet
RN 代码片段
ES7 React/Redux/GraphQL/React-Native snippets
如标题所示,涵盖的代码片段贼丰富
主题插件
(1)图标插件
vscode-icon 图标主题
给vscode 资源树目录和文件添加图标,颜值爆表,一目了然!
Material Icon Theme
同样是一款炫酷的 icon 主题
simple icon
(2)主题插件
dracula 主题
个人最喜欢的一款主题,一直在用
Panda 主题
不错的一款,用过一段时间,蛮可爱的
(3)关于主题插件
主题插件还有很多,不限于这些呦,
主题插件的选择,因人而异,毕竟每个人的审美不同,但是对于颜值问题应该是每个前端的追求,不是吗?没错,就是要颜控!!!
有趣的插件
Emoji Code
表情
background
比较骚气