Sublime Text的使用代码块安装的模块
在众多的开发工具IDE当中。作者现在唯独深爱sublime text(以下简称st)。以前做后台开发使用visual studio(以下简称vs),以及实行前后端分工也是配合后台使用vs.这里要讲述两个概念:前后端分离与前后端分工。分离是指:前端独立完成搭建前端系统。数据只需要后端提供API接口调用即可。前端渲染HTML页面(俗称前端开发工程师)。分工是指按照设计切成静态页面,写一些交互js,配合后端完成项目开发。服务端渲染HTML页面(俗称页面仔)。在全职做前端的时候,也尝试使用webstorm(以下简称ws),在学校偶尔用过dreamweaver(以下简称dw)。个人感觉dw的界面丑陋不堪。一点都没有逼格。作为一名前端开发工程师,当然要选用逼格高一点的开发工具。目前前端开发工具比较出名的使用比较普遍的也就是st和ws了。现在说说st的优点:1.界面炫酷。2.高亮颜色好看。3.轻量小巧。作者语录:装逼从点滴开始,从现在开始。从开发工具开始。写代码一定要风骚。作为一名逼格高的程序猿,必须要有好的开发工具。正如高手都有一把属于自己的武器。惊羽的斩龙剑。小凡的摄魂棍,雪琪的天琊神剑。书书的武器那是百宝箱啊。青云f4.
一、Package Control的安装
在st所有的插件当中。一定要先安装package control。可以理解为插件安装包的管理器吧。所有的插件都是通过这这里面下载安装的。
1.按下Ctrl + ~ 调出st的控制台
2.复制以下代码到控制台
a.适合st3:
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())
b.适合st2:
import urllib2,os; pf='Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler( ))); open( os.path.join( ipp, pf), 'wb' ).write( urllib2.urlopen( 'http://sublime.wbond.net/' +pf.replace( ' ','%20' )).read()); print( 'Please restart Sublime Text to finish installation')
3.按下Ctrl + Shift + p 输入pci选中Install Package回车。会弹出一个输入框。以后的插件都在这里面安装。有时候调出输入框的时候很久。注意下面状态栏的=符号来回跑动说明正在处理当中
v\:* {behavior:url(#default#VML);}
o\:* {behavior:url(#default#VML);}
w\:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}
二、SVN插件的安装
在项目开发当中怎么少得了svn的使用。除非你一个人能开发完成项目
1.前提是你电脑当中已安装svn。这里相当于设置快捷键调用svn
2.复制以下代码到控制台(Ctrl + ~)
a.适合st3:
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(' ',' ')).read())
b.适合st2:
import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();os.makedirs(ipp)ifnotos.path.exists(ipp)elseNone;urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler()));open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ',' ')).read());print('Please restart Sublime Text to finish installation')
3.在网上下载SubLime Texe2/3的SVN插件
4.点击Preferences - 浏览资源包
5.在文件资源管理器中。新建svn文件夹。将下载好的svn插件放入到svn文件夹里面
6.在项目文件右键插件是否有svn commit ,svnupdate 检验是否安装成功
三、代码语法检查插件
1.按下 Ctrl + Shift + p输入pci选中Install Package回车
2.输入sublimeLinter进行安装
3.安装完成后继续按下 Ctrl + Shift + p输入pci选中Install Package回车。
4.输入SublimeLinter-jshint进行安装
5.由于jshint组件依赖于nodejs里面的jshint.所以在nodejs环境下必须全局安装jshint. 在cmd窗口执行 npm install -g jshint 使用jshint -v 查看其版本检验是否安装成功
6.如果没有安装nodejs环境,上面第五点是运行不起的。接下来简要说明一下安装nodejs环境。如果已安装可忽略直接下一步
a.进入官网下载相应的系统。下面以window为例
b.进行傻瓜式的下一步操作直到完成。
c.记住要配置环境变量
d.使用node -v && npm -v 查看其版本检验是否安装成功
7.安装css代码校验也是同样。进入插件库里面安装sublimeliter-csslint插件
8.nodejs环境下也要安装csslint。在cmd窗口执行 npm install -g csslint
9.配置:在preferences-Pageckage Settings-SublimeLinter-Settings-User粘贴下面代码就OK
{
"user": {
"debug": false,
"delay": 0.25,
"error_color": "D02000",
"gutter_theme": "Packages/SublimeLinter/gutter-themes/Default/Default.gutter-theme",
"gutter_theme_excludes": [],
"lint_mode": "background",
"linters": {
"jshint": {
"@disable": false,
"args": [],
"excludes": []
}
},
"mark_style": "outline",
"no_column_highlights_line": false,
"passive_warnings": false,
"paths": {
"linux": [],
"osx": [],
"windows": []
},
"python_paths": {
"linux": [],
"osx": [],
"windows": []
},
"rc_search_limit": 3,
"shell_timeout": 10,
"show_errors_on_save": false,
"show_marks_in_minimap": true,
"syntax_map": {
"html (django)": "html",
"html (rails)": "html",
"html 5": "html",
"javascript (babel)": "javascript",
"magicpython": "python",
"php": "html",
"python django": "python",
"pythonimproved": "python"
},
"warning_color": "DDB700",
"wrap_find": true
}
}
四、定制一段代码块
1.tools - 新建代码片段(New Snippet)
2.你会看到以下代码,首先不要懵逼
<snippet>
<content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<!-- <tabTrigger>hello</tabTrigger> -->
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<!-- <scope>source.python</scope> -->
</snippet>
解释以上代码
<snippet>
<content><![CDATA[ 你需要插入的代码片段${1:name},test,${2}
]]></content>
<!-- 可选:快捷键,利用Tab自动补全代码的功能 -->
<tabTrigger>cygnet</tabTrigger>
<!-- 可选:使用范围,不填写代表对所有文件有效。附:source.css和test.html分别对应不同文件。 -->
<scope>source.js</scope>
<!-- 可选:在snippet菜单中的显示说明(支持中文)。如果不定义,菜单则显示当前文件的文件名。 -->
<description>My Fancy Snippet</description>
</snippet>
${1:name}表示代码插入后,光标所停留的位置,可同时插入多个。其中:name为自定义参数(可选)
${2}表示代码插入后,按Tab键,光标会根据顺序跳转到相应位置(以此类推)。
3.保存在\Packages\User目录下(例 X:\Sublime Text 2.0\Data\Packages\User),文件命名为cygnet-code,后缀名.sublime-snippet。
4.打开一个HTML文件。输入cygnet按下tab会自动生成你定制的代码块
v\:* {behavior:url(#default#VML);}
o\:* {behavior:url(#default#VML);}
w\:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}
Normal
0
7.8 磅
0
2
false
false
false
EN-US
ZH-CN
X-NONE
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:普通表格;
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-parent:"";
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin:0cm;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.5pt;
mso-bidi-font-size:11.0pt;
font-family:"Calibri",sans-serif;
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;
mso-bidi-font-family:"Times New Roman";
mso-bidi-theme-font:minor-bidi;
mso-font-kerning:1.0pt;}
Sublime Text的使用代码块安装的模块的更多相关文章
- 史上最全的 Sublime Text 汉化、插件安装合集
0.前言 本文用于给新手小白用户指明前进方向.不用做商业推广. 其次,鼓舞购买正版.拒绝盗版. 好了.口号喊完,接下来就直接開始正文. 1. Sublime Text 介绍 首先在開始前,先来介绍一下 ...
- Sublime Text 开发神器相关 插件安装 功能介绍
无法安装更多见http://blog.csdn.net/freshlover/article/details/44261229/ Sublime Text 3 安装插件管理 Package Contr ...
- Sublime Text 如何一个代码双屏显示代码上下部分?
Sublime Text 如何一个代码双屏显示代码上下部分? sublime text如何一个代码双屏显示代码上下部分 先显示2行实图 把想要分屏显示的文件,打开新窗口,然后再拖过去就可以了. 快捷操 ...
- Sublime Text 3.2.1详细安装破解教程,附最新激活码license(全网独家可用有效)
title: "Sublime Text 3.2.1详细安装破解教程,附最新激活码license(全网独家可用有效)" categories: soft tags: soft au ...
- python 控制语句基础---->代码块:以为冒号作为开始,用缩进来划分作用域,代表一个整体,是一个代码块,一个文件(模块)也称为一个代码块 | 作用域:作用的范围
# ### 代码块:以为冒号作为开始,用缩进来划分作用域,代表一个整体,是一个代码块,一个文件(模块)也称为一个代码块 # ### 作用域:作用的范围 print(11) print(12) prin ...
- Sublime Text 3 常用插件以及安装方法(转)
http://www.cnsecer.com/460.html 安装Sublime Text 3插件的方法: 朋友们,小站活着不容易,全靠广告费养着了,如果本文对你有帮助.麻烦动下手点下页面的广告吧, ...
- Sublime Text 3 常用插件以及安装方法(vue 插件)
使用Package Control组件安装 也可以安装package control组件,然后直接在线安装: 按Ctrl+` 调出console 粘贴以下代码到底部命令行并回车: { import u ...
- Sublime Text 3 常用插件以及安装方法
安装Sublime Text 3插件的方法: 一.直接安装 安装Sublime text 2插件很方便,可以直接下载安装包解压缩到Packages目录(菜单->preferences->p ...
- Sublime Text 3之Package Control 安装
1.通过快捷键 ctrl+` 或者 View > Show Console 打开控制台,然后粘贴以下安装代码: import urllib.request,os; pf = 'Package C ...
随机推荐
- JS中的_proto_
var grandfather = function(){ this.name = "LiuYashion" ; } var father = function(){}; fath ...
- (IOS)BaiduFM 程序分析
本文主要分享下楼主在学习Swift编程过程中,对GitHub上的一个开源app BaiduFM的研究心得. 项目地址:https://github.com/belm/BaiduFM-Swift 一.项 ...
- 【翻译】How To Tango With Django 1.5.4 第五章
5数据模型和数据库 一个模型就是一个描述你数据表的python对象.不用再通过SQL来操作数据库,而是使用python对象来操作数据库. 5.1rango要求 ...一个目录下面有多个下面 ...一个 ...
- Wordpress实现站搜索
wordpress内置的搜索表单如下 <form role="search" method="get" id="searchform" ...
- resx文件在X64位编译,提示“未能加载文件或程序集”的问题?
原文:resx文件在X64位编译,提示"未能加载文件或程序集"的问题? resx文件在X64位编译,提示"未能加载文件或程序集"的问题? 解答: 错误现象如下 ...
- 明白何谓Margin Collapse
不同于其他很多属性,盒模型中垂直方向上的Margin会在相遇时发生崩塌,也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时,只有二者中的较大值会被保留下来,可以从下面这个简单的例 ...
- java netty之ServerBootstrap的启动
通过前面的几篇文章,对整个netty部分的架构已经运行原理都有了一定的了解,那么这篇文章来分析一个经常用到的类:ServerBootstrap,一般对于服务器端的编程它用到的都还算是比较的多..看一看 ...
- Java连接本地MySQL数据库进行增删改查操作
package Dao; import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStat ...
- C++之路进阶——codevs1319(玩具装箱)
1319 玩具装箱 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 钻石 Diamond 题目描述 Description P教授要去看奥运,但是他舍不下他的玩具,于是 ...
- C++之路进阶——codevs2439(降雨量)
2439 降雨量 2007年省队选拔赛四川 时间限制: 1 s 空间限制: 64000 KB 题目等级 : 大师 Master 题目描述 Description 我们常常会说这样的话 ...