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输出路径和压缩配置

"liveSassCompile.settings.formats": [
  {
    // 正常格式输出,样式的每个属性占一行
    "format": "expanded",   // compact(每个样式占一行)  // compressed(压缩格式输出)
 
    // 编译后的扩展名
    "extensionName": ".css",
 
    // 这个就是编译后的CSS输出目录
    "savePath": "/wwwroot/css"
  }
]

五.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常用插件的更多相关文章

  1. VSCode常用插件之vscode-stylelint使用

    更多VSCode插件使用请访问:VSCode常用插件汇总 vscode-stylelint这是一个检验CSS/SASS/LESS代码规范的插件. StyleLint 使用指南 vscode-style ...

  2. VSCode常用插件之ESLint使用

    更多VSCode插件使用请访问:VSCode常用插件汇总 ESLint这是VS Code ESLint扩展,将ESLint JavaScript集成到VS Code中. 首先简单说一下使用流程: 1. ...

  3. VSCode常用插件汇总

    vscode常用插件汇总: 点击插件名字,查看使用文档 vscode-fileheader : 添加注释到文件头,并支持自动更新文件修改时间. EditorConfig for vs code :   ...

  4. VSCode常用插件之Simple New File使用

    更多VSCode插件使用请访问:VSCode常用插件汇总 Simple New File这是一个从命令面板简单创建新文件.文件夹.通过侧边栏创建新文件可能会很繁琐.该扩展旨在通过命令面板使创建文件或目 ...

  5. VSCode常用插件之open in browser使用

    更多VSCode插件使用请访问:VSCode常用插件汇总 open in browser安装完这个插件就可以在编辑器菜单右键html,在默认浏览器打开了,高级使用暂未了解,请自行其它文章学习

  6. VSCode常用插件之vscode-fileheader使用

    更多VSCode插件使用请访问:VSCode常用插件汇总 vscode-fileheader这是一个给js文件(html.css也可以使用,但是没意义!!!)生成头部注释的插件,每次修改js文件之后会 ...

  7. VSCode常用插件之EditorConfig for vs code 使用

    更多VSCode插件使用请访问:VSCode常用插件汇总 当大家在公司工作时,不可能永远是一个人维护一个项目,当多个人参与一个项目,每个人使用的编辑器不一样,代码风格自然也不一样,那么如何让使用不同编 ...

  8. VsCode 常用插件清单

    插件离线安装说明 在一些内网开发环境中,无法做到在线安装,这个时候就需要对插件进行离线安装 了 打开 VSCode 插件市场网址 Extensions for the Visual Studio fa ...

  9. vscode常用插件快捷键

    俗话说,工欲善其事必先利其器,我们码农的器是什么尼?没错,就是我们亲爱的IDE,前端开发者最爱的编辑器应该是vscode了吧.但是我们要怎么去锋利它尼?不外乎就是熟悉它的使用方法.快捷键以及第三方的插 ...

随机推荐

  1. sql 查询 某字段 重复次数 最多的记录

    需求  查询小时气象表中 同一日期.同一城市.同意检测站点  首要污染物出现出书最多的记录 第一步: 添加 排序字段 select StationID,RecordDate,CityID,Primar ...

  2. Nginx实现负载均衡功能

    一.什么是Nginx? Nginx是一款轻量级的Web 服务器.反向代理服务器.电子邮件(IMAP/POP3)代理服务器. 二.Nginx的优点: 高并发连接:官方测试Nginx能够支撑5万并发连接, ...

  3. 【设计模式】桥接模式 Bridge Pattern

    开篇还是引用吕振宇老师的那篇经典的文章<设计模式随笔-蜡笔与毛笔的故事>.这个真是太经典了,没有比这个例子能更好的阐明桥接模式了,这里我就直接盗来用了. 现在市面上卖的蜡笔很多,各种型号, ...

  4. zookeeper安装以及遇到的一些坑

    最近项目中用到了storm,然后storm中用到了zookeeper,然后今天抽空整理一下zookeeper的安装使用,原来后期再慢慢学习. 本篇文档,操作部分是摘自其他博客,里边的问题分析是自己在实 ...

  5. HTML5 新增的 input 事件

    以往 HTML 的 input 輸入框,無法即時反映使用者的輸入內容.onkeyup.onkeydown 事件,無法即時.精確地取得使用者的輸入資料:而 onchange.onblur 事件,要等到失 ...

  6. Android开发相关的Blog推荐——跟随大神的脚步才能成长为大神

    转载:https://blog.csdn.net/zhaokaiqiang1992/article/details/43731967 CSDN 鸿洋:http://blog.csdn.net/lmj6 ...

  7. 用npm安装git上的项目

    直接通过 git 上项目的地址进行安装npm install git+https://github.com/sunxiaochuan/koatest.git 地址获取如下图:

  8. 一起学Android之Layout

    本文简述在Android开发中布局的简单应用,属于基础知识,仅供学习分享使用. 概述 在Android UI开发中,布局类型主要有两种:LinearLayout(线性布局)和RelativeLayou ...

  9. tomat 欢迎页面设置在WEB-INF目录下时不显示问题

    <?xml version="1.0" encoding="UTF-8"?><web-app xmlns:xsi="http://w ...

  10. GDB调试指南-变量查看

    前言 在启动调试以及设置断点之后,就到了我们非常关键的一步-查看变量.GDB调试最大的目的之一就是走查代码,查看运行结果是否符合预期.既然如此,我们就不得不了解一些查看各种类型变量的方法,以帮助我们进 ...