第一步:百度搜索sublime text3 ,直接点击红色箭头下方的下载地址,下载完成安装后会提示是否更新,直接点击更新就好了!

第二步:下载插件管理器,点击菜单栏Tools->Package Control,安装完后有提示就说明安装完成!

第三步:安装插件,按下Ctrl+Shift+P调出命令面板,输入install 调出 Install Package 选项并回车。

回车后下方状态栏提示:

等待一会出现以下搜索栏:

 在搜索栏中输入插件名:Emmet,然后回车,下载完会新建一个成功的页面。

Emmet(代码提示插件html/css)一种快速编写html/css的方法,使用方法:(tab快捷键)

接下来按照上面的方法安装一些常用的插件

1、SublimeCodeIntel(作为一个代码提示和补全插件)

2、SublimeLinter (代码检查插件)

3、ColorPicker(调色板(需要输入颜色时,可直接选取颜色))

4、AutoFileName(自动完成文件名的输入,如图片选取,快捷输入文件名路径补全)

5、ChineseLocalzations (菜单汉化)

本人暂时安装了这些,有其他需要的可百度一下。

第四步:设置快捷键打开浏览器预览

点击菜单栏Preferences->Key Bindings

在这里面添加一下代码:

//chorme
{
"keys": ["f12"],
"command": "side_bar_files_open_with",
"args": {
"paths": [],
"application": "C:\\Users\\Administrator\\AppData\\Local\\Google\\Chrome\\Application\\chrome.exe",
"extensions": ".*"
}
}

特殊说明:

从谷歌浏览器属性这里的地址是需要加多一个\

"keys": ["f12"], 这个是快捷键的设置,保存就好啦!

Sublime Text3 搭建前端开发环境的更多相关文章

  1. Sublime Text3搭建PHP开发环境

    Sublime Text3搭建PHP开发环境 本文主要给大家分享了关于Sublime Text3搭建PHP开发环境 ,感兴趣的小伙伴可以做一下参考 一.Sublime text3安装 到官网http: ...

  2. Sublime Text3搭建完美开发环境(Python+PHP+Javascript+nodejs+C++)

    一.Sublime配置(如已安装Package Control可跳过) sublime下载地址:http://www.sublimetext.com/3 安装Package Control插件: 直接 ...

  3. 在mac上使用sublime text3搭建opencv3开发环境

    安装sublime text3 打开mac终端,安装brew 安装opencv3,终端输入下面的coomand: brew install opencv@3 注意:@3表示安装的版本,如果不加@3,那 ...

  4. 使用sublime text3搭建Python编辑环境

    最近在工作遇到一个难题. 我所在的测试组有一套PC软件前端自动化工程,在进行自动化测试时,需要在一台古老的xp机器上运行,但这台古老的xp机器带给我诸多烦恼,特别是使用Pycharm编辑器时,我遇到了 ...

  5. webpack 4.x之搭建前端开发环境

    webpack是一个现代JavaScript应用程序的静态模块打包器,借用官网的一张图,它能够将一些预处理语言,js的最新语法转换成浏览器识别的内容.现在一般的前端框架都有比较成熟的脚手架,大多数对w ...

  6. Windows环境下sublime text 3搭建前端开发环境

    一.安装SubLime Text 3 SubLime Text 3官网下载:https://www.sublimetext.com/ 二.安装Package Control 进入sublime后,按快 ...

  7. Sublime Text3 配置 NodeJs 开发环境

    题外话:使用visual studio开发NodeJs也是很方便,只需要安装插件即可. 本着对Sublime Text3的喜爱,尤其是最近更新后,界面和功能上感觉更nice了,那就配置一发环境吧! ( ...

  8. Python编译器及Sublime Text3安装及开发环境配置

    1.初学Python,你需要一个好的开发编辑器 在选择Python编辑器时,可能纠结于那个Python的版本更好一些,在Python2.x和Python3.x版本中, Python3.x版本更好一些, ...

  9. Windows Sublime text3 搭建Go语言环境

    第一步:Go环境和配置 1.安装 Go 开发环境(省略),假设Go安装目录为 C:\Go 2.配置环境变量,下面两个环境变脸没有就加上. 资料参考:http://studygolang.com/art ...

随机推荐

  1. mysql关键字--设计表时要避开,否则回报语法错误

    https://dev.mysql.com/doc/refman/5.7/en/keywords.html#keywords-in-current-series Keywords and Reserv ...

  2. [Algorithm] 242. Valid Anagram

    Given two strings s and t , write a function to determine if t is an anagram of s. Example 1: Input: ...

  3. haproxy2.0 dataplaneapi 简单说明

    haproxy2.0 支持基于dataplaneapi 的haproxy 动态配置修改以及服务生效,早期大家为了动态 可以会基于dsn 的服务发现模式,基于confd 结合consul 动态生成配置并 ...

  4. 数列分段II(信息学奥赛一本通 1436)(洛谷 1182)

    [题目描述] 对于给定的一个长度为N的正整数数列A[i],现要将其分成M(M≤N)段,并要求每段连续,且每段和的最大值最小. 关于最大值最小: 例如一数列4 2 4 5 1要分成3段 将其如下分段: ...

  5. 帝国cms替换iwms幻灯图片问题

    在管理标签模板中增加一个新模板 页面模板内容为:[!--empirenews.listtemp--]<!--list.var1-->[!--empirenews.listtemp--] 列 ...

  6. opener和parent的区别

    openeropener用于在window.open的页面引用执行该window.open方法的的页面的对象.例如:A页面通过window.open()方法弹出了B页面,在B页面中就可以通过opene ...

  7. asp.netCore3.0区域和路由配置变化

    一.MVC 服务注册 ASP.NET Core 3.0 添加了用于注册内部的 MVC 方案的新选项Startup.ConfigureServices.三个新的顶级扩展方法与 MVC 方案上IServi ...

  8. Spark2.x(六十三):(Spark2.4)Driver如何把Task(闭包等)分配给Executor

    在Spark中一个appliation可能包含多个job,每个job都是由SparkContext#runJob(...)触发的,一个Job下包含1个或多个Stage,Job的最后一个stage为Re ...

  9. arcpy地理处理工具案例教程-将细碎图斑按相同属性或相近属性合并相邻图斑

    arcpy地理处理工具案例教程-将细碎图斑按相同属性或相近属性合并到相邻图斑 商务合作,科技咨询,版权转让:向日葵,135-4855_4328,xiexiaokui#qq.com 目的:针对存在的细碎 ...

  10. 《自然语言理解(Natural Language Understanding)》(2016-03-17)阅读笔记

    原文链接:https://yq.aliyun.com/articles/8301 作者:李永彬 发布时间:2016-03-17 16:37:47 自然语言理解(Natural Language Und ...