学习web前端之神器sublime text 3

  

  第一次在博客园写博客,以前都是看别人写的技术在自己慢慢的学习。现在想自己把每天学习的东西理解并记录下来,加深下印象以后可以做个回顾。不知道自己能否坚持每周至少写2篇博文。

  古话说的好:工欲善其事,必先利其器。所以我们要找到一个神器来帮助我们更好的学习前端开发,要么记事本怎么样?不错是不错估计要写到猴年马月了。

  百度一搜,web前端开发利器有很多,比如:EditPlus,Dreamweaver,HBuilder,Webstorm,Aptana Studio,Sublime text,这么多最后我还是选择了sublime,据说是前端开发神器。

  Sublime text:轻量级IDE(集成开发环境),神器神在可扩展性,并包含大量实用插件,我们可以通过安装自己领域的插件来成倍提高工作效率。拥有高效、没有干扰的界面,在编辑方面的多选、宏、代码片段等功能。

一、安装Sublime Text 3

  官网/下载网站:http://www.sublimetext.com/3

  

  对应这各个版本,选择最适合你系统的版本下载安装,大约7MB左右,直接下一步即可

二、安装Package Control

  安装好了这时候我们想要sublime用的更称手,要安装一个基础的也是sublime必备的包管理:Package Control,用来以后安装插件用的。

  点击菜单 View -> Show Console或者 Ctrl + `  会在底部出现一个命令输入框(sublime控制台),然后将下面的命令拷贝到输入控制台中,回车,等待,安装成功。

  安装代码和指导地址:https://packagecontrol.io/installation

import urllib.request,os,hashlib; h = ‘2915d1851351e5ee549c20394736b442‘ + ‘8bc59f460fa1548d1514676163dafc88‘; pf = ‘Package Control.sublime-package‘; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( ‘http://packagecontrol.io/‘ + pf.replace(‘ ‘, ‘%20‘)).read(); dh = hashlib.sha256(by).hexdigest(); print(‘Error validating download (got %s instead of %s), please try manual install‘ % (dh, h)) if dh != h else open(os.path.join( ipp, pf), ‘wb‘ ).write(by)

  在安装Package Control过程中有时候会出先错误,但是安装还是成功的,并没有什么影响。如果安装失败建议你关掉sublime然后在重复上面的操作,在安装Package Control过程中会有点卡顿。

三、安装插件

   上面已经安装了Package Control,这是时候我们可以通过快捷键  Ctrl + Shift + P 打开命令面板,然后输入pack就会出现安装

  

  点击红色框中的安装,稍作等待

  

  安装成功后的界面

  成功安装Package Control之后,这时候我们在通过 Ctrl + Shift + P   打开命令面板输入想要安装的插件:

  在安装插件中也需要等待:

  

  作为一个前端开发人员,我认为需要的插件:

  1. Emmet:(谁用谁知道)快速生成代码段插件,熟练使用让你键步如飞

    如何使用百度一下,你就知道。

  2. ConvertToUTF8:直接在菜单栏中可以转了,专为中文设计,妈妈再也不通担心中文乱码问题了
  3. BracketHighlighter:显示我在哪个括号内
  4. JSFormat:Javascript的代码格式化插件
  5. AutoFileName:自动完成文件名的输入,如图片选取
  6. Sublime CodeIntel:代码自动提示
  7. Bracket Highlighter:类似于代码匹配,可以匹配括号,引号等符号内的范围。

  这只是一小部分sublime插件,如果你需要更多百度一下,根据你的喜好去下载你喜欢的插件。

四、快捷键

  作为一个开发人员熟练使用快捷键是必须的,这样才能事半功倍。

  sublime通用的快捷键这里就不谈了,因为百度上有一堆。下面我要谈的是如何设置自己的快捷键。

  当你发现你下了一堆插件,但是有时候去使用一些插件的快捷键却怎么按都不会出现效果,我想这时候你是快捷键冲突了。sublime中的默认快捷键在编辑器中是无法修改的,这时候你需要自定义快捷键,如何自定义下面分享:

  

  Key Bindings - Default是sublime默认的快捷键,点开他你想修改但是sublime是不会让你修改的。

  这时候就要用到Key Bindings - User

    配置的话跟默认的一样去配置,json格式:

    

  Keys:需要设置的快捷键组合

  command:按下快捷键发生的sublime命令,sublime根据命令发生相应的事件。

  比如:上图的事件是打开一个新的编辑窗口,当我感觉这个快捷键使用的不爽,于是就修改为ctrl+shift+.保存即可,当然在默认里面是修改不了,把默认中的代码复制到User中。当你在按下快捷键的时候他会执行你User中的快捷键,而不是执行Default中的快捷键。

这个修改快捷键不难,如何去定义一个没有不知道命令的快捷键

五、自定义快捷键

  在sublime做任何事情都会有一个命令

  如何查看命令?

  打开sublime控制台,前面已经说过控制台打开方式:点击菜单 View -> Show Console或者 Ctrl + `会在底部出现一个命令输入框(sublime控制台)

  输入 sublime.log_commands(True) 然后回车, 就能监控你所操作的命令。

  

  下面就举个列子,现在我们写好了代码想看效果,一般都在HTML编辑器中鼠标右击Open in Browser(在浏览器中打开)。这种方式不爽,因为我还要去动鼠标。

  要获取"在浏览器中打开"这个功能的命令就需要你操作一次,并在控制台中观察它的命令

  

  这样控制台就显示出我们刚刚操作的命令,然后在Key Bindings - User 中设置自己的快捷键。

  

  保存即可。然后就可是使用你自己的定义的快捷键。

  注意:当你设置快捷键后,怎么按都不起作用时,并不是你设置错误,是你的快捷键和其他软件或者命令冲突。当快捷键冲突的时候sublime并不会提示你,只是不起作用,这时候你可以换个快捷组合方式去试试

六、sublime不错的功能

  按TAB切换到编辑区

  

  Shift+鼠标右键多行选中以及多行编辑

  

  

  Ctrl+J合并多行

  

  到了这里就要结束今天的博文了。写了半天,第一次写。希望是个好的开始。坚持下来。如有不对之处,还希望各位能指导我这位前端新人。

时间: 2024-10-07 19:25:54

学习web前端之神器sublime text 3的相关文章

前端开发神器sublime Text

实用的sublime插件集合 – sublime必备插件 前言 入前端领域开始,就学着使用sublime,一直用起来很顺手,速度是我最欣赏的,快的没有编辑器可以匹敌.还是废话不多扯,入正题.好多有多少,用了就知道了. 插件介绍 Package Control 功能:安装包管理 简介:sublime插件控制台,提供添加.删除.禁用.查找插件等功能 使用:https://sublime.wbond.net/installation 安装方法: CTRL+` ,出现控制台 粘贴以下代码至控制台 ST2

Web前端开发:Sublime Text 常用插件

在安装这些插件之前,确保你已经安装了Package Control. 安装Package Control方法: 通过菜单栏View->Show Console 或者快捷键Ctrl+` 打开控制台.复制以下代码按Enter即可 Sublime Text 3版本: import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Pa

零基础学习web前端路线

很多同学想学习WEB前端开发,虽然互联网有很多的教程.网站.书籍,可是却又不知从何开始如何选取. 前端开发入门学习有:HTML.CSS.JavaScript(简称JS)这三个部分.所以在学习之前我们需要先明确三个概念: 1.HTML--内容层,它的作用是表示一个HTML标签在页面里是个什么角色. 2.CSS--样式层,它的作用是表示一块内容以什么样的样式(字体.大小.颜色.宽高等)显示. 3.JS--行为层,它的作用是当用户触发某些行为时,会给内容和样式带来什么样的改变. 我还是要推荐下我自己创

Web前端开发神器--WebStorm(JavaScript 开发工具) 8.0.3 中文汉化破解版

WebStorm(JavaScript 开发工具) 8.0.3 中文汉化破解版 http://www.jb51.net/softs/171905.html WebStorm 是jetbrains公司旗下一款JavaScript 开发工具.被广大中国JS开发者誉为“Web前端开发神器”.“最强大的HTML5编辑器”.“最智能的JavaScript IDE”等.与IntelliJ IDEA同源,继承了IntelliJ IDEA强大的JS部分的功能.

学习web前端开发感想

1.学习一个技术,不是一看见源代码就是copy,而是仔细阅读后,找到自己想要的,并且自己写出来,自己理解了,下次遇到同样的问题,自己才能解决. 2.在电脑上学习的过程中,我总是先建立一个文本文档,这样便于记录,然后再进行分类到笔记本中... 3.把你看到的每个网页用大脑生成html代码和css布局. 把你看到的每个动画和交互用大脑生成javaScript. 4.一定要养成做好笔记的习惯.并且要学会做笔记. 5.页面中中所有的东西都要放在一个标签里面.否则不好控制. 6.自己的知识库在开始学习的时

独家分享——大牛教你如何学习Web前端开发

2014-12-18 14:35:42   引语 自从2008年接触网站开发以来到现在已经有六个年头了,今天偶然整理电脑资料看到当时为参加系里面一个比赛而做的第一个网站时,勾起了在这网站开发道路上的一串串回忆,成功与喜悦.烦恼与纠结都历历在目,感慨颇多.在此与大家分享,希望对初学Web前端的各位童鞋来说有所帮助.欢迎各位吐槽.拍砖. 先从大家学习上的一个误区开始谈起. Web前端的学习误区 网页制作是计算机专业同学在大学期间都会接触到的一门课程,而学习网页制作所用的第一个集成开发环境(IDE)想

《我在51oct学院学习web前端微职位》

大家好,很高兴能分享我学习web前端开发的一些心得.废话不多说,直接进入主题.前端,一个新型的职业技能,我不敢说自己有多精通,入门算是入门了,需要学习的还有很多.从你开始学html时,一定要坚持下来,别半途而废,不逼一下自己,怎么知道自己行不行呢??前端三大核心是html.css.js.html和css熟练度不要求有多么牛逼,常见的网页布局要会,主要是javascript,这玩意不要小瞧它,它可是很灵活的,主要学习目标是:ecmascript.dom.bom,常见的字符串方法要会,数组的创建,获

他曾经学完Web前端,给大家留下宝贵的学习web前端经验

前几天接触了一个叫小易的大专生,学机电一体化,我们都知道,现在大学都是在混日子,打游戏度日,大专更是如此,一个人很容易被环境影响,他的寝室也都是打了三年游戏过来的同学,他也是其中一个.毕业后,做了三个月的销售工作,像其他人一样,为了养活自己,只能找一个工作维持生活.用他的原话说:有一天他突然就意识到,似乎很多人的人生都是这样浪费掉的,一直做着自己不喜欢,杂七杂八的工作,不断的浪费着自己的时间,然后人到中年,一辈子就这个样子了.然后他想不能这样下去,必须要学一个东西,一直做下去,然后他租了一个小房

零基础学习web前端,大神给你们指路

随着web前端的飞速发展,学习web前端的人员也是越来越多,在移动 互联网 时代,相信我们每个人的手机上都装有数十个APP,这些APP的开发其实也和当下热门的 Web 前端开发息息相关. 事实上,如今一半以上的APP都是采用Hybrid混合模式开发,即结合安卓和Web端技术开发.而纯 Web开发 的APP也不在少数,比如我们众所周知的 QQ 空间就是使用 Web前端 的React Native技术开发.除了APP,我们在手机端常看到的H5页面,也是主要运用了Web端的 HTML5 技术开发. 当