vscode常用插件
vscode写JS/html/css是比较适合的,因为轻量级.
只是需要一些插件来完善VSCODE功能,感觉VSCODE就是要靠插件的,不然的话,只是一个高级的代码编辑器.可能比editplus"要好很多".
这个图上是几个常用的插件,以下说明
-------------------------------------------------------------------------------------------------------------------------------
一 Auto Close Tag
这个用来自动补全HTML/XML标记..看到这个插件,心里很矛盾,在vs2017里,这功能自带的啊.另外,你还能找到一款不提供自动补全HTML标记功能的IDE?
二 Auto Rename Tag
当修改一个HTML标记时,它的配对结束标记也自动修改.唉......这个功能vscode是没有的,要装这个插件才有..当然,VS2017本来就有,另外,其它例如 webstorm等等.
三.chinese
这个变成中文的.
四.Live Sass Compiler / Live Server
这两个插件是一同安装的,装sass时,会一起安装.是用来编译sass的插件.
现在直接写css的一定很少了,都需要工程化css.我用过sass/less,sass的功能要完善一些.所以就选择了sass.
在vs2017上,安装一个web Compiler就可以了.在vscode上,安装这个插件能完成相应功能.
只需要ctrl+s保存scss文件,就会自动 生成 两个文件.那个map文件,是可以在chrome浏览器中直接写sass看效果的,就如同以前直接写css看效果那样.
live server是个web服务器工具,在vscode下方有个按钮,点一下就能启动浏览器,根目录就是当前的vscode项目目录.
通过配置文件可以修改它的端口,选择启动的浏览器种类,例如chrome
sass输出路径和压缩配置
五.html高亮
这个插件用于HMTL模板
经常会有拼HTML字符串的时候,如果是字符串,是不会有HTML语法提示的.就像这样
let dom = "<div class="hello"><p>hello</p></div>";
但是加上这个插件之后,只要在字符串前面写个html就和html文件一样了.
html`<div class="hello"><p>hello</p></div>`
注意,开头是 html 固定写法,后面的 ``, 是键盘键位 1 左边的那个
六.markdown插件
安装后,右上角这个按钮可以打开markdown的预览,非常方便
vscode常用插件的更多相关文章
- VSCode常用插件之vscode-stylelint使用
更多VSCode插件使用请访问:VSCode常用插件汇总 vscode-stylelint这是一个检验CSS/SASS/LESS代码规范的插件. StyleLint 使用指南 vscode-style ...
- VSCode常用插件之ESLint使用
更多VSCode插件使用请访问:VSCode常用插件汇总 ESLint这是VS Code ESLint扩展,将ESLint JavaScript集成到VS Code中. 首先简单说一下使用流程: 1. ...
- VSCode常用插件汇总
vscode常用插件汇总: 点击插件名字,查看使用文档 vscode-fileheader : 添加注释到文件头,并支持自动更新文件修改时间. EditorConfig for vs code : ...
- VSCode常用插件之Simple New File使用
更多VSCode插件使用请访问:VSCode常用插件汇总 Simple New File这是一个从命令面板简单创建新文件.文件夹.通过侧边栏创建新文件可能会很繁琐.该扩展旨在通过命令面板使创建文件或目 ...
- VSCode常用插件之open in browser使用
更多VSCode插件使用请访问:VSCode常用插件汇总 open in browser安装完这个插件就可以在编辑器菜单右键html,在默认浏览器打开了,高级使用暂未了解,请自行其它文章学习
- VSCode常用插件之vscode-fileheader使用
更多VSCode插件使用请访问:VSCode常用插件汇总 vscode-fileheader这是一个给js文件(html.css也可以使用,但是没意义!!!)生成头部注释的插件,每次修改js文件之后会 ...
- VSCode常用插件之EditorConfig for vs code 使用
更多VSCode插件使用请访问:VSCode常用插件汇总 当大家在公司工作时,不可能永远是一个人维护一个项目,当多个人参与一个项目,每个人使用的编辑器不一样,代码风格自然也不一样,那么如何让使用不同编 ...
- VsCode 常用插件清单
插件离线安装说明 在一些内网开发环境中,无法做到在线安装,这个时候就需要对插件进行离线安装 了 打开 VSCode 插件市场网址 Extensions for the Visual Studio fa ...
- vscode常用插件快捷键
俗话说,工欲善其事必先利其器,我们码农的器是什么尼?没错,就是我们亲爱的IDE,前端开发者最爱的编辑器应该是vscode了吧.但是我们要怎么去锋利它尼?不外乎就是熟悉它的使用方法.快捷键以及第三方的插 ...
随机推荐
- sql 查询 某字段 重复次数 最多的记录
需求 查询小时气象表中 同一日期.同一城市.同意检测站点 首要污染物出现出书最多的记录 第一步: 添加 排序字段 select StationID,RecordDate,CityID,Primar ...
- Nginx实现负载均衡功能
一.什么是Nginx? Nginx是一款轻量级的Web 服务器.反向代理服务器.电子邮件(IMAP/POP3)代理服务器. 二.Nginx的优点: 高并发连接:官方测试Nginx能够支撑5万并发连接, ...
- 【设计模式】桥接模式 Bridge Pattern
开篇还是引用吕振宇老师的那篇经典的文章<设计模式随笔-蜡笔与毛笔的故事>.这个真是太经典了,没有比这个例子能更好的阐明桥接模式了,这里我就直接盗来用了. 现在市面上卖的蜡笔很多,各种型号, ...
- zookeeper安装以及遇到的一些坑
最近项目中用到了storm,然后storm中用到了zookeeper,然后今天抽空整理一下zookeeper的安装使用,原来后期再慢慢学习. 本篇文档,操作部分是摘自其他博客,里边的问题分析是自己在实 ...
- HTML5 新增的 input 事件
以往 HTML 的 input 輸入框,無法即時反映使用者的輸入內容.onkeyup.onkeydown 事件,無法即時.精確地取得使用者的輸入資料:而 onchange.onblur 事件,要等到失 ...
- Android开发相关的Blog推荐——跟随大神的脚步才能成长为大神
转载:https://blog.csdn.net/zhaokaiqiang1992/article/details/43731967 CSDN 鸿洋:http://blog.csdn.net/lmj6 ...
- 用npm安装git上的项目
直接通过 git 上项目的地址进行安装npm install git+https://github.com/sunxiaochuan/koatest.git 地址获取如下图:
- 一起学Android之Layout
本文简述在Android开发中布局的简单应用,属于基础知识,仅供学习分享使用. 概述 在Android UI开发中,布局类型主要有两种:LinearLayout(线性布局)和RelativeLayou ...
- tomat 欢迎页面设置在WEB-INF目录下时不显示问题
<?xml version="1.0" encoding="UTF-8"?><web-app xmlns:xsi="http://w ...
- GDB调试指南-变量查看
前言 在启动调试以及设置断点之后,就到了我们非常关键的一步-查看变量.GDB调试最大的目的之一就是走查代码,查看运行结果是否符合预期.既然如此,我们就不得不了解一些查看各种类型变量的方法,以帮助我们进 ...