vscode 前端插件推荐

发布时间:2019-08-13 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了vscode 前端插件推荐脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

常用插件

Auto Close Tag

自动添加HTML / XML关闭标签(必备)

vscode 前端插件推荐

Auto Rename Tag

自动重命名配对的HTML / XML标签(必备)

vscode 前端插件推荐

Beautify

格式化javascript,JSON,CSS,Sass,和HTML

Bootstrap 4 & Font awesome snippets

包含Bootstrap 4&Font awesome 的代码片段

vscode 前端插件推荐

Bracket Pair Colorizer

颜色识别匹配括号

vscode 前端插件推荐

Class autocomplete for HTML

智能提示HTML class =“”属性(必备)

Code Runner

非常强大的一款插件,能够运行多种语言的代码片段或代码文件:C,C ++,Java,JavaScript,PHP,Python,Perl,Ruby,Go等等,安装完成后,右上角出现:

vscode 前端插件推荐


点击这个按钮就可以运行你的文件了(必备)

css peek

能够查看CSS ID和类的字符串作为HTML文件中相应的CSS定义(必备)

使用方法:将光标放在class里面的属性,右击

vscode 前端插件推荐

Dash

查文档必备,搭配 dash(不过似乎只有 mac 版)????

快捷键 ctrl + h 它根据你当前选中的语言查找 dash 里面的文档

vscode 前端插件推荐

Debugger for Chrome

让 vscode 映射 chrome 的 debug功能,使静态页面都可以用 vscode 来打断点调试

简单使用戳我

Document This

添加注释块

vscode 前端插件推荐

设置:

 "docthis.includeAuthorTag": true,//出现@Author
 "docthis.includeDescriptionTag": true,//出现@Description
 "docthis.authorName": "shenzekun",//作者名字

快捷键: 按两次Ctrl+alt+d

ESLint

EsLint可以帮助我们检查Javascript编程时的语法错误。比如:在Javascript应用中,你很难找到你漏泄的变量或者方法。EsLint能够帮助我们分析JS代码,找到bug并确保一定程度的JS语法书写的正确性。

配置戳我

Font-awesome codes for html

用于 html 的Font-awesome代码片段

filesize

在底部状态栏显示当前文件大小,点击后还可以看到详细创建、修改时间

vscode 前端插件推荐

Git History

以图表的形式查看git日志

vscode 前端插件推荐

使用 command+shift+p(Ctrl+shift+p) 输入git log就可以看到了

Git Lens

git 日志插件

vscode 前端插件推荐

HTML CSS Support

在 html 标签上写class 智能提示当前项目所支持的样式(必备)

HTML Snippets

html 代码片段(必备)

htmlhint

html代码检测

vscode 前端插件推荐

htmltagwrap

可以在选中HTML标签中外面套一层标签

vscode 前端插件推荐

使用:选择一大段代码,然后按“Alt + W”

Indenticator

突出目前的缩进深度

vscode 前端插件推荐

IntelliSense for CSS class names

智能提示 css 的 class 名

Image Preview

鼠标移到路径里显示图像预览

vscode 前端插件推荐

JavaScript (ES6) code snippets

es6代码片段(必备)

JavaScript Snippet Pack

js代码片段(必备)

jQuery Code Snippets

jQuery 代码片段

Live Sass Compiler

实时编译 sass ,不过需要配置,附上我的配置
"liveSassCompile.settings.formats":[
        // You can add more
        {
            "format": "compressed",//压缩
            "extensionName": ".min.css",//编译后缀名
            "savePath": "./css"//编译保存的路径
        }
    ],

使用

vscode 前端插件推荐

markdownlint

markdown 语法检查

Node.js Modules Intellisense

可以在导入语句中自动完成JavaScript / TypeScript模块。

vscode 前端插件推荐

npm Intellisense

在导入语句中自动填充npm模块,跟Node.js Modules Intellisense差不多

open in browser

当前的 html 文件用浏览器打开,类似 webstorm 的那四个小浏览器图标功能,前提条件html 文件必须保存

快捷键alt+b

Output Colorizer

输出提示的文字颜色有一些变化,方便获取关键信息

vscode 前端插件推荐

Path Intellisense

路径自动补全(必备)

Prettier

格式化JavaScript / TypeScript / CSS 。

Project Manager

工程项目过多时,shift+cmd+p(shift+ctrl+p) 然后输入project,第一次选择edit Project编辑自己的工程项目,之后就可以直接选择open打开你的项目

Sass

写 sass 必备

vscode-faker

生成假数据,地址,电话,图片等等

vscode 前端插件推荐

打开方式shift+cmd+p(shift+ctrl+p)) 然后输入faker 就可以选择了

Quokka.js

实时观看 javascript 的变量的变化

vscode 前端插件推荐

使用:先shift+cmd+p (ctrl+shift+p)输入 quokka 选择 new javascript 就行了????

Regex Previewer

测试正则的插件

vscode 前端插件推荐

TSLint

检查typescript编程时的语法错误语法

TypeScript Importer

自动搜索工作区文件中的TypeScript定义,并将所有已知符号作为完成项,以允许代码完成。

vscode 前端插件推荐

vscode-icons

目录树图标

react

React-Native/React/Redux snippets for es6/es7

react代码片段,下载人数超多????

react-beautify

格式化 javascript, JSX, typescript, TSX 文件

vue

vetur

语法高亮、智能感知

VueHelper

vue代码片段

Vue TypeScript Snippets

vue的 typescript 代码片段

Vue 2 Snippets

vue 2代码片段

主题

Dracula Official

个人最喜欢的主题,应该是最好看的主题之一????

vscode 前端插件推荐

One Dark Pro

这个也好看????

vscode 前端插件推荐

Atom One Dark Theme(老版本)

这个和 One Dark Pro差不多,One Dark Pro颜色主题多一些

vscode 前端插件推荐

One Monokai Theme

vscode 前端插件推荐

Eva Theme

里面包含黑色和白色主题,这个白色主题感觉挺好看的

vscode 前端插件推荐

vscode 前端插件推荐

Boxy Theme Kit

vscode 前端插件推荐


大家还有什么好的插件推荐吗????

脚本宝典总结

以上是脚本宝典为你收集整理的vscode 前端插件推荐全部内容,希望文章能够帮你解决vscode 前端插件推荐所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签:CSSes6HTMLVue