正文 

当前位置： 首页 > java > java教程

谷歌浏览器web开发教程之开始篇：使用sublime

author author     2022-07-31     639

关键词：

你的代码编辑器是主要的开发工具；你使用它去编辑和保存代码段。你可以通过学习编辑器快捷键和以及安装关键插件来好而快的写出代码。

目录

  1.  安装sublime文本编辑器
  2.  为什么使用包管理器？
  3.  安装插件

摘要

  • 选择一个编辑器，定制快捷键，并安装插件来帮助你写出更好的代码。
  • 利用软件包管理器，使其更容易发现、安装和更新插件。
  • 安装插件，有助于提高你编辑代码的效率；从本指南中的建议的插件开始。

安装sublime编辑器

Sublime是一个伟大的编辑器，拥有很多强大的，可定制的功能，这增添了你编写代码的乐趣。您可以安装一个包管理器，它可以很容易地安装插件，并添加新的功能。

现在有两个版本选择可以供你使用，版本2或者版本3.版本3是相当稳定的并且可一提供很多版本2无法使用的软件包，但你会发现版本2要更可靠一些。

注：

  • 萝卜德森的博客会告诉你如何获取以及爱上Sublime编辑器，它给了很多常用功能参考。这些参考与任意的编辑器都相关，不仅仅只是Sublime。

为什么使用包管理器？

利用软件包管理器，使其更容易发现、安装和更新插件。

技术分享

你可以安装Sublime的包管理器通过下面的指导https://sublime.wbond.net/installation.

你只需要这样做一次，之后你会在下面看到我们推荐的插件集合。

安装插件

插件可以帮你你提高编辑效率。是什么会让你离开编辑器，去使用其他工具？

提示：这里有一个插件的示例。显示那些修改还还没有提交，你可以在编辑器中整合一个其他工具，比如GitHub到你的浏览器中。这样你就不要离开编辑器，使用其他工具了，是不是很方便呐？O(∩_∩)O~

包管理器让你更容易的发现，安装和更新插件：

  1. 在Sublime编辑器中，打开你的包管理者，通过快捷键（ctrl+shift+p）。
  2. 输入‘Install Package‘---安装软件包
  3. 输入你想安装的插件（软件包）名字，或者浏览所有的插件，挑出想要的。

这个网站可以提供很多插件的完整介绍，https://sublime.wbond.net/browse。接下来是我们喜欢病推荐你安装的插件，因为他们可以帮助你提高编辑速度。

 

Autoprefixer --- 自动浏览器前缀补全

如果你想快速的在你的CSS中增加浏览器开发商的前缀，你可以用这个方便的插件来实现。

书写CSS，先不考虑各种浏览器厂商前缀，当你想要添加他们的时候，使用快捷键ctrl+shift+p 并输入 Autoprefix CSS. 

你也可以在最后的构建过程中自动执行该操作，教程如下：We cover how you can automate this in your build process。这样可以让你的CSS保持苗条的身材并且你不需要记得敲击快捷键ctrl+shift+p

技术分享

ColorPicker颜色拾取

从颜色盘中拾取颜色并添加到你的CSS。快捷键：ctrl+shift+c。

技术分享

Emmete  --- 彗星发射

可以给你的编辑器添加一些快捷键和一些代码片段。关于它能做什么，请查看Emmet.io中的视频中的介绍（个人最喜欢的的功能是“快速注释--Toggle Comment”命令）。

快捷键：

技术分享

HTML-CSS-JS prettify---HTML-CSS-JS格式美化

这个扩展插件帮助你使用命令来美化你的HTML，CSS和JS的格式。你可以在保存时美化。使用Ctrl+Shift+H (or Cmd+Shift+H 如果你用的苹果系统).

技术分享

Git Gutter左侧显示每一行的变化情况

在编辑器的最左边显示一个提示，显示你修改了那一行。

技术分享

Gutter Color左侧颜色提示

提示: 这个只能在Sublime 版本3中使用。

左侧栏颜色提示显示了一个颜色点，与你的css颜色值最相近的那个。

技术分享

这个插件需要ImageMagick软件。如果你使用的是苹果 MAC OS X系统，我们推荐你从CactusLabs来下载安装（安装完后你可能需要重启你的机器来让它工作）。

All AutoComplete 智能补全

Sublime Text 默认的 Autocomplete 功能只考虑当前的文件，而 AllAutocomplete 插件会搜索所有打开的文件来寻找匹配的提示词。

技术分享

简单演示django使用之五--（django概用完结总结篇）(代码片段)

...django这个web开发框架做个小小的个人总结：??首先，打开浏览器访问站点后，请求直接到服务器端。作为django的web服务器，接收请求的是由view视图来处理，此外view视图函数还能进行代码的逻辑处理，同时来调用数据。经过其它... 查看详情

chrome浏览器f12开发者工具使用教程博客汇总

CSDN 卜小娴 《Chrome开发者工具使用小技巧》CSDNcsdnligao《chrome开发者工具的使用》CSDN 菜菜格子 《谷歌Chrome浏览器开发者工具教程—JS调试篇》CnBlogs 逆天妖精 《Chrome浏览器F12开发者工具简单使用》  查看详情

移动web开发之入门&视口(代码片段)

一、移动端基础1.1浏览器现状PC端常见浏览器：360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。移动端常见浏览器：UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器... 查看详情

基于mfc的activex控件开发教程------------浏览器插件之activex开发(代码片段)

    一般的Web应用对于浏览器插件能不使用的建议尽量不使用，因为其涉及到安全问题以及影响用户安装（或自动下载注册安装）体验问题。在有特殊需求（如涉及数据安全的金融业务数据交互、需插件才能实现的... 查看详情

google浏览器插件开发教程

谷歌插件开发之notifications通知API全解析https://blog.csdn.net/WU5229485/article/details/82012167浏览器API大全https://blog.csdn.net/Viogs/article/details/73732988在浏览器中使用插件https://blog.csdn.net/qq_22771739/article/details/86615046 查看详情

python开发简单爬虫之静态网页抓取篇：爬取“豆瓣电影top250”电影数据

...白处点击鼠标右键，选择“检查”。（小编使用的是谷歌浏览器）。点击“network”，在弹出页面若长时间没有数据显示，则试一下F5刷新。可以得到目标网页中Host和User-Agent两项。2）找到爬取目标数据（即电影名称）在 查看详情

游戏开发基础视频教程之战机对战中文编程篇视频课程

...你用最短的时间掌握游戏编程基础知识。本程序使用中文开发平台搭建之星，搭建之星采用可视化构件，不需有英文基础，开发速度极快，操作非常简单。不论你使用何种编程语言开发，本课程里的例子都是一个很好的学习例子... 查看详情

goweb开发之url路由设计(代码片段)

...篇博客.做过web开发的都知道,一个好的url路由可以让用户浏览器的地址栏总有规律可循,可以让我们开发的网站更容易让搜索引擎收录,可以让我们开发者更加方便的MVC.我们在使用其他web开发框架的时候,url路由肯定也会作为框架的... 查看详情

前端开发第6篇：javascript客户端(浏览器)

Web浏览器中的JavaScript客户端JavaScript时间线1、Web浏览器创建Document对象，并且开始解析web页面，解析HTML元素和它门的文本内容后添加Element对象和Text节点到文档中。在这个阶段Document.readystate属性的值是“loading”2、当HTML解... 查看详情

那些年我做的开源项目之web篇

...众号还没有评论功能，有问题请联系我。本文将按照笔者开发的时间线分享给你，分别是Tastphp、Tastjava、Gorouter，他们分别是用PHP、Java、Go开发，也是笔者在不同时间段对不同语言的使用以及尝试。本文是笔者对过去web方向做的... 查看详情

qcc304x系列开发教程（实战篇)之7.3qcc3040之swiftpair

查看全部教程开发请点击：高通蓝牙耳机QCC304x开发详解汇总（持续更新中） ====================================================================版权归作者所有，未经允许，请勿转载。====================================================================1. 查看详情

mean全栈开发之用户认证篇

...事情，因为所有的（前端）程序都会被发送到浏览器上，所以怎样隐藏你想要隐藏的东西是个问题。1.1.1我们先来看看传统的基于服务端的程序是如何实现的？如果你比较熟悉传统的基于服务端的Web开发（... 查看详情

intellijidea使用心得之基础篇

 今天和大家分享一个非常好用的Java开发工具-IntelliJIDEA。下载地址：https://www.jetbrains.com/idea/ 优秀IDEA教程（不定期更新）：http://www.ituring.com.cn/article/37792 目录：1）IntelliJIDEA使用心得之基础篇；2）IntelliJIDEA使用心得之... 查看详情

web开发须知的浏览器内幕缓存与存储篇

本文禁止转载，由UC浏览器内部出品。3.HTTPCache综述HTTPCache是完全按照IETF规范实现的，最新的RFC规范地址是https://tools.ietf.org/html/rfc7234。它的作用就是保存可缓存的响应以备重新使用，在下次请求时可减少响应时间和网络带宽。... 查看详情

[基础篇]esp8266-sdk教程(零)之认识并了解

...用，不过这个系列文章不是关于LoRa的，主要是关于ESP8266开发的，这也算是个人业余的一点小爱好吧，最近也用这款芯片做了不少好玩的东西，比如对接天猫精灵控制LED灯、ESP8266内置网页控制LED灯、微信小程序控制LED灯等等，纳... 查看详情

http协议浏览器的使用之开发者工具

基本上所有的浏览器都支持通过F12按键或是“查看元素”功能调出开发者工具，这本来是给专业的Web应用和网站开发人员使用的工具，但对于Web***测试同样也非常重要。不同类型的浏览器所使用的开发者工具也不尽相同，总体上... 查看详情

qt入门系列开发教程基础控件篇qtextbrowser文本浏览控件(代码片段)

...0c;请使用QTextEdit。如果您想要一个没有超文本导航的文本浏览器，请使用QTextEdit，并使用QTextEdit::setReadOnly()禁用 查看详情

谷歌浏览器安装和开发者工具

...编辑器的下载和汉化.接下进行下一个准备操作:　　谷歌浏览器的安装:这一步2020年了,应该谁都会了吧.哈哈哈(还是简单说一下)　　1.打开我们伟大的IE浏览器　　   　　2.直接打谷歌浏览器 普通下载直接安装即可... 查看详情