VsCode系列(二):常用插件

常用的VsCode插件

官网:https://code.visualstudio.com/

注意:要看需要去下载扩展,不要乱下载,否则大量的扩展会让vscode变成大型编辑器,导致系统跑不动,那么vscode的轻量级优点就没有了!

插件如下

Auto Close Tag — 自动闭合HTML标签

Auto Rename Tag — 修改HTML标签时,自动修改匹配的标签

background — 背景

beautify— javascript, JSON, CSS, Sass, HTML 代码高亮

Beautify css/sass/scss/less — 代码高亮

Css Peek — 能在源代码中的字符串中找到对应的css(类和ID)。显示在那个css文件里,还有在第几行。

Color-Highlight — 在编辑器中高亮显示颜色。

Color Picker — 代码的颜色选择器。

Csscomb — css 、less、sass 的代码格式化。

Debugger for Chrome — 调试JavaScript

Document This —为js文件生成文档的代码注释。

ESLint—检查Javascript编程时的语法错误。

Easy Sass — scss/sass文件保存可自动生成并同步编译成同名css文件

Easy WXLESS — 微信小程序WXSS文件专用,保存可自动生成并同步编译成同名css文件

File Peek —鼠标移到路径名按住ctrl可打开文件

Git Easy —增加了vscode中自带的git操作,安装后按F1调出控制台,输入git easy [options]完成git操作,代替git bash。

Git History — git log

GitLens — 显示文件最近的commit和作者,显示当前行commit信息

HTML Class Suggestions — 类名命名提示

HTML CSS Support — CSS的智能补全

HTML Boilerplate — 提供生成标准HTML样板代码。

HTML Snippets — 回车或tap生成标签

Indenticator — 缩进高亮

IntelliSense for CSS class names — CSS类名智能命名提示

JavaScript (ES6) code snippets — JS语法提示

jQuery Code Snippets — jq代码段提示。

JavaScript Snippet Pack — 代码片段(Tab或者Enter补全),Console命令,DOM — 文档对象模型,Loop,Function,Timer,NodeJS,BDD,Misc

JS-CSS-HTML Formatte r — 代码格式化。

Lodash — lodash 函数提示。

Lorem ipsum — 快速填充文本

Live Server — http服务器(相当于使用nodejs的http-server,首选项-设置-用户设置可配置更改端口:”liveServer.settings.port”: 8999)

npm — 运行npm命令

npm Intellisense — 导入模块时,提示已安装模块名称

Open in browser — 在浏览器中打开,安装后在左侧目录中右键点击会出现 open in browser 选项。

OneDark-Pro — Atom’s ionic主题(首选项-颜色主题修改主题)

Output Colorizer — 彩色输出信息

Path Intellisense — 编辑器中输入路径时,自动补全

Prettier-Code formatter — 代码格式化(四个空格缩进:”prettier.tabWidth”: 4)

px2rem — px值转rem

stylelint — CSS/SCSS/LESS检查工具
(首选项-设置-用户设置配置:
“stylelint.enable”: true,
“css.validate”: false,
“scss.validate”: false

SVG Viewer — 预览SVG图片

Vetur — Vue语法高亮

VSCode Great Icons — 文件图标(首选项-文件图标主题修改)

VSCode-Element-Helper — elementUI语法提示高亮

vue — Vue语法高亮(
首选项-设置-用户设置配置:
“emmet.syntaxProfiles”: {
“vue-html”: “html”,
“vue”: “html”
})

Vue 2 Snippets — 基于最新的 Vue 官方语法高亮文件添加了语法高亮,并且依据 Vue 2 的 API 添加了代码补全

Vue Peek — 查找vue组件文件

VueHelper — vue代码提示插件,包括了vue2所有api,vue-router2和vuex2的代码提示

Bracket Pair Colorizer :对括号对进行着色,再也不会搞不清状况了。

vscode-icons:根据后缀名对应显示不同的图标

PHP Intellisense - Crane:对PHP代码编辑的扩展

PHP IntelliSense:对PHP代码编辑的扩展

如果您觉得有用,记得关注我,也可以在下方点击评论、留言,我会定期奉上更多的精彩博客,么么哒。
  • 5
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 8
    评论
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

陈永佳

你的鼓励将是我创作的最大动力!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值