mac vscode html插件,vscode 前端插件整理

mac vscode html插件,vscode 前端插件整理常用插件AutoCloseTag自动添加HTML/XML关闭标签(必备)imageAutoRenameTag自动重命名配对的HTML/XML标签(必备)imageBeautify格式化javascript,JSON,CSS,Sass,和HTMLBootstrap4&Fontawesomesnippets包含Bootstrap4&Fontawesome的代码片…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

常用插件

Auto Close Tag

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

cd35246535cd

image

Auto Rename Tag

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

cd35246535cd

image

Beautify

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

Bootstrap 4 & Font awesome snippets

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

[图片上传失败…(image-bcec4c-1591584466265)]

Bracket Pair Colorizer

颜色识别匹配括号

[图片上传失败…(image-2c7325-1591584466265)]

Class autocomplete for HTML

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

Code Runner

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

cd35246535cd

image

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

css peek

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

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

cd35246535cd

image

Dash

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

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

cd35246535cd

image

Debugger for Chrome

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

简单使用:戳我

Document This

添加注释块

cd35246535cd

image

设置:

“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

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

cd35246535cd

image

Git History

以图表的形式查看git日志

cd35246535cd

image

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

Git Lens

git 日志插件

cd35246535cd

image

HTML CSS Support

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

HTML Snippets

html 代码片段(必备)

htmlhint

html代码检测

cd35246535cd

image

htmltagwrap

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

cd35246535cd

image

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

Indenticator

突出目前的缩进深度

cd35246535cd

image

IntelliSense for CSS class names

智能提示 css 的 class 名

Image Preview

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

cd35246535cd

image

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”//编译保存的路径

}

],

使用

cd35246535cd

image

markdownlint

markdown 语法检查

Node.js Modules Intellisense

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

cd35246535cd

image

npm Intellisense

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

open in browser

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

快捷键alt+b

Output Colorizer

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

cd35246535cd

image

Path Intellisense

路径自动补全(必备)

Prettier

格式化JavaScript / TypeScript / CSS 。

Project Manager

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

Sass

写 sass 必备

vscode-faker

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

cd35246535cd

image

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

Quokka.js

实时观看 javascript 的变量的变化

cd35246535cd

image

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

Regex Previewer

测试正则的插件

cd35246535cd

image

TSLint

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

TypeScript Importer

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

cd35246535cd

image

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

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

[图片上传失败…(image-373119-1591584466264)]

One Dark Pro

这个也好看?

[图片上传失败…(image-ba1665-1591584466264)]

Atom One Dark Theme(老版本)

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

[图片上传失败…(image-6f681e-1591584466264)]

One Monokai Theme

cd35246535cd

image

Eva Theme

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

cd35246535cd

image

cd35246535cd

image

Boxy Theme Kit

cd35246535cd

image

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/164348.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号