搜索
首页web前端html教程分享自己使用的一款编辑器--Sublime Text

很多人在进入学习前端的时候(包括我自己),除了选择学习合适的技术,还需要一个得(自)心(己)应(喜)手(欢)的开发工具,一个得心应手的开发工具除了可以令你的效率大大提高,也可以令你在写代码的时候,心情舒畅 O(∩_∩)O。

    我的第一个前端开发工具就是Sublime Text ,说一说我对它的理解吧。

   在学习前端的时候,我也像很多人那样上网搜一搜前端开发应该选择什么样的开发工具,一搜,结果几乎大部分结果都是推荐 Sublime,于是乎下载了一个,结果下载完打开一看,黑乎乎的窗体,一点也不华丽啊(sublime 的中文译名就是“华丽的”),后来自己琢磨和网上百度了一段时间,终于明白了为啥这么多人说 sublime 好用,很重要的一个原因是它的“自定义性”,就是在 sublime里面,你想要的一切,都可以自定义,自己选择。自己去改变;和另一个特性:快捷键快速编写或许有人会问,这不是瞎折腾吗?什么都需要自己去配自己去捣鼓。但是,到了后面自己写代码的时候,就会明白,这所有的“瞎折腾”都是有必要的。用 Sublime 写一些简单的 demo 的页面那是非常快的,但是,Sublime 也有明显的缺点,对项目的管理等不太方便,代码提示不如其他 IDE强大

   

    1. 跨平台的编辑器

    同时支持Windows、Linux、Mac OS X等操作系统,轻量级的编辑器,支持各种编程语言。

 

   2.sublime 的插件机制。

(怎样安装插件这里就不多说了,网上有很多很好的文章)说真的,安装的插件不需要太多,装太多还不如用专业的IDE(集成开发环境),分享一下我自己用得得心应手的几个插件吧;同一个sublime 的插件,手动下载后,放进无论是 windows系统,还是放进去 Mac 系统,都能安装。

 Emmet

 

  Emmet   这个是必须的,html,css,js 的快速智能提示它都能提供,而且还提供各种快捷生成页面html 页面骨架的快捷键.

     

     

 Sublime Server

sublime 本身浏览页面的方式,默认是用文件路径的方式去访问的,并不是以 http localhost:8080/的方式去访问页面,这很容易发生一些文件路径的误差。

 

当安装了Sublime Server 插件之后,就可以使用 htttp 的方式去访问页面了。安装完之后在“工具  -  sublime server-  star sublime server”打开,之后,在页面点击鼠标右键“View in sublimer”之后,可以得到  

 

 Andy JS2

上面说的 Emmet 插件对 JavaScript 的代码提示支持是有限的,因此,可以,安装 AndyJS2这个插件弥补这个缺陷,由于在包管理工具上面已经不能搜索到这个插件,因此,可以手动把这个插件下载下来,下载地址:   下载下来后,直接把文件夹里面的文件拷贝到“首选项- Package”里面,此时就完成安装了

这时候,再去写 JS 代码,就会发现,多了很多其他的智能提示。

也许会有人说,智能提示不强 要装这么多插件,用它 sublime干嘛,还不如用 IDE,例如 Webstorm或者 visual studio ,但是,如果是新手学习,想更熟悉一些语法和代码,那么,请一试 sublime,这种“华丽的智能提示” O(∩_∩)O

 

ConverToUTF8

如果页面出现乱码了,可以安装这个插件来解除乱码,这个也是必备的插件。

AllAutoComplete 和 PackageResourceViwer 

对于文件夹内文件的智能提示,配合修改sublime默认的配置,可以设置 CSS 类名提示,在知乎上有大神的教程地址如下 

 

还可以利用PackageResourceViwer 修改 sublime 侧边栏的样式和字体大小等

这些是博主自己安装的插件

 

  

3.sublime 自带的快捷键快速编写

   (1)上面说的,配合 Emmet 快速生成页面骨架

     注意,要先点右下角  选择“HTML”格式或者先“ctrl + s”保存页面

     在空白页面写上  html:xt   //按着键盘的 tab 键 就可以生成 xhtml 的页面骨架

 

在空白页面写上  html:5  //按着键盘的 tab 键 就可以生成 html5 的页面骨架      

   (2)html,CSS,快捷语法

    

    类似的语法还有很多很多,这里列举了几个常用的,其余的可以网上搜一下就有,很多。

  (3)跨行齐编辑

    做法:在需要编辑的文本里,按住鼠标滚轮键,注意,是按住鼠标滚轮键,然后把鼠标往下拉,拉到那些需要编辑的文本的行里,会出现一条竖线,这时候就可以开始编辑了,如图

  对我自己而言,Sublime Text 确实是个不错的代码编辑器,以后会写其他两个我也很喜欢的编辑器 Visual Studio Code 和  IDE Webstorm。

   第一篇长的博文就先写到这里了,不得不说,写博客确实是件挺累人的事情,差不多跟在学校写报告差不多,但是,能温故而知新,想起很多以前学到的和接触到的东西,这是一件好事情O(∩_∩)O哈!

以上是分享自己使用的一款编辑器--Sublime Text的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
HTML的多功能性:应用和用例HTML的多功能性:应用和用例Apr 30, 2025 am 12:03 AM

HTML不仅是网页的骨架,更广泛应用于多种领域:1.在网页开发中,HTML定义页面结构并结合CSS和JavaScript实现丰富界面。2.在移动应用开发中,HTML5支持离线存储和地理定位等功能。3.在电子邮件和新闻通讯中,HTML提升邮件的格式和多媒体效果。4.在游戏开发中,HTML5的CanvasAPI用于创建2D和3D游戏。

HTML文档中的根标签是什么?HTML文档中的根标签是什么?Apr 29, 2025 am 12:10 AM

theroottaginanhtmldocumentis.servesasthetop-levellementThateNcapsulatesAllotherContent,确保properdocumentstrumentstrumentsureandbrowserparserparsing。

HTML标签和元素是同一件事吗?HTML标签和元素是同一件事吗?Apr 28, 2025 pm 05:44 PM

文章解释说,HTML标签是用于定义元素的语法标记,而元素是完整的单位,包括标签和内容。他们一起工作以构建网页。查拉克计数:159

< head>的意义是什么。 &<身体>在html中标记?< head>的意义是什么。 &<身体>在html中标记?Apr 28, 2025 pm 05:43 PM

本文讨论了Lt; Head> &<身体> HTML中的标签,它们对用户体验的影响以及SEO的影响。正确的结构增强了网站功能和搜索引擎优化。

< strong>,lt; b>有什么区别标签和lt; em>,< i>标签?< strong>,lt; b>有什么区别标签和lt; em>,< i>标签?Apr 28, 2025 pm 05:42 PM

本文讨论了HTML标签,和和关注其语义与表现用途及其对SEO和可访问性的影响之间的差异。

请说明如何指示HTML中文档使用的字符集?请说明如何指示HTML中文档使用的字符集?Apr 28, 2025 pm 05:41 PM

文章讨论了在HTML中指定字符,重点介绍了UTF-8。主要问题:确保正确显示文本,防止乱七八糟的字符,并增强SEO和可访问性。

HTML中的各种格式标签是什么?HTML中的各种格式标签是什么?Apr 28, 2025 pm 05:39 PM

本文讨论了用于构建和造型Web内容的各种HTML格式标签,强调了它们对文本外观的影响以及语义标签对可访问性和SEO的重要性。

HTML元素的' ID”属性与'类”属性之间有什么区别?HTML元素的' ID”属性与'类”属性之间有什么区别?Apr 28, 2025 pm 05:39 PM

本文讨论了HTML的“ ID”和“类”属性之间的差异,重点是它们的独特性,目的,CSS语法和特异性。它解释了它们的使用如何影响网页样式和功能,并为

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

SecLists

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

EditPlus 中文破解版

EditPlus 中文破解版

体积小,语法高亮,不支持代码提示功能