前端开发环境搭建

时间:2022-04-11 03:20:58

一、下载与安装

1.以下是sublime text 3下载地址:

·        Mac-OS X (10.7 or later is required)

·        Windows

·        Windows 64 bit

·        Ubuntu 64 bit

·        Ubuntu 32 bit


·        官网地址

2.其他需要软件下载

PS链接: http://pan.baidu.com/s/1kT4KWj9 密码: jjhu

DW链接: http://pan.baidu.com/s/1hqJeqTu 密码: 6nbq

parallels链接: http://pan.baidu.com/s/1bnYSYHD 密码: d6me 


2、插件安装:

1.Package Control(安装完package control后请重启sublime)

(1)使用 [Ctrl + `] (或View > Show Console menu) 打开Sublime Text控制台,将下面的Python代码粘贴到控制台里:

import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; 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)


(2)手动(Manual)安装方法:

          1.点击Preferences > Browse Packages

          2.上面的步骤会打开一个文件夹,在其中我们找到Installed Packages文件夹(如果没有,则在父级目录中查找)

          3.下载Control.sublime-package(下载地址)包然后拷贝到 Installed Packages文件夹

      通过上述方式安装好package control插件好重启sublime package control就可以使用了。


(3)如果在Perferences->package settings中看到package control这一项,则表明安装成功。


2.Package Control安装插件的方法

(1) 按下Ctrl+Shift+P调出命令面板。

(2)输入install 调出 Install Package 选项并回车。

(3)在列表中选中要安装的插件,或者输入插件名(比如要安装Emment插件,则输入Emment,它会实时过滤筛选结果),根据命令面板中的过滤结果,选择要安装的插            件。


3. 插件安装与推荐:

(1)Emment插件(功能包括代码补全、代码初始化以及快速编码等功能)

       a.使用快捷键ctrl + shift + p(mac:command + shift + p)

       b.测试安装是否成功:新建一个html文件,输入 html:5,然后按下tab键,这是我们就会得到如下的html结构:


       <!DOCTYPE html>
       <html>
       <head>
                  <meta charset="UTF-8">
                  <title>Document</title>
       </head>
       <body>
                  
       </body>  
       </html>
c.检查插件是否已安装如果不成功查看一下文件是否保存,如未保存请先保存。(注:如我新建一个jikexueyuan的html文件,那么应该保存为: jikexueyuan.html文件)


前端开发环境搭建 


sublime 破解序列号

—– BEGIN LICENSE —–
Andrew Weber
Single User License
EA7E-855605
813A03DD 5E4AD9E6 6C0EEB94 BC99798F
942194A6 02396E98 E62C9979 4BB979FE
91424C9D A45400BF F6747D88 2FB88078
90F5CC94 1CDC92DC 8457107A F151657B
1D22E383 A997F016 42397640 33F41CFC
E1D0AE85 A0BBD039 0E9C8D55 E1B89D5D
5CDB7036 E56DE1C0 EFCC0840 650CD3A6
B98FC99C 8FAC73EE D2B95564 DF450523
—— END LICENSE ——

d.最后一级菜单中显示的即已安装的插件列表。(如果没有说明安装不成功,比如我这里第一行是Emment,说明我的Emment插件安装好了,如果你的没有说明没装好)

这样就代表插件安装成功了,开启极客之旅吧。


(2) html/css/js prettify插件(美化插件需node支持)

node安装(建议安装v4.2.2版本)

官网下载地址:

英文:https://nodejs.org/
中文:http://nodejs.cn/


1 .打开node_path设置路径(set node path)

前端开发环境搭建

2 .node安装路径(以你自己的安装路径为准,这里我的安装路径是E:\Nodejs\,注意斜杠的方向)

前端开发环境搭建

3 .路径替换(如果是其它版本的系统请更改相应的路径)

默认路径
前端开发环境搭建

替换为(windows版)
前端开发环境搭建

这样的话美化插件就可以用了,鼠标右键html/css/js prettify——>prettify code或者使用快捷键Ctrl+h即触发美化功能。



(2)其他插件推荐

·        ZenCoding :不得不用的一款前端开发方面的插件,Write less , show more.安装后可直接使用,Tab键触发,Alt+Shift+W是个代码机器。

·        Alignment: 代码对齐,如写几个变量,选中这几行,Ctrl+Alt+A,哇,齐了。

·        Prefixr :写 CSS可自动添加 -webkit 等私有词缀,Ctrl+Alt+X触发。

·        Tag :Html格式化,右键Auto-Format Tags on Ducument。

·        Atuofilename:自动路径导入

·        Clipboard History :剪贴板历史记录,显示更多历史复制,Ctrl+alt+v触发。

·        SideBarEnhancements :侧栏右键功能增强,非常实用

·        Theme – Soda :完美的编码主题,用过的都说好,Setting user里面添加”theme”: “Soda Dark.sublime-theme”

·        GBK to UTF8 :将文件编码从GBK转黄成UTF8,菜单 – File里面找

·        SFTP :直接编辑 FTP 或 SFTP 服务器上的文件,绝对FTP浮云

·        WordPress :集成一些WordPress的函数,对于像我这种经常要写WP模版和插件的人特别有用

·        PHPTidy :整理排版PHP代码

·        YUI Compressor :压缩JS和CSS文件

·        jquery package,scss(支持scss的语法高亮)

         想体验更多插件可到https://packagecontrol.io/寻找

 

3、Sublime Text快捷键:

·        Ctrl+Shift+P:打开命令面板

·        Ctrl+P:搜索项目中的文件

·        Ctrl+G:跳转到第几行

·        Ctrl+W:关闭当前打开文件

·        Ctrl+Shift+W:关闭所有打开文件

·        Ctrl+Shift+V:粘贴并格式化

·        Ctrl+D:选择单词,重复可增加选择下一个相同的单词

·        Ctrl+L:选择行,重复可依次增加选择下一行

·        Ctrl+Shift+L:选择多行

·        Ctrl+Shift+Enter:在当前行前插入新行

·        Ctrl+X:删除当前行

·        Ctrl+M:跳转到对应括号

·        Ctrl+U:软撤销,撤销光标位置

·        Ctrl+J:选择标签内容

·        Ctrl+F:查找内容

·        Ctrl+Shift+F:查找并替换

·        Ctrl+H:替换

·        Ctrl+R:前往 method

·        Ctrl+N:新建窗口

·        Ctrl+K+B:开关侧栏

·        Ctrl+Shift+M:选中当前括号内容,重复可选着括号本身

·        Ctrl+F2:设置/删除标记

·        Ctrl+/:注释当前行

·        Ctrl+Shift+/:当前位置插入注释

·        Ctrl+Alt+/:块注释,并Focus到首行,写注释说明用的

·        Ctrl+Shift+A:选择当前标签前后,修改标签用的

·        F11:全屏

·        Shift+F11:全屏免打扰模式,只编辑当前文件

·        Alt+F3:选择所有相同的词

·        Alt+.:闭合标签

·        Alt+Shift+数字:分屏显示

·        Alt+数字:切换打开第N个文件

·        Shift+右键拖动:光标多不,用来更改或插入列内容

·        鼠标的前进后退键可切换Tab文件

·        按Ctrl,依次点击或选取,可需要编辑的多个位置

·        按Ctrl+Shift+上下键,可替换行

推荐您阅读更多有关于“sublimetext3,”的文章