安装Sublime
官网：http://www.sublimetext.com
安装Sublime Text Build 3143 x64 Setup.exe到D:\Sublime Text 3目录
勾选Add to explorer context menu，在右键单击文件时就可以直接使用Sublime Text打开
Finish后在开始菜单找到快捷方式启动
打开左侧文件列表视图：View->Side Bar->Show Open Files
导入文件夹：File->Open Folder->选择某项目文件夹，并在此文件夹下拷入images图片资源，列表视图有显示
新打开的文件夹合并到一个窗口，不要新开窗口：不要点File->Open Folder，而是Project->Add Folder to Project
将文件夹从左侧列表移除：右键文件夹->Remove Folder from Project，不要选Delete Folder，它会把文件夹从硬盘上删掉
Sublime->View->Layout中Single是单独编辑一个页面，Columns：2可分两栏编辑，每个新页面是一个选项卡，双击空白处可新建一个文件
Preferences->Color Scheme可更换主题
快捷键
放大字号：Ctrl+=
缩小字号：Ctrl+-
删除当前行：Ctrl+Shift+K
复制当前行：Ctrl+Shift+D
上/下移当前行：Ctrl+Shift+↑/↓
Ctrl+D 选中光标所占的文本，继续操作则会选中下一个相同的文本
Ctrl+Shift+L 先选中多行，再按下快捷键，会在每行行尾插入光标，即可同时编辑这些行
Ctrl+→ 向右单位性地移动光标
表达式：ul>(li>a)*5
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
按住Ctrl键，鼠标在多行连续点击，可多行编辑
创建Html文件：右键项目文件夹或点File菜单->New File->主视图光标处输入文件名test.html，保存在项目文件夹下，清空文件名开始编码
xhtml版本文档创建方法： html:xt + tab
H5版本文档创建方法： html:5 + tab 或 ! + tab
安装Package Control组件
按Ctrl+`调出sublime text的console
粘贴以下代码到底部命令行并回车：
import urllib.request,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();urllib.request.install_opener(urllib.request.build_opener(urllib.request.ProxyHandler()));open(os.path.join(ipp,pf),'wb').write(urllib.request.urlopen('http://sublime.wbond.net/'+pf.replace('; ','%20')).read())
重启Sublime Text，在Perferences->package settings中看到package control，则表示安装成功
sublime配置python环境变量
1、点击 tools–>build system –>new build system
2、复制以下内容:
{
"cmd": ["python", "-u", "$file"],
"path":"C:/Program Files (x86)/Python36-32",
"file_regex": "^[ ]File "(...?)", line ([0-9]*)",
"selector": "source.python",
"encoding":"cp936"
}
3、保存为Python.sublime-package，保存路径C:\Users\Administrator\AppData\Roaming\Sublime Text 3\Packages\User
4、写一行python代码：print("hello"); 并保存为文件test.py，Ctrl+B运行一下，在Console窗口查看运行结果，若无效则重启sublime
安装SublimeREPL插件：允许你在编辑界面直接运行 Python 解释器
1、调用ctrl+shift+p，输入：install Package 选择sublimerepl并安装
2、修改编译环境
preference>Browse Packages 在打开的窗口中进入SublimeREPL\config\Python
修改Main.sublime-menu文件，把其中所有"cmd":所在的那一行的”python” 改成python3
3、修改快捷键
Preferences-->Key Bindings User
[
//Open interactive Python REPL window
{ "keys": ["ctrl+a"],
"caption": "SublimeREPL: Python",
"command": "run_existing_window_command", "args":
{
"id": "repl_python",
"file": "config/Python/Main.sublime-menu"
}
},
// Executes a selection of text in REPL
{ "keys": ["ctrl+z"],
"command": "repl_transfer_current", "args":
{
"scope": "selection"
}
},
{
"keys": ["ctrl+r"],//这是自己设的快捷键
"command": "run_existing_window_command",
"args":
{
"id": "repl_python_run",
"file": "config/Python/Main.sublime-menu"
}
}
]
安装anaconda
https://www.anaconda.com/download/#windows
选择python3.6版本安装，安装在自己知道的文件夹就可以
安装Emmet插件
按Ctrl+Shift+P调出命令板
输入install
然后选择install Package
然后输入emmet
找到 Emmet，点击就可以自动完成安装
文件路径提示功能：安装AutoFileName插件
点开菜单“preferences”——“package control”
下拉框中选择“install package”
等待几秒中，在弹出的新下拉框中，输入“autofilename”，下拉框会自动更新列表。点击列表项“autofilename”进行安装
点击菜单“preferences”——“package setting”，可以看到“autofilename”插件已经安装到编辑器中
安装IMESupport插件
让中文输入法跟随光标，安装完毕后，重启Sublime就可以了
安装Node.js
node.js的中文网站：https://nodejs.org/zh-cn/
安装 autoprefixer 插件（需要Node.js支持，实际工作中不需要使用该插件，而是使用自动化工具gulp）
执行 preferences——key Bindings——Users
设置快捷键 { "keys": ["ctrl+alt+x"], "command": "autoprefixer" }
通过此工具可以按照最新的前缀使用情况给样式自动加前缀
last 7 versions：最新的浏览器的7个版本
cascade：缩进美化属性值
remove：是否去掉不必要的前缀
preferences》package setting》AutoPrefixer》Setting-User
{
"browsers":["last 7 versions"],
"cascade":true,
"remove":true
}
安装cssrem插件
cssrem插件可以动态地将px尺寸换算成rem尺寸
下载本项目，比如：git clone https://github.com/flashlizi/cssrem 进入packages目录：Sublime Text -> Preferences -> Browse Packages... 复制下载的cssrem目录（压缩包要重命名为cssrem）到刚才的packges目录里。 重启Sublime Text。
配置参数 参数配置文件：Sublime Text -> Preferences -> Package Settings -> cssrem -> Settings Default写入下面代码
{
"px_to_rem": 40,
"max_rem_fraction_length": 6,
"available_file_types": [".css", ".less", ".sass", ".html"]
}
上面配置含义：
px_to_rem - px转rem的单位比例，默认为40。
max_rem_fraction_length - px转rem的小数部分的最大长度。默认为6。
available_file_types - 启用此插件的文件类型。默认为：[".css", ".less", ".sass"]
安装View In Browser插件
Install Package->View In Browser插件
设置快捷键
菜单栏Preferences->Key Bindings，打开Default (Windows).sublime-keymap——User文件文件，输入
[ {"keys": ["ctrl+alt+f"], "command": "open_in_browser"},……]
设置多个浏览器预览
安装SideBarEnhancements插件，安装好以后点击工具栏的 preferences > package setting > side bar > Key Building-User键入以下代码
{ "keys": ["f1"],
"command": "side_bar_files_open_with",
"args": { "paths": [], "application": "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe", "extensions": "." }
},
{ "keys": ["f2"],
"command": "side_bar_files_open_with",
"args": { "paths": [],"application": "C:\Program Files\Mozilla Firefox\firefox.exe","extensions": "." }
},
{ "keys": ["f3"],
"command": "side_bar_files_open_with",
"args": { "paths": [], "application": "C:\Program Files\internet explorer\iexplore.exe", "extensions": ".*" }
}
安装jQuery插件
这样写jQuery代码时有代码提示
安装less插件
作用：让less代码高亮
方法：ctrl+shift+p>install Package>输入less按Enter
gulp的使用
gulp使用步骤： 安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务
gulp网站：http://gulpjs.com/
Gulp中文网：https://www.gulpjs.com.cn，点开始使用打开入门指南
1. 全局安装 gulp：
$ npm install --global gulp
实际在cmd这样就可以：
npm install gulp -g
在项目目录下创建gulpDevDependencies目录准备安装项目的开发依赖
2. 作为项目的开发依赖（devDependencies）安装：
$ npm install --save-dev gulp
实际在cmd这样就可以：
D:\项目目录\gulpDevDependencies> npm install gulp
> npm install gulp-less
> npm install gulp-autoprefixer
> npm install gulp-minify-css
> npm install gulp-rename
> npm install gulp-uglify
以上是常用gulp插件：
压缩js代码（gulp-uglify）
less的编译（gulp-less）
css的压缩 （gulp-minify-css）
自动添加css3前缀（gulp-autoprefixer）
文件改名字 (gulp-rename)
只能自行下载，拷贝可能报错路径太深，文件名过长
插件
Color Scheme - Tomorrow NightColor schemes决定了编辑器界面语法高亮的字体颜色。这是一个非常酷的暗黑系样式。
Theme - Soda DarkThemes影响 Sublime 界面元素的颜色和风格。这个非常适合 Tomorrow Night 的配色方案。
SideBarEnhancements这个插件提供了侧边栏附加的上下文菜单选项，例如"New file"，"New Floder"等。这些本应当默认就该有的，却没有。
All AutocompleteSublime 默认的自动完成只关注当前文件的单词。这个插件扩展了其自动完成的单词列表到所有打开的文件。
SublimeCodeIntel为部分语言增强自动完成功能，包括了 Python 。这个插件同时也可以让你跳转到符号定义的地方，通过按住 alt 并点击符号。非常方便。
GitGutter在编辑器的凹槽区，依照 Git ，增加小图标来标识一行是否被插入、修改或删除。在 GitGutter 的 readme 中有说明如何更改颜色图标来更新你的配色方案文件。
Pylinter这个插件提供了目前我所见到的最好的pylint编辑器整合。它自动检查 .py 文件，无论其何时被保存，并且会直接在编辑界面显示 pylint 违规。它还有一个快捷方式来禁用局部的 pylint 检查，通过插入一个 #pylint: 禁用注释。这个插件对于我确实非常有用。
网友评论