搜索
您的当前位置:首页正文

Atom编辑器折腾记_(10)CSScomb增强版[CSS/LESS/SASS]_html/css

2023-11-27 来源:环绕娱乐网

何为CSScomb

官方网站只有一句描述:

Makes your code beautiful(让你的代码更漂亮)

通俗点讲:

CSScomb是用来排版CSS代码的…可以说是格式化插件,依赖nodejs

获取CSScomb?这不是今天的话题

官方网站: CSScomb

  • 支持许多编辑器,比如Sublime/Atom/brackets等
  • 第三方CSScomb?这才是今天的话题

    昨天写了篇CSS3的文章…发现代码有点混乱..人力排版有点…….所以跑去atom插件库寻找csscomb

  • Atom settings install csscomb
  • 我去,,好几个CSScomb插件包….看图(三个蓝色圈圈的功能基本一致,第一个是官方的,,,今天的主角是黄色的)

    atom-css-comb 特点
  • 支持格式化CSS/LESS/SASS
  • 支持自定义格式
  • 内置三种排版风格(Yandex/CSScomb/zen)
  • Yandex的CSS规范..去引擎搜索了下..好像很强大…不过不适合我
  • CSScomb排版样式
  • zen(Emmet的前身)
  • 基础使用
  • 默认快捷键有两个 [还可以使用鼠标点击插件调用]

  • ctrl + alt + c[冲突]
  • ctrl + alt + shift + c[冲突]
  • 切换排版风格(Ready-made configs),看描述和看图

  • Packages Css comb settings
  • 默认快捷键参数

  • 'atom-text-editor': 'ctrl-alt-c':'css-comb:comb'
    进阶使用

    针对用户群:喜欢折腾,有自己风格的小伙伴,这里只是展示,具体小伙伴自己可以参考官方提供的文档进行定制

    看到上面那个common config,选中custom config [Edit config file], 进入到定制参数页面,格式是使用JSON写的.

    { "help": "About options https://github.com/csscomb/csscomb.js/blob/master/doc/options.md", "exclude": ["node_modules/**"], "verbose": true, "always-semicolon": true, "block-indent": " ", "colon-space": ["", " "], "color-case": "lower", "color-shorthand": true, "element-case": "lower", "eof-newline": true, "leading-zero": false, "quotes": "single", "remove-empty-rulesets": true, "rule-indent": " ", "stick-brace": "", "strip-spaces": true, "unitless-zero": true, "vendor-prefix-align": true }
    定制参数大全:点我点我点我

    小编还为您整理了以下内容,可能对您也有帮助:

    Sass/Scss和Less之间的区别是什么

    Sass:  一种动态样式语言,语法跟css一样(但多了些功能),比css好写,而且更容易阅读。Sass语法类似与Haml,属于缩排语法(makeup),用意就是为了快速写Html和Css。
    Less:  一种动态样式语言. 将CSS赋予了动态语言的特性,如变量,继承,运算, 函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox),也可一在服务端运行 (借助 Node.js)。

    Sass和Less之间的区别是什么?

    1、Less在JS上运行,Sass在Ruby上使用。

    Sass基于Ruby,需要安装Ruby。Less和Sass在Ruby中构建相似,但它已被移植到JavaScript中。为了使用LESS,我们可以将适用的JavaScript文件上载到服务器或通过脱机编译器编译CSS表。

    2、编写变量的方式不同。

    Sass使用$,而Less使用@。

    3、在Less中,仅允许循环数值。

    在Sass中,我们可以遍历任何类型的数据。但在Less中,我们只能使用递归函数循环数值。

    4、Sass有Compass,Less有Preboot

    Sass和LESS有可用于集成mixins的扩展(在整个站点中存储和共享CSS声明的能力)。

    Sass有适用于mixins的Compass,其中包括所有可用的选项以及未来支持的更新。

    Sass/Scss和Less之间的区别是什么

    Sass:  一种动态样式语言,语法跟css一样(但多了些功能),比css好写,而且更容易阅读。Sass语法类似与Haml,属于缩排语法(makeup),用意就是为了快速写Html和Css。
    Less:  一种动态样式语言. 将CSS赋予了动态语言的特性,如变量,继承,运算, 函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox),也可一在服务端运行 (借助 Node.js)。

    Sass和Less之间的区别是什么?

    1、Less在JS上运行,Sass在Ruby上使用。

    Sass基于Ruby,需要安装Ruby。Less和Sass在Ruby中构建相似,但它已被移植到JavaScript中。为了使用LESS,我们可以将适用的JavaScript文件上载到服务器或通过脱机编译器编译CSS表。

    2、编写变量的方式不同。

    Sass使用$,而Less使用@。

    3、在Less中,仅允许循环数值。

    在Sass中,我们可以遍历任何类型的数据。但在Less中,我们只能使用递归函数循环数值。

    4、Sass有Compass,Less有Preboot

    Sass和LESS有可用于集成mixins的扩展(在整个站点中存储和共享CSS声明的能力)。

    Sass有适用于mixins的Compass,其中包括所有可用的选项以及未来支持的更新。

    less样式如何使用cssmodule

    1.Less
    变量:@变量名
    混合:在a类中使用b类的所有属性, .a{ .b(); color:#fff}
    嵌套:使用嵌套代替原始css的层叠,& 表示当前选择器的父级
    运算:+ - * /,可以对任何数字、颜色或变量进行运算
    转义:
    函数:Less 内置了多种函数用于转换颜色、处理字符串、算术运算等
    命名空间和访问符
    作用域:首先在本地查找变量和混合(mixins),如果找不到,则从“父”级作用域继承
    注释: // 行注释,/.../块注释
    导入:@import "library";可以导入一个 .less 文件,此文件中的所有变量就可以全部使用了, .less 扩展名,可以省略掉
    2.css moles
    CSS的规则都是全局的,任何一个组件的样式规则,都对整个页面有效。产生局部作用域的唯一方法,就是使用一个独一无二的class的名字,不会与其他选择器重名。 CSS Moles是通过哈希算法将类名编译,保证类名的唯一性。
    声明全局规则:
    灵活按需导入以便复用代码,避免样式全局污染,但不利于写组件单元测试
    3.CSS bem规范
    BEM - Block Element Modfier(块,元素,编辑器)
    在选择器中用三种符号来表示扩展关系
    -中划线 :仅作为连字符使用,表示某个块或者某个子元素的多单词之间的连接记号。
    __ 双下划线:双下划线用来连接块和块的子元素
    -- 双中划线:用来描述一个块或者块的子元素的一种状态
    type-block__element--modifier
    Block:不是指html中的块元素,任何独立的页面元素都可以视为一个块,这个独立的块容器有一个唯一的css类名,也就是这个块的名字
    Element:属于块的某部分,任何的在Block中的DOM节点,都是一个element。在一个已知的block中,所有的element在语义上都是相等的,Block下的所有Element不考虑层级嵌套关系,扁平化处理都属于Block,即连续的__下划线只能出现一次
    Modifier:用于修饰块或元素,体现在外观或行为上的改变,都可作为一个修饰器,如active状态,add/edit的操作
    注意事项:
    1)保证各个部分只有一级B__E--M,修饰器需要和对应的块或元素一起使用,避免单独使用。不能有 .block__el1__el2 的格式
    2)仅以类名作为选择器,不使用ID或标签名来约束选择器
    ...import'./index.less'...<divclassName="article"><divclassName="article__body"><pclassName="article__title">title</p><buttonclassName="article__button--primary"></button><buttonclassName="article__button--success"></button></div></div>//index.less文件.article{max-width:1200px;&__body{padding:20px;}&__title{font-weight:700;}&__button{padding:5px8px;&--primary{background:blue;}&--success{background:green;}}}

    less样式如何使用cssmodule

    1.Less
    变量:@变量名
    混合:在a类中使用b类的所有属性, .a{ .b(); color:#fff}
    嵌套:使用嵌套代替原始css的层叠,& 表示当前选择器的父级
    运算:+ - * /,可以对任何数字、颜色或变量进行运算
    转义:
    函数:Less 内置了多种函数用于转换颜色、处理字符串、算术运算等
    命名空间和访问符
    作用域:首先在本地查找变量和混合(mixins),如果找不到,则从“父”级作用域继承
    注释: // 行注释,/.../块注释
    导入:@import "library";可以导入一个 .less 文件,此文件中的所有变量就可以全部使用了, .less 扩展名,可以省略掉
    2.css moles
    CSS的规则都是全局的,任何一个组件的样式规则,都对整个页面有效。产生局部作用域的唯一方法,就是使用一个独一无二的class的名字,不会与其他选择器重名。 CSS Moles是通过哈希算法将类名编译,保证类名的唯一性。
    声明全局规则:
    灵活按需导入以便复用代码,避免样式全局污染,但不利于写组件单元测试
    3.CSS bem规范
    BEM - Block Element Modfier(块,元素,编辑器)
    在选择器中用三种符号来表示扩展关系
    -中划线 :仅作为连字符使用,表示某个块或者某个子元素的多单词之间的连接记号。
    __ 双下划线:双下划线用来连接块和块的子元素
    -- 双中划线:用来描述一个块或者块的子元素的一种状态
    type-block__element--modifier
    Block:不是指html中的块元素,任何独立的页面元素都可以视为一个块,这个独立的块容器有一个唯一的css类名,也就是这个块的名字
    Element:属于块的某部分,任何的在Block中的DOM节点,都是一个element。在一个已知的block中,所有的element在语义上都是相等的,Block下的所有Element不考虑层级嵌套关系,扁平化处理都属于Block,即连续的__下划线只能出现一次
    Modifier:用于修饰块或元素,体现在外观或行为上的改变,都可作为一个修饰器,如active状态,add/edit的操作
    注意事项:
    1)保证各个部分只有一级B__E--M,修饰器需要和对应的块或元素一起使用,避免单独使用。不能有 .block__el1__el2 的格式
    2)仅以类名作为选择器,不使用ID或标签名来约束选择器
    ...import'./index.less'...<divclassName="article"><divclassName="article__body"><pclassName="article__title">title</p><buttonclassName="article__button--primary"></button><buttonclassName="article__button--success"></button></div></div>//index.less文件.article{max-width:1200px;&__body{padding:20px;}&__title{font-weight:700;}&__button{padding:5px8px;&--primary{background:blue;}&--success{background:green;}}}

    less以及sass两者什么区别

    事实证明,LESS——以及Sass——功能比这个要多太多。LESS和Sass在语法上有些共性,比如下面这些:

    ● 混入(Mixins)——class中的class;

    ● 参数混入——可以传递参数的class,就像函数一样;

    ● 嵌套规则——Class中嵌套class,从而减少重复的代码;

    ● 运算——CSS中用上数学;

    ● 颜色功能——可以编辑颜色;

    ● 名字空间(namespace)——分组样式,从而可以被调用;

    ● 作用域——局部修改样式;

    ● JavaScript 赋值——在CSS中使用JavaScript表达式赋值。

    LESS和Sass的主要不同就是他们的实现方式,LESSS是基于JavaScript,所以,是在客户端处理的。

    另一方面,Sass是基于Ruby的,然后是在服务器端处理的。很多开发者不会选择LESS因为JavaScript引擎需要额外的时间来处理代码然后输出修改过的CSS到浏览器。关于这个有很多种方式,我选择的是只在开发环节使用LESS。一旦我完成了开发,我就复制然后粘贴LESS输出的到一个压缩器,然后到一个单独的CSS文件来替代LESS文件。另一个选择是使用LESS.app来编译和压缩你的LESS文件。两个选择都将最小化你的样式输出,从而避免由于用户的浏览器不支持JavaScript而可能引起的任何问题。尽管这不大可能,但终归是有可能的。

    关于变量在LESS和Sass中的唯一区别就是,LESS用@,Sass用$。同时还有一些作用域上的差别,我后面会提到。

    混入(mixin)

    偶尔,我们会创建一些会在样式表中重复使用的样式规则。没有人会阻止你在一个HTML的元素中使用多个class,但是你可以用LESS,在样式表中完成。

    .border {

    border-top: 1px dotted #333;

    }

    article.post {

    background: #eee;

    .border;

    }

    ul.menu {

    background: #ccc;

    .border;

    }

    这可以给到你与你在两个元素中分别添加.bordered class同样的效果——而且仅仅在样式表中就完成了。而且它工作的很好:

    文字和无序列表都被用上了边框样式

    在Sass中,你要在样式规则前面添加@mixin声明,规定它是个嵌套。然后,通过@include来调用它。

    @mixin border {

    border-top: 1px dotted #333;

    }

    article.post {

    background: #eee;

    @include border;

    }

    ul.menu {

    background: #ccc;

    @include border;

    }

    参数混入

    就像在CSS中有函数功能一样,这些对于那些在现在的CSS工作中多余的工作非常有用。最好和最有用的例子就是我们正在经历的从CSS2到CSS3过渡过程中的很多浏览器私有前缀。Nettuts+有一篇Jeffrey Way写的很赞的视频和文章,内容是包含着由有用的参数组成的文件,他们涵盖了大部分使用各个浏览器私有前缀的CSS3属性。

    .border-radius( @radius: 3px ) {

    -webkit-border-radius: @radius;

    -moz-border-radius: @radius;

    border-radius: @radius;

    }

    在这个例子中,.border-radius有个默认的3px的圆角,但是你可以使用你需要的任何值。.border-radius(10px)将会生成半径为10px的圆角。

    Sass中的语法很像LESS,只是使用$声明变量,然后使用前面提到的@mixin和@include来调用。

    选择器继承

    这个东西LESS并没有提供。通过这个功能,你可以将一个选择器附加到已经预先定义的选择器上,而无需再使用逗号将两者分开的写法了。

    .menu {

    border: 1px solid #ddd;

    }

    .footer {

    @extend .menu;

    }

    /* 上面的写法规则和下面的效果是一样的: */

    .menu, .footer {

    border: 1px solid #ddd;

    }

    嵌套规则

    在css中嵌套class和ID是避免你的样式干扰或者被别的样式干扰的唯一方法了。但是这可能会很凌乱。使用一个类似于#site-body .post .post-header h2 的选择器毫无吸引力而且会占用大量不必要的空格。使用LESS,你可以嵌套id、class以及标签。

    #site-body { …

    .post { …

    .post-header { …

    h2 { … }

    a { …

    &:visited { … }

    &:hover { … }

    }

    }

    }

    }

    上面的代码最终和上面的例子(那一长串的选择器)的效果一样,但是要更容易阅读和理解的多,而且它占用很少的空间。你也可以通过&来引用元素样式到他们的伪元素上,该功能类似于JavaScript中的this。

    运算

    这可能是你所期望的:使用数字或者变量在你的样式表中实现数算!

    @base_margin: 10px;

    @double_margin: @base_margin * 2;

    @full_page: 960px;

    @half_page: @full_page / 2;

    @quarter_page: (@full_page / 2) / 2;

    声明下,我也意识到我可以除以4来获得@quarter_page变量,但是这里我只是想要演示下圆括号组成“运算顺序”在这里也是可以用的。在使用简写的规则中,小括号也是必须的,比如 border: (@width / 2) solid #000。

    Sass在数字上比LESS更专业。它已经可以换算单位了。Sass可以处理无法识别的度量单位并将其输出。这个特性很明显是一个对未来的尝试——证明W3C作出的一些改变。

    /* Sass */

    2in + 3cm + 2pc = 3.514in

    /* LESS */

    2in + 3cm + 2pc = Error

    Color函数

    在文章开头,我提到了LESS如何帮我在编码过程中处理围绕着一个调色板。对此贡献最大的一部分就是颜色函数。加入你用一个标准的蓝色贯穿到你的样式中,然后你想要在表单中用这个蓝色来做一个渐变的按钮。你可以打开Photoshop或者其它的编辑器来获取一个比蓝色较浅的或者较暗的HEX色值来作为渐变色。或者,你可以只是使用LESS中的颜色函数。

    @blue: #369;

    .submit {

    padding: 5px 10px;

    border: 1px solid @blue;

    background: -moz-linear-gradient(top, lighten(@blue, 10%), @blue 100%); /*Moz*/

    background: -webkit-gradient(linear, center top, center bottom, from(lighten(@blue, 10%)), color-stop(100%, @blue)); /*Webkit*/

    background: -o-linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%);/*Opera*/

    background: -ms-linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); /*IE 10+*/

    background: linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); /*W3C*/

    color: #fff;

    text-shadow: 0 -1px 1px rgba(0,0,0,0.4);

    }

    lighten函数很明显就是用百分比值来减轻颜色,在这个例子中,它将减轻这个基础的蓝色的10%。这种方法可以让我们变化的元素或者其它任何元素的颜色值——只是简单的改变基础颜色而已。这对于主题(模板)来说非常有用。而且,如果你使用参数功能,像上面提到的,你还可以更简单的应用到一些浏览器私有前缀的声明中,比如:.linear-gradient(lighten(@blue), @blue, 100%);。

    还有很多其它的色彩函数,比如变暗或者调整颜色的饱和度,甚至你可以旋转色盘来使用其它颜色。我建议亲自尝试下你能想出的(用法)。

    Sass貌似有更多的选项——但我并不需要这么多。我个人最常用的还是lighten和darken。如果你想了解更多,可以看一下这篇很详细的介绍。

    条件语句与控制

    这是一个的确很赞的东东,也是另一个LESS不支持的功能。使用 Sass,你可以使用if { } else { } 条件语句,以及for { }循环。它甚至支持 and、 or和 not,以及 <、 >、 <=、 >= 和 == 等操作符。

    /* Sample Sass "if" statement */

    @if lightness($color) > 30% {

    background-color: #000;

    } @else {

    }

    /* Sample Sass "for" loop */

    @for $i from 1px to 10px {

    .border-#{i} {

    border: $i solid blue;

    }

    }

    名字空间(Namespaces)

    名字空间可以用于组织我们的CSS到另一个档次,我们可以将一些公用的样式分组,然后在用的时候直接使用。例如,如果我们创建了一个名为default的样式分组,我们就可以在用到的时候直接从该组中调用。

    #defaults {

    .nav_list () {

    list-style: none;

    margin: 0; padding: 0;

    }

    .button () { … }

    .quote () { … }

    }

    然后,在我们的代码中,如果我们正好在一个nav元素中使用了ul元素,我们就会想到我们需要default样式。那么我们就可以简单的调用它,它也会被直接应用。

    nav ul {

    #defaults > .nav_list;

    }

    作用域

    作用域是编程中的标配,LESS中也是。如果你在你样式表的root级声明一个变量,它在整个文档中都是可以用的。然而,如果你在一个选择器,比如id或者class中,重新定义了这个变量,那么,它就只能在这个选择器中可用了——当然是重新定义后的新值。

    @color: #00c; /* 蓝色 */

    #header {

    @color: #c00; /* red */

    border: 1px solid @color; /* 红色边框 */

    }

    #footer {

    border: 1px solid @color; /* 蓝色边框 */

    }

    因为我们在#header中重新定义了color变量,变量的值将会是不同的而且只会在该选择器中有效。它之前或者之后的所有地方,如果没有被重新定义,都会保持那个原始的值。

    作用域在Sass中稍有不同。在上面的代码中,当@color变量变为红色后,代码中,此处之后的该变量的值,将会被重写(成为红色)。

    注释

    这一部分比较基础。LESS中允许两种注释写法。标准的CSS注释,/* comment */,是有效的,而且能够通过处理并正确输出。当行注释,// comment,同样可以用但是不能够通过处理也不能被输出,然后,结果是,“无声的”。

    导入

    导入也相当符合标准。标准的 @import: ‘classes.less’; 处理的很好。然而,如果你想要导入其它的LESS文件,那么文件的扩展名是可选的,所以 @import ‘classes’; 也是可行的。如果你想要导入一些无需LESS处理的内容,你可以使用 .css 扩展 (比如, @import: ‘reset.css’;)。

    字符串插入

    字符串也是可以用于变量中的,然后通过@{name}来调用。

    @base_url : 'http://www.qianan.net';

    background-image: url("@{base_url}/images/background.png");

    转义(Escaping)

    可能偶尔会需要引入一个CSS中非法或者LESS无法识别的值。通常是一些IE的hack。要避免抛出异常并破坏LESS,你将需要避开它们。

    .class {

    filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=20)";

    }

    /*实际上将会输出下面的代码: */

    .class {

    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=20);

    }

    JavaScript 赋值

    这是LESS中我最中意的部分:在样式表中使用Javascript——相当精彩。你可以使用表达式,也可以参考环境方向来使用反单引号。

    @string: `'howdy'.toUpperCase()`; /* @string 变成 'HOWDY' */

    /* 你也可以使用前面提到的插值: */

    @string: 'howdy';

    @var: ~`'@{string}'.topUpperCase()`; /* 变为 'HOWDY' */

    /* 获取文档的信息 */

    @height = `document.body.clientHeight`;

    输出格式

    然而LESS并没有输出设置,而Sass提供4中输出选项:nested, compact, compressed 和 expanded。

    结语

    这两个方法有很多共同点。对写代码的设计师来说,它们都是很酷的工具,它们也可以帮助开发者更有效和快速的工作。如果你是Ruby或HTML的粉丝,那么Sass会是你的好助手。对我来说,一个PHP和JavaScript极客,我倾向于LESS,因为它便于引入和能够使用JavaScript的表达式以及文档属性。我怀疑我甚至接近真正理解在样式表中编程的可能行了,但是我仍坚持尝试。如果你在工作中有用到它们中的一个,或者两个都用,我很乐意听到关于它的更多内容,并看到你的成果。当然,技巧、诀窍、更正一直是很欢迎的。

    Sublime在配置CSS编辑辅助工具包时出现错误

    情形一:Package Control:There are no packages available for installation

    据StackOverflow上说是IPv6造成,如果我们的Intent服务提供者(ISP)不支持IPv6就会引发上述错误,原文如下:
    This error is happened with IPv6 problem. If yourInternet Service Provider (ISP) does not support for IPv6 you got this error.
    如果IPV6有问题,curl就会打印类似这样的错误:
    curl: (7) Failed to connect to xxxxx...
    找到了问题原因,下面着手解决它。
    第一步:取得sublime.wbond.net的IPv4地址。在命令提示符中输入以下命令:
    pingsublime.wbond.net

    第二步:打开C:\Windows\system32\drivers\etc\hosts文件,增加如下对应关系:{IPv4 address}sublime.wbond.net

    保存文件,然后再打开Package Control(快捷键Ctrl+Shift+P)开始安装即可。
    情形二:Package Control:Unableto download
    Emmet.Please view the console for more details./Error while loading PyV8
    binary:exit code 3…

    类似这种插件无法下载的问题,一般是由于网速慢,或者目标域名被墙而无法正常访问导致的。
    这种情况下,首先检查本地网络是否可以访问,检测下载速度是不是特别慢,
    如果网速太慢,换个时间再安装。还有一个办法是:到github或第三方网站手动下载安装包,然后解压到安装目录下的/Packages目录下。
    比如我的Emmet则需要解压到D:\ProgramFiles\Sublime Text 2\Data\Packages\Emmet目录下。
    另外许多插件都依赖于Python的,在插件安装开始时会去下载Python相关资源,
    比如,Emmet安装就会先下载你系统位数一致的Python版本,我们在debug窗口可以看到这些信息:

    其中有两条,表示下载失败,原因一般是网速慢请求超时或被墙了。
    Emmet: Loading PyV8 binary from https://raw.github.com/emmetio/pyv8-binaries/master/pyv8-win64.zip
    Emmet.pyv8loader: Unable to download package fromhttps://raw.github.com/emmetio/pyv8-binaries/master/pyv8-win64.zipWrong URL error
    同时,pyv8下载失败会弹出一个提示框:

    这时候,我们按照给出的zip包下载地址手动下载PyV8的安装包(PyV8的项目地址为https://github.com/emmetio/pyv8-binaries#readme,可以根据系统种类选择对应安装包),下载成功后打开菜单Preferences – Browser Packages,然后解压到子目录PyV8内。比如我的对应目录是D:\Program Files\Sublime Text2\Data\Packages\PyV8\win64(若你的是32位系统,最终目录则为win32)。
    大多数情况,PyV8安装好了以后,再安装需要的其他插件便可顺利进行了。
    情形三:无法调出Package Control或未安装PackageControl
    首次安装或重新安装的方式是一样的,首先打开控制台(Ctrl+~),不过Sublime Text的版本不同,执行的命令是不一样的。
    对于Sublime Text2输入以下命令执行:
    [python]view plaincopy

    importurllib2,os,hashlib; h ='eb2297e1a458f27d836c04bb0cbaf282'+'d0e7a3098092775ccb37ca9d6b2e4b7d'; 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()) ); by = urllib2.urlopen('http://packagecontrol.io/'+ pf.replace(' ','%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf),'wb').write(by)ifdh == helseNone;print('Error validating download (got %s instead of %s), please try manual install'% (dh, h)ifdh != helse'Please restart Sublime Text to finish installation')
    对于Sublime Text 3需要输入如下的命令:
    [python]view plaincopy

    importurllib.request,os,hashlib; h ='eb2297e1a458f27d836c04bb0cbaf282'+'d0e7a3098092775ccb37ca9d6b2e4b7d'; 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))ifdh != helseopen(os.path.join( ipp, pf),'wb').write(by)
    执行完后,Package Control安装成功。此时便可以调出PackageControl命令输入面板(Ctrl+Shift+P),输入install
    除了使用上述命令安装法,还可手动安装,需要的可访问官网查看https://packagecontrol.io/installation#st3
    三、 安装官方原版
    上面的问题解决了,但是想想这么强大的工具,这么多的问题,持怀疑态度。折腾了这么久再卸载了有点太可惜了。不过为了弄清楚问题根本,狠狠心,果断卸载了我一直使用的Sublime Text 2 某破解优化版,其中已集成了JsFormat,Alignment,Emmet等这些常用的插件。卸载后去官网下载了官方版本http://www.sublimetext.com/2
    并安装完成。
    这次安装,先不要着急打开Sublime
    Text。为了以后安装方便,决定不再使用系统默认的Packages安装路径C:\Users\Administrator\AppData
    \Roaming\Data,在Sublime Text2的安装目录下新建文件夹/Data,该文件夹创建完成后再打开Sublime
    Text程序,我们发现,Packages被安装在了当前创建的文件夹下(我的路径是D:\Program Files\Sublime Text
    2\Data)。稍后把其他必备插件装全了,我们备份一下Sublime
    Text 2文件夹,这样以后走到哪都可以无须一步步重新安装,快速部署我们的Sublime Text环境。

    这次安装了七八个插件,也没有出现一次上述错误,说明官方版本还是比较靠谱比较稳定的。虽然每个月都会弹出付费注册提
    示,不过不影响使用就这样用吧。有洁癖的我建议你安装Sublime Text
    3,本人测试发现最新版这个破解版相对来说比国内流行的某v2版要稳定的多,不过支持ST3的插件目前相对少一些。
    英文官方原版首次使用时,会有两个依赖包升级提示:



    点“确定关闭”即可,无须理会。
    四、Sublime必备插件
    补充几个必备的开发插件,不了解作用的自行查找吧。
    必备的:Alignment,JsFormat,CSSComb,CTags,DocBlockr,Emmet,FileDiffs,SASS,LESS,SASS Build,Lessc,Git,SublimeLinter
    另外还有几个不错的,可以选择使用:Terminal,Trimmer,ColorPicker,ConverToUTF8等。
    五、补充知识
    最后普及几个需要了解的知识:
    1.所装的插件列表(有些不在里面)
    D:\Program Files\Sublime Text2\Data\Packages\User\Package Control.sublime-settings
    2. Package Control常用的命令InstallPackage (安装扩展)、List Packages (列出全部扩展)、Remove Package (移除扩展)、Upgrade Package (升级扩展)
    3.插件热键冲突,可以自定义修改:Preferences > Package Settings > Alignment(或其他插件名)> Key Bindding - User然后写入快捷键。(有些插件需要到安装目录下的配置文件修改)
    4.有Package Control其他相关问题上,上github项目查找。
    https://github.com/wbond/package_control/issues?q=is%3Aclosed
    比如较常见的问题Package control fails to download new packages:
    https://github.com/wbond/package_control/issues/736
    5.列一下常用的快捷键:
    Ctrl+D 选词 (反复按快捷键,即可继续向下同时选中下一个相同的文本进行同时编辑)
    Ctrl+G 跳转到相应的行
    Ctrl+J 合并行(已选择需要合并的多行时)
    Ctrl+L 选择整行(按住-继续选择下行)
    Ctrl+M 光标移动至括号内开始或结束的位置
    Ctrl+T 词互换
    Ctrl+U 软撤销
    Ctrl+P 查找当前项目中的文件和快速搜索;输入 @ 查找文件主标题/函数;或者输入 : 跳转到文件某行;
    Ctrl+R 快速列出/跳转到某个函数
    Ctrl+K Backspace 从光标处删除至行首
    Ctrl+KB 开启/关闭侧边栏
    Ctrl+KK 从光标处删除至行尾
    Ctrl+KT 折叠属性
    Ctrl+KU 改为大写
    Ctrl+KL 改为小写
    Ctrl+K0 展开所有
    Ctrl+Enter 插入行后(快速换行)
    Ctrl+Tab 当前窗口中的标签页切换
    Ctrl+Shift+A 选择光标位置父标签对儿
    Ctrl+Shift+D 复制光标所在整行,插入在该行之前
    ctrl+shift+F 在文件夹内查找,与普通编辑器不同的地方是sublime允许添加多个文件夹进行查找
    Ctrl+Shift+K 删除整行
    Ctrl+Shift+L 鼠标选中多行(按下快捷键),即可同时编辑这些行
    Ctrl+Shift+M 选择括号内的内容(按住-继续选择父括号)
    Ctrl+Shift+P 打开命令面板
    Ctrl+Shift+/ 注释已选择内容
    Ctrl+Shift+↑可以移动此行代码,与上行互换
    Ctrl+Shift+↓可以移动此行代码,与下行互换
    Ctrl+Shift+[ 折叠代码
    Ctrl+Shift+] 展开代码
    Ctrl+Shift+Enter 光标前插入行
    Ctrl+PageDown 、Ctrl+PageUp 文件按开启的前后顺序切换
    Ctrl+Z 撤销
    Ctrl+Y 恢复撤销
    Ctrl+F2 设置书签
    Ctrl+/ 注释整行(如已选择内容,同“Ctrl+Shift+/”效果)
    Ctrl+鼠标左键 可以同时选择要编辑的多处文本
    Shift+鼠标右键(或使用鼠标中键)可以用鼠标进行竖向多行选择
    Shift+F2 上一个书签
    Shift+Tab 去除缩进
    Alt+Shift+1~9(非小键盘)屏幕显示相等数字的小窗口
    Alt+. 闭合当前标签
    Alt+F3 选中文本按下快捷键,即可一次性选择全部的相同文本进行同时编辑
    Tab 缩进 自动完成
    F2 下一个书签
    F9 行排序(按a-z)
    F11 全屏模式

    Sublime在配置CSS编辑辅助工具包时出现错误

    情形一:Package Control:There are no packages available for installation

    据StackOverflow上说是IPv6造成,如果我们的Intent服务提供者(ISP)不支持IPv6就会引发上述错误,原文如下:
    This error is happened with IPv6 problem. If yourInternet Service Provider (ISP) does not support for IPv6 you got this error.
    如果IPV6有问题,curl就会打印类似这样的错误:
    curl: (7) Failed to connect to xxxxx...
    找到了问题原因,下面着手解决它。
    第一步:取得sublime.wbond.net的IPv4地址。在命令提示符中输入以下命令:
    pingsublime.wbond.net

    第二步:打开C:\Windows\system32\drivers\etc\hosts文件,增加如下对应关系:{IPv4 address}sublime.wbond.net

    保存文件,然后再打开Package Control(快捷键Ctrl+Shift+P)开始安装即可。
    情形二:Package Control:Unableto download
    Emmet.Please view the console for more details./Error while loading PyV8
    binary:exit code 3…

    类似这种插件无法下载的问题,一般是由于网速慢,或者目标域名被墙而无法正常访问导致的。
    这种情况下,首先检查本地网络是否可以访问,检测下载速度是不是特别慢,
    如果网速太慢,换个时间再安装。还有一个办法是:到github或第三方网站手动下载安装包,然后解压到安装目录下的/Packages目录下。
    比如我的Emmet则需要解压到D:\ProgramFiles\Sublime Text 2\Data\Packages\Emmet目录下。
    另外许多插件都依赖于Python的,在插件安装开始时会去下载Python相关资源,
    比如,Emmet安装就会先下载你系统位数一致的Python版本,我们在debug窗口可以看到这些信息:

    其中有两条,表示下载失败,原因一般是网速慢请求超时或被墙了。
    Emmet: Loading PyV8 binary from https://raw.github.com/emmetio/pyv8-binaries/master/pyv8-win64.zip
    Emmet.pyv8loader: Unable to download package fromhttps://raw.github.com/emmetio/pyv8-binaries/master/pyv8-win64.zipWrong URL error
    同时,pyv8下载失败会弹出一个提示框:

    这时候,我们按照给出的zip包下载地址手动下载PyV8的安装包(PyV8的项目地址为https://github.com/emmetio/pyv8-binaries#readme,可以根据系统种类选择对应安装包),下载成功后打开菜单Preferences – Browser Packages,然后解压到子目录PyV8内。比如我的对应目录是D:\Program Files\Sublime Text2\Data\Packages\PyV8\win64(若你的是32位系统,最终目录则为win32)。
    大多数情况,PyV8安装好了以后,再安装需要的其他插件便可顺利进行了。
    情形三:无法调出Package Control或未安装PackageControl
    首次安装或重新安装的方式是一样的,首先打开控制台(Ctrl+~),不过Sublime Text的版本不同,执行的命令是不一样的。
    对于Sublime Text2输入以下命令执行:
    [python]view plaincopy

    importurllib2,os,hashlib; h ='eb2297e1a458f27d836c04bb0cbaf282'+'d0e7a3098092775ccb37ca9d6b2e4b7d'; 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()) ); by = urllib2.urlopen('http://packagecontrol.io/'+ pf.replace(' ','%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf),'wb').write(by)ifdh == helseNone;print('Error validating download (got %s instead of %s), please try manual install'% (dh, h)ifdh != helse'Please restart Sublime Text to finish installation')
    对于Sublime Text 3需要输入如下的命令:
    [python]view plaincopy

    importurllib.request,os,hashlib; h ='eb2297e1a458f27d836c04bb0cbaf282'+'d0e7a3098092775ccb37ca9d6b2e4b7d'; 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))ifdh != helseopen(os.path.join( ipp, pf),'wb').write(by)
    执行完后,Package Control安装成功。此时便可以调出PackageControl命令输入面板(Ctrl+Shift+P),输入install
    除了使用上述命令安装法,还可手动安装,需要的可访问官网查看https://packagecontrol.io/installation#st3
    三、 安装官方原版
    上面的问题解决了,但是想想这么强大的工具,这么多的问题,持怀疑态度。折腾了这么久再卸载了有点太可惜了。不过为了弄清楚问题根本,狠狠心,果断卸载了我一直使用的Sublime Text 2 某破解优化版,其中已集成了JsFormat,Alignment,Emmet等这些常用的插件。卸载后去官网下载了官方版本http://www.sublimetext.com/2
    并安装完成。
    这次安装,先不要着急打开Sublime
    Text。为了以后安装方便,决定不再使用系统默认的Packages安装路径C:\Users\Administrator\AppData
    \Roaming\Data,在Sublime Text2的安装目录下新建文件夹/Data,该文件夹创建完成后再打开Sublime
    Text程序,我们发现,Packages被安装在了当前创建的文件夹下(我的路径是D:\Program Files\Sublime Text
    2\Data)。稍后把其他必备插件装全了,我们备份一下Sublime
    Text 2文件夹,这样以后走到哪都可以无须一步步重新安装,快速部署我们的Sublime Text环境。

    这次安装了七八个插件,也没有出现一次上述错误,说明官方版本还是比较靠谱比较稳定的。虽然每个月都会弹出付费注册提
    示,不过不影响使用就这样用吧。有洁癖的我建议你安装Sublime Text
    3,本人测试发现最新版这个破解版相对来说比国内流行的某v2版要稳定的多,不过支持ST3的插件目前相对少一些。
    英文官方原版首次使用时,会有两个依赖包升级提示:



    点“确定关闭”即可,无须理会。
    四、Sublime必备插件
    补充几个必备的开发插件,不了解作用的自行查找吧。
    必备的:Alignment,JsFormat,CSSComb,CTags,DocBlockr,Emmet,FileDiffs,SASS,LESS,SASS Build,Lessc,Git,SublimeLinter
    另外还有几个不错的,可以选择使用:Terminal,Trimmer,ColorPicker,ConverToUTF8等。
    五、补充知识
    最后普及几个需要了解的知识:
    1.所装的插件列表(有些不在里面)
    D:\Program Files\Sublime Text2\Data\Packages\User\Package Control.sublime-settings
    2. Package Control常用的命令InstallPackage (安装扩展)、List Packages (列出全部扩展)、Remove Package (移除扩展)、Upgrade Package (升级扩展)
    3.插件热键冲突,可以自定义修改:Preferences > Package Settings > Alignment(或其他插件名)> Key Bindding - User然后写入快捷键。(有些插件需要到安装目录下的配置文件修改)
    4.有Package Control其他相关问题上,上github项目查找。
    https://github.com/wbond/package_control/issues?q=is%3Aclosed
    比如较常见的问题Package control fails to download new packages:
    https://github.com/wbond/package_control/issues/736
    5.列一下常用的快捷键:
    Ctrl+D 选词 (反复按快捷键,即可继续向下同时选中下一个相同的文本进行同时编辑)
    Ctrl+G 跳转到相应的行
    Ctrl+J 合并行(已选择需要合并的多行时)
    Ctrl+L 选择整行(按住-继续选择下行)
    Ctrl+M 光标移动至括号内开始或结束的位置
    Ctrl+T 词互换
    Ctrl+U 软撤销
    Ctrl+P 查找当前项目中的文件和快速搜索;输入 @ 查找文件主标题/函数;或者输入 : 跳转到文件某行;
    Ctrl+R 快速列出/跳转到某个函数
    Ctrl+K Backspace 从光标处删除至行首
    Ctrl+KB 开启/关闭侧边栏
    Ctrl+KK 从光标处删除至行尾
    Ctrl+KT 折叠属性
    Ctrl+KU 改为大写
    Ctrl+KL 改为小写
    Ctrl+K0 展开所有
    Ctrl+Enter 插入行后(快速换行)
    Ctrl+Tab 当前窗口中的标签页切换
    Ctrl+Shift+A 选择光标位置父标签对儿
    Ctrl+Shift+D 复制光标所在整行,插入在该行之前
    ctrl+shift+F 在文件夹内查找,与普通编辑器不同的地方是sublime允许添加多个文件夹进行查找
    Ctrl+Shift+K 删除整行
    Ctrl+Shift+L 鼠标选中多行(按下快捷键),即可同时编辑这些行
    Ctrl+Shift+M 选择括号内的内容(按住-继续选择父括号)
    Ctrl+Shift+P 打开命令面板
    Ctrl+Shift+/ 注释已选择内容
    Ctrl+Shift+↑可以移动此行代码,与上行互换
    Ctrl+Shift+↓可以移动此行代码,与下行互换
    Ctrl+Shift+[ 折叠代码
    Ctrl+Shift+] 展开代码
    Ctrl+Shift+Enter 光标前插入行
    Ctrl+PageDown 、Ctrl+PageUp 文件按开启的前后顺序切换
    Ctrl+Z 撤销
    Ctrl+Y 恢复撤销
    Ctrl+F2 设置书签
    Ctrl+/ 注释整行(如已选择内容,同“Ctrl+Shift+/”效果)
    Ctrl+鼠标左键 可以同时选择要编辑的多处文本
    Shift+鼠标右键(或使用鼠标中键)可以用鼠标进行竖向多行选择
    Shift+F2 上一个书签
    Shift+Tab 去除缩进
    Alt+Shift+1~9(非小键盘)屏幕显示相等数字的小窗口
    Alt+. 闭合当前标签
    Alt+F3 选中文本按下快捷键,即可一次性选择全部的相同文本进行同时编辑
    Tab 缩进 自动完成
    F2 下一个书签
    F9 行排序(按a-z)
    F11 全屏模式

    HTML/CSS 手机端中的长度单位rem 可以像px一样直接用吗?需不需要什么声明或者换算??

    rem一般用于设置字体的大小,1rem就是html根元素的字体大小,2rem就是html字体大小的2倍,1.5rem是html字体的1.5倍,0.75rem则是html字体大小的四分之三,依此类推。

    因此,rem是一个相对长度单位,当改变html根元素的字体大小时,所有以rem为单位的字体大小也会跟着放大或缩小。

    当然,它也可以用在其它地方,不一定是字体大小。比如要把某个元素的宽度设为5个字符的宽度,则 {width:5rem}

    怎么解决浏览器的css样式兼容问题1

    有两种方法:

    1、在同一个CSS样式表中,使用 !important 来定义不同的值以适应Firefox和IE。

    例如:

    padding: 20px !important; /For Firefox/

    padding: 10px; /For IE/

    (注意这里IE6是无法识别,important 这个标记的,但它会识别padding: 20px,所以要在后面加上padding: 10px用来覆盖padding: 20px)这个方法适用于修改少量代码。

    2、条件注释。(只对IE浏览器有效)这也是北极冰仔部落格目前使用的方法。先为不同浏览器书写各自的CSS样式,再在head中加入以下的代码以适应不同的IE浏览器版本调用:

    注意:

    gt: greater than (高于)

    lte: less than or equal to (低于或等于)

    另外:IE还支持一个非标准的标签:comment

    This is not Internet Explorer.

    This is Internet Explorer.

    IE会自动把此标签中的内容当作注释处理掉。

    扩展资料

    关于css兼容性问题及一些常见问题

    目前主流浏览器的兼容性做的都比较好了,以下主要针对IE6,7的不兼容问题进行解决。

    1、有浮动存在时,计算一定要精确,不要让内容的宽高超出我们所设置的宽高,IE6下,内容会撑开设置好的高度。

    解决方法:给对应的父级加overflow:hidden;但是会有部分被隐藏掉,最好是精确计算宽高再设定。

    2、在IE6下有元素浮动时,如果宽度需要由内容撑开,就给里边的块元素都加浮动,正常浏览器不用加浮动。

    3、在IE6下元素的高度的小于19px的时候,会被当做19px来处理。

    解决办法:添加overflow:hidden;

    怎么解决浏览器的css样式兼容问题1

    有两种方法:

    1、在同一个CSS样式表中,使用 !important 来定义不同的值以适应Firefox和IE。

    例如:

    padding: 20px !important; /For Firefox/

    padding: 10px; /For IE/

    (注意这里IE6是无法识别,important 这个标记的,但它会识别padding: 20px,所以要在后面加上padding: 10px用来覆盖padding: 20px)这个方法适用于修改少量代码。

    2、条件注释。(只对IE浏览器有效)这也是北极冰仔部落格目前使用的方法。先为不同浏览器书写各自的CSS样式,再在head中加入以下的代码以适应不同的IE浏览器版本调用:

    注意:

    gt: greater than (高于)

    lte: less than or equal to (低于或等于)

    另外:IE还支持一个非标准的标签:comment

    This is not Internet Explorer.

    This is Internet Explorer.

    IE会自动把此标签中的内容当作注释处理掉。

    扩展资料

    关于css兼容性问题及一些常见问题

    目前主流浏览器的兼容性做的都比较好了,以下主要针对IE6,7的不兼容问题进行解决。

    1、有浮动存在时,计算一定要精确,不要让内容的宽高超出我们所设置的宽高,IE6下,内容会撑开设置好的高度。

    解决方法:给对应的父级加overflow:hidden;但是会有部分被隐藏掉,最好是精确计算宽高再设定。

    2、在IE6下有元素浮动时,如果宽度需要由内容撑开,就给里边的块元素都加浮动,正常浏览器不用加浮动。

    3、在IE6下元素的高度的小于19px的时候,会被当做19px来处理。

    解决办法:添加overflow:hidden;

    如何优雅地使用 Sublime Text

    Sublime Text 2和3

    相比于2,Sublime Text 3就秒启动一项,就压倒性地胜利了。因此在之后的叙述中都以Sublime Text 3为主角。并且3一直在不断的完善更新,具体的差异可参看Sublime Blog.简单的说:

    ST3支持在项目目录里面寻找变量

    提供了对标签页更好地支持(更多的命令和快捷键)

    加快了程序运行的速度

    更新了API,使用Python3.3

    强烈推荐朋友们使用3! 唯快不破,不解释。

    优雅使用Sublime Text,插件则是不可缺少的存在;而插件的备份就显得非常的重要(譬如:各平台同步;更换系统/电脑,迅速使用已安装的插件)。这事儿也很简单,只需将Packages(Preferences > Browse Packages)中内容拷贝一份,同步云端即可;至于存储何处,云盘,Github,皆无不可;譬如先前有存一份于 sublime_packages,每有所需只要 Down 下来,替换掉原 Packages 下内容就好。

    Sublime Text 3安装插件


    Sublime Text的强大就是她拥有强大的课可扩展性。您可根据自己的需要安装不同的插件;这使得她变的无比强大的同时又不失轻便。

    插件安装方式一:直接安装:

    安装Sublime text 3插件很方便,可以直接下载安装包解压缩到Packages目录(菜单->preferences->packages)。

    插件安装方式二:使用Package Control组件安装:

    按Ctrl+`调出console(注:安装有QQ输入法的这个快捷键会有冲突的,输入法属性设置-输入法管理-取消热键切换至QQ拼音)粘贴以下代码到底部命令行并回车:

    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 3。如果在Perferences->package settings中看到package control这一项,则安装成功。按下Ctrl+Shift+P调出命令面板输入install 调出 Install Package 选项并回车,然后在列表中选中要安装的插件。

    PS:国内使用SublimeText3,经常可能遇到无法安装可用插件问题,可remove掉Package Control重新安装下;如遇到连Package Control也无法安装,则可以在别处拷贝一份关于Package Control的文件-(Package Control.sublime-package)存放于Installed Packages目录之下即可。

    Sublime Text 3插件推荐


    无插件,不神器!根据自己的需要定制属于自己的强大插件集;作为在移动端旧游之后,又Web端新游的自己,墙裂推荐以下这么几款插件:

    MarkDown Editing
    SublimeText不仅仅是能够查看和编辑 Markdown 文件,但它会视它们为格式很糟糕的纯文本。这个插件通过适当的颜色高亮和其它功能来更好地完成这些任务。关于如何在SublimeText下高效些东西可参见文章:sublime text 2(3)下的Markdown写作 抑或是前段时间写下的追寻高效工作的一路折腾二

    SideBarFolders
    打开的文件夹都太多了? 来用这个来管理文件夹,世界原来也可以这么美好。

    SideBarFolders


    Sublime Terminal
    这个插件可以让你在Sublime中直接使用终端打开你的项目文件夹,并支持使用快捷键。

    ColorPicker
    通常,如果你想使用一个颜色选择器则可能打开 Photoshop 或 GIMP。而在 Sublime Text 中,你可以使用内置的颜色选择器。安装完成后,只要按下Ctrl / Cmd + Shift + C 快捷键。

    SublimeREPL
    这可能是对程序员很有用的插件。SublimeREPL 允许你在 Sublime Text 中运行各种语言(NodeJS , Python,Ruby, Scala 和 Haskell 等等)。

    Ctags插件
    有童鞋抱怨Sublime Text不能支持函数的跳转(比如像Eclipse那样,按住Control点击该方法或者对象,即可跳转到定义的地方; Alt+←即可回到原处)。其实Sublime Text也可以借助插件实现之(当然,有些情况下:Can not find defination)毕竟这个也是借助正则来匹配完成的。因此这个也就要求代码很规范。这个插件相对来讲会有些麻烦,具体的可以参见:Sublime Text ctags 的配置.

    SublimeLinter插件
    SublimeLinter 是前端编码利器——Sublime Text 的一款插件,用于高亮提示用户编写的代码中存在的不规范和错误的写法,支持 JavaScript、CSS、HTML、Java、PHP、Python、Ruby 等十多种开发语言。这篇文章介绍如何在 Windows 中配置 SublimeLinter 进行 JS & CSS 校验。
    比如写例如像lua这样的弱语言脚本代码,有这个可以规避掉很多不该有的低级错误吧?当然这也需要你SublimeLinter安装完毕之后再安装一个SublimeLinter-lua即可。具体的使用可以参见:借助 SublimeLinter 编写高质量的 JavaScript & CSS 代码

    SideBarEnhancements插件
    SideBarEnhancements是一款很实用的右键菜单增强插件;在安装该插件前,在Sublime Text左侧FOLDERS栏中点击右键,只有寥寥几个简单的功能;安装了就相当于给其丰了*一般。
    更强大的是,该插件还能让我们自定义快捷键呼出某个浏览器以预览页面!这样就不用到项目目录下寻找和拖动到特定浏览器中预览了。
    安装此插件后,点击菜单栏的preferences->package setting->side bar->Key Building-User,键入以下代码:

    [
    { "keys": ["ctrl+shift+c"], "command": "copy_path" },
    //chrome
    { "keys": ["f2"], "command": "side_bar_files_open_with",
    "args": {
    "paths": [],
    "application": "C:UsersjeffjAppDataLocalGoogleChromeApplicationchrome.exe",
    "extensions":".*"
    }
    }
    ]

    这里设置按Ctrl+Shift+C复制文件路径,按F2即可在Chrome浏览器预览效果(如果需要的话,也可以根据自己的需要为Firefox,Safari,IE,Opera等加上),当然你也可以自己定义喜欢的快捷键,最后注意代码中的浏览器路径要以自己电脑里的文件路径为准。

    HTML-CSS-JS Prettify
    一款集成了格式化(美化)html、css、js三种文件类型的插件,即便html,js写在PHP文件之内。插件依赖于nodejs,因此需要事先安装nodejs,然后才可以正常运行。插件安装完成后,快捷键ctrl+shift+H完成当前文件的美化操作。插件对html、css文件的美化不是非常满意,但还可以,后面将说明如何修改css美化脚本。本人用起来超级爽的,鉴于篇幅,就不赘述,可以参见这篇介绍。

    CSScomb CSS属性排序:
    有时候看看自己写的CSS文件,会不会觉得属性很乱查找不易维护难?CSScomb可以按照一定的CSS属性排序规则,将杂乱无章的CSS属性进行重新排序。选中要排序的CSS代码,按Ctrl+Shift+C,即可对CSS属性重新排序了,代码从此简洁有序易维护,如果不款选代码则插件将排序文件中所有的CSS属性。当然,可以自己自定义CSS属性排序规则,打开插件目录里的CSScomb.sublime-settings文件,更改里面的CSS属性顺序就行了。因为这个插件使用PHP写的,要使他工作需要在环境变量中添加PHP的路径,具体请看github上的说明。

    SublimeTmpl 快速生成文件模板
    一直都很奇怪为什么sublime text 3没有新建文件模板的功能,像html头部的DTD声明每次都要复制粘贴。用SublimeTmpl这款插件终于可以解脱了,SublimeTmpl能新建html、css、javascript、php、python、ruby六种类型的文件模板,所有的文件模板都在插件目录的templates文件夹里,可以自定义编辑文件模板。
    SublimeTmpl默认的快捷键:

    ctrl+alt+h html
    ctrl+alt+j javascript
    ctrl+alt+c css
    ctrl+alt+p php
    ctrl+alt+r ruby
    ctrl+alt+shift+p python

    如果想要新建其他类型的文件模板的话,先自定义文件模板方在templates文件夹里,再分别打开Default (Windows).sublime-keymap、Default.sublime-commands、Main.sublime-menu、SublimeTmpl.sublime-settings这四个文件照着里面的格式自定义想要新建的类型,这里就详细介绍了,请各位自己折腾哈~

    Javascript-API-Completions:
    支持Javascript、JQuery、Twitter Bootstrap框架、HTML5标签属性提示的插件,是少数支持sublime text 3的后缀提示的插件,HTML5标签提示sublime text3自带,不过JQuery提示还是很有用处的,也可设置要提示的语言。

    sublime-jq-plugin

    SFTP:快速编辑远程服务器文件
    在Win下用Xftp 和 WinScp,被这种需要切换点击or F5刷新的手动操作蛋疼到无语;故此一遇见这SFTP,顿觉这世界都美好了许多。当然Sublime下面也有些其他同步插件,比如FtpSnyc,但是配置起来的错误提示一点都不人性化,就毫不留情的舍弃了。Sublime下有SFTP,只要Ctrl+S即可同步本地到服务器,妥妥的爽歪歪有么有?如何配置,请参见在 Sublime Text中使用 SFTP 插件快速编辑远程服务器文件;如欲使用FtpSync可参见Sublime使用及FtpSync远程同步;大道至简,因简而悦;开心垒码,值得折腾。

    WakaTime -- 记录你的Code时间;
    WakaTime可以做到精确地统计到你花在某个项目上的时间;WakaTime针对不同的IDE,拥有不同的插件,在Sublime上安装着插件,就能统计到我使用Sublime进行的所有项目的行为。可以高效管理和知晓自己code时间;并且,统计完善, 适合发朋友圈装*(如果你喜欢的话)~

    Waka的基本设计和rescuetime类似。每个人注册完将获取一个key,装一个客户端,把key输进去(登陆是同一个道理),然后它就把本地的所有行为带个key扔给服务器来统计,一段时间之后给你个报表。不过Waka做的真的很精准,精确到每一个文件用了多少秒,每一种语言用了多少时间。


    安装和使用都很简单,请参见这里。另外一篇比较详细的文章时间都去哪了?用RescueTime和WakaTime来记录你的时间,对RescueTime和WakaTime有一个更为详细的叙述,可以一读。

    DocBlockr: 代码块注释
    可以快速的对函数进行注释。保持代码规范。支持多种语言,有 JavaScript (including ES6), PHP, ActionScript, Haxe, CoffeeScript, TypeScript, Java, Apex, Groovy, Objective C, C, C++ and Rust.

    /*:回车创建一个代码块注释

    /**:回车在自动查找函数中的形参等等。

    它会生成 JSDoc 格式的注释。如果你从没有使用过类似的工具,DocBlockr 会让你觉得以前没有它是如何写代码的。帮助你创造你的代码注释,通过解析功能,参数,变量,并且自动添加基本项目;如果你愿意其更为便捷,不妨再结合AutoHotKey,高效注释,由此开启。

    sublime-text-git: Git 版本控制
    可视化的操作:帮助你与你的Git repo协议进行交互。它支持很多命令像init,push, pull, branch, stash,等等。使用它当然提前需要安装 Git,并做好响应的配置;对于这个插件,不妨看下这篇文章 Using Git Inside of Sublime Text to Improve Workflow,相信她的伴随不会让你失望的。

    advancedNewFile: 快速创建文件
    当我们在 Sublime Text 编辑器里我们可以通过快捷键command+n(win: ctrl+n),来新建一个文件,然后command+s(Win:ctrl+s)进行弹出保存框,填写文件名进行保存。还是老问题,麻烦!!我们接下来就通过安装advancedNewFile插件来提升我们在Sublime Text编辑器下的创建文件速度。

    关乎其使用,安装完成之后,运用快捷键command+alt+n(win: ctrl+alt+n)
    ,Sublime Text底部会弹出输入框;我们只需在这个输入框里输入我们需要新建的文件名回车即可(我们甚至可以带路径,譬如:src/components/perfect.vue;这就会在当前项目目录下,建立该文件;需要注意的是这路径前面不可加 '/', 这会使得建立的路径成为用户目录,而非改项目目录)。默认情况下文件会存储在当前目录,如果当前没有目录,会存储在用户的家目录。

    剩下些许其他的可以按需安装的插件,比如:

    ConvertToUTF8  支持 GBK, BIG5, EUC-KR, EUC-JP, Shift_JIS 等编码的插件

    Bracket Highlighter 用于匹配括号,引号和html标签。对于很长的代码很有用。安装好之后,不需要设置插件会自动生效

    DocBlockr 可以自动生成PHPDoc风格的注释。它支持的语言有Javascript, PHP, ActionScript, CoffeeScript, Java, Objective C, C, C++

    <font color="purple">Emmet(Zen Coding)</font>快速生成HTML代码段的插件,强大到无与伦比:可以超快速编写HTML/CSS/JS,当然这个插件还支持多种编译环境,如常见的:Eclipse/Aptana、Coda、Notepad++、Adobe Dreamweaver、TextMate等,web开发必备!!!。

    jsFormat 格式化js代码,懂者自懂;强迫症Coder必备!默认快捷键Ctrl+Alt+F。

    phpFormat 格式化php代码,懂者自懂;强迫症Coder必备!

    CSS Compact Expand CSS属性展开收缩:写CSS的盆友,喜欢将其写多行还是一行(个人喜欢将其格式化为多行)?如果阅读别人的代码不符合自己的习惯,可以用CSS Compact Expand这个插件将CSS格式化一下,按 Ctrl+Alt+[ 收缩CSS代码为一行显示,按 Ctrl+Alt+] 展开CSS代码为多行显示;强迫症Coder必备!。

    Autoprefixer插件:这是一款CSS3私有前缀自动补全插件;该插件使用CanIUse资料库(当然,SublimeText自然也有<font color="purple">CanIUse</font>这个插件咯),能精准判断哪些属性需要什么前缀,与CssComb插件一样,该插件也需要系统已安装Node.js环境;使用方法:在输入CSS3属性后(冒号前)按Tab键即可。

    YUI Compressor:压缩JS和CSS文件,按F7键后,若压缩当前文件(demo.js),则压缩后的文件(demo.min.js)保存在该文件的同级目录,需要安装java的JDK。使用方法:YUI Compressor

    ClickableURLs:可点击的URL
    使用小插件ClickableURLs可以让文件中的URL能够点击。

    Vue Syntax Highlight: Vue(*.vue)高亮插件;于前端而言,使用Vue框架开发,是一个很酷爽的存在,那么此插件也就很有必要拥有;同时Jade, SASS等插件也是很有拥有的必要,谁用谁知道(说到用vue, 这vue-cli就蛮有使用的必要了( Webpack, Eslint, Test等都配置完善,十分贴心); 而写Js代码,于稍大项目 Eslint 就很有使用必要,而 sublime 在针对使用 Eslint 的 *.vue文件,目测还没有很好格式化插件,坐等诞生😳)。

    终极王道:自己编写专用的Sublime Text插件。虽然说各个方面比如移动端,Web前段,服务器端,非Coder的Writer所需要的方便已经被集成在了不同的插件中。但譬如,需要快捷打开PC端的某个模拟器,便捷的进行某些校验,只要你想的到的基本都可以将其在插件内,以快捷键处理之。至于如何编写SublimeText插件,请参看这里编写自己的Sublime Text2 插件

    定制属于自己的快捷键

    首先要会使用SublimeText内置的快捷键:
    比如 Commond Shift P 打开命令面板:例如打开Package Control安装各种插件;可以可以输入Set(Snytax)来改变使用的语言环境,瞬间切换等等。

    设置快捷键。在SublimeText里,打开Preferences -> Key Bindings - User,我设置的快捷键:

    [
    { "keys": ["ctrl+f9"], "command": "build" },
    { "keys": ["f10"], "command": "build", "args": {"variant": "Run"} },
    { "keys": ["ctrl+shift+x"], "command": "toggle_comment", "args": { "block": true } },
    ]

    如何优雅地使用 Sublime Text

    Sublime Text 2和3

    相比于2,Sublime Text 3就秒启动一项,就压倒性地胜利了。因此在之后的叙述中都以Sublime Text 3为主角。并且3一直在不断的完善更新,具体的差异可参看Sublime Blog.简单的说:

    ST3支持在项目目录里面寻找变量

    提供了对标签页更好地支持(更多的命令和快捷键)

    加快了程序运行的速度

    更新了API,使用Python3.3

    强烈推荐朋友们使用3! 唯快不破,不解释。

    优雅使用Sublime Text,插件则是不可缺少的存在;而插件的备份就显得非常的重要(譬如:各平台同步;更换系统/电脑,迅速使用已安装的插件)。这事儿也很简单,只需将Packages(Preferences > Browse Packages)中内容拷贝一份,同步云端即可;至于存储何处,云盘,Github,皆无不可;譬如先前有存一份于 sublime_packages,每有所需只要 Down 下来,替换掉原 Packages 下内容就好。

    Sublime Text 3安装插件


    Sublime Text的强大就是她拥有强大的课可扩展性。您可根据自己的需要安装不同的插件;这使得她变的无比强大的同时又不失轻便。

    插件安装方式一:直接安装:

    安装Sublime text 3插件很方便,可以直接下载安装包解压缩到Packages目录(菜单->preferences->packages)。

    插件安装方式二:使用Package Control组件安装:

    按Ctrl+`调出console(注:安装有QQ输入法的这个快捷键会有冲突的,输入法属性设置-输入法管理-取消热键切换至QQ拼音)粘贴以下代码到底部命令行并回车:

    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 3。如果在Perferences->package settings中看到package control这一项,则安装成功。按下Ctrl+Shift+P调出命令面板输入install 调出 Install Package 选项并回车,然后在列表中选中要安装的插件。

    PS:国内使用SublimeText3,经常可能遇到无法安装可用插件问题,可remove掉Package Control重新安装下;如遇到连Package Control也无法安装,则可以在别处拷贝一份关于Package Control的文件-(Package Control.sublime-package)存放于Installed Packages目录之下即可。

    Sublime Text 3插件推荐


    无插件,不神器!根据自己的需要定制属于自己的强大插件集;作为在移动端旧游之后,又Web端新游的自己,墙裂推荐以下这么几款插件:

    MarkDown Editing
    SublimeText不仅仅是能够查看和编辑 Markdown 文件,但它会视它们为格式很糟糕的纯文本。这个插件通过适当的颜色高亮和其它功能来更好地完成这些任务。关于如何在SublimeText下高效些东西可参见文章:sublime text 2(3)下的Markdown写作 抑或是前段时间写下的追寻高效工作的一路折腾二

    SideBarFolders
    打开的文件夹都太多了? 来用这个来管理文件夹,世界原来也可以这么美好。

    SideBarFolders


    Sublime Terminal
    这个插件可以让你在Sublime中直接使用终端打开你的项目文件夹,并支持使用快捷键。

    ColorPicker
    通常,如果你想使用一个颜色选择器则可能打开 Photoshop 或 GIMP。而在 Sublime Text 中,你可以使用内置的颜色选择器。安装完成后,只要按下Ctrl / Cmd + Shift + C 快捷键。

    SublimeREPL
    这可能是对程序员很有用的插件。SublimeREPL 允许你在 Sublime Text 中运行各种语言(NodeJS , Python,Ruby, Scala 和 Haskell 等等)。

    Ctags插件
    有童鞋抱怨Sublime Text不能支持函数的跳转(比如像Eclipse那样,按住Control点击该方法或者对象,即可跳转到定义的地方; Alt+←即可回到原处)。其实Sublime Text也可以借助插件实现之(当然,有些情况下:Can not find defination)毕竟这个也是借助正则来匹配完成的。因此这个也就要求代码很规范。这个插件相对来讲会有些麻烦,具体的可以参见:Sublime Text ctags 的配置.

    SublimeLinter插件
    SublimeLinter 是前端编码利器——Sublime Text 的一款插件,用于高亮提示用户编写的代码中存在的不规范和错误的写法,支持 JavaScript、CSS、HTML、Java、PHP、Python、Ruby 等十多种开发语言。这篇文章介绍如何在 Windows 中配置 SublimeLinter 进行 JS & CSS 校验。
    比如写例如像lua这样的弱语言脚本代码,有这个可以规避掉很多不该有的低级错误吧?当然这也需要你SublimeLinter安装完毕之后再安装一个SublimeLinter-lua即可。具体的使用可以参见:借助 SublimeLinter 编写高质量的 JavaScript & CSS 代码

    SideBarEnhancements插件
    SideBarEnhancements是一款很实用的右键菜单增强插件;在安装该插件前,在Sublime Text左侧FOLDERS栏中点击右键,只有寥寥几个简单的功能;安装了就相当于给其丰了*一般。
    更强大的是,该插件还能让我们自定义快捷键呼出某个浏览器以预览页面!这样就不用到项目目录下寻找和拖动到特定浏览器中预览了。
    安装此插件后,点击菜单栏的preferences->package setting->side bar->Key Building-User,键入以下代码:

    [
    { "keys": ["ctrl+shift+c"], "command": "copy_path" },
    //chrome
    { "keys": ["f2"], "command": "side_bar_files_open_with",
    "args": {
    "paths": [],
    "application": "C:UsersjeffjAppDataLocalGoogleChromeApplicationchrome.exe",
    "extensions":".*"
    }
    }
    ]

    这里设置按Ctrl+Shift+C复制文件路径,按F2即可在Chrome浏览器预览效果(如果需要的话,也可以根据自己的需要为Firefox,Safari,IE,Opera等加上),当然你也可以自己定义喜欢的快捷键,最后注意代码中的浏览器路径要以自己电脑里的文件路径为准。

    HTML-CSS-JS Prettify
    一款集成了格式化(美化)html、css、js三种文件类型的插件,即便html,js写在PHP文件之内。插件依赖于nodejs,因此需要事先安装nodejs,然后才可以正常运行。插件安装完成后,快捷键ctrl+shift+H完成当前文件的美化操作。插件对html、css文件的美化不是非常满意,但还可以,后面将说明如何修改css美化脚本。本人用起来超级爽的,鉴于篇幅,就不赘述,可以参见这篇介绍。

    CSScomb CSS属性排序:
    有时候看看自己写的CSS文件,会不会觉得属性很乱查找不易维护难?CSScomb可以按照一定的CSS属性排序规则,将杂乱无章的CSS属性进行重新排序。选中要排序的CSS代码,按Ctrl+Shift+C,即可对CSS属性重新排序了,代码从此简洁有序易维护,如果不款选代码则插件将排序文件中所有的CSS属性。当然,可以自己自定义CSS属性排序规则,打开插件目录里的CSScomb.sublime-settings文件,更改里面的CSS属性顺序就行了。因为这个插件使用PHP写的,要使他工作需要在环境变量中添加PHP的路径,具体请看github上的说明。

    SublimeTmpl 快速生成文件模板
    一直都很奇怪为什么sublime text 3没有新建文件模板的功能,像html头部的DTD声明每次都要复制粘贴。用SublimeTmpl这款插件终于可以解脱了,SublimeTmpl能新建html、css、javascript、php、python、ruby六种类型的文件模板,所有的文件模板都在插件目录的templates文件夹里,可以自定义编辑文件模板。
    SublimeTmpl默认的快捷键:

    ctrl+alt+h html
    ctrl+alt+j javascript
    ctrl+alt+c css
    ctrl+alt+p php
    ctrl+alt+r ruby
    ctrl+alt+shift+p python

    如果想要新建其他类型的文件模板的话,先自定义文件模板方在templates文件夹里,再分别打开Default (Windows).sublime-keymap、Default.sublime-commands、Main.sublime-menu、SublimeTmpl.sublime-settings这四个文件照着里面的格式自定义想要新建的类型,这里就详细介绍了,请各位自己折腾哈~

    Javascript-API-Completions:
    支持Javascript、JQuery、Twitter Bootstrap框架、HTML5标签属性提示的插件,是少数支持sublime text 3的后缀提示的插件,HTML5标签提示sublime text3自带,不过JQuery提示还是很有用处的,也可设置要提示的语言。

    sublime-jq-plugin

    SFTP:快速编辑远程服务器文件
    在Win下用Xftp 和 WinScp,被这种需要切换点击or F5刷新的手动操作蛋疼到无语;故此一遇见这SFTP,顿觉这世界都美好了许多。当然Sublime下面也有些其他同步插件,比如FtpSnyc,但是配置起来的错误提示一点都不人性化,就毫不留情的舍弃了。Sublime下有SFTP,只要Ctrl+S即可同步本地到服务器,妥妥的爽歪歪有么有?如何配置,请参见在 Sublime Text中使用 SFTP 插件快速编辑远程服务器文件;如欲使用FtpSync可参见Sublime使用及FtpSync远程同步;大道至简,因简而悦;开心垒码,值得折腾。

    WakaTime -- 记录你的Code时间;
    WakaTime可以做到精确地统计到你花在某个项目上的时间;WakaTime针对不同的IDE,拥有不同的插件,在Sublime上安装着插件,就能统计到我使用Sublime进行的所有项目的行为。可以高效管理和知晓自己code时间;并且,统计完善, 适合发朋友圈装*(如果你喜欢的话)~

    Waka的基本设计和rescuetime类似。每个人注册完将获取一个key,装一个客户端,把key输进去(登陆是同一个道理),然后它就把本地的所有行为带个key扔给服务器来统计,一段时间之后给你个报表。不过Waka做的真的很精准,精确到每一个文件用了多少秒,每一种语言用了多少时间。


    安装和使用都很简单,请参见这里。另外一篇比较详细的文章时间都去哪了?用RescueTime和WakaTime来记录你的时间,对RescueTime和WakaTime有一个更为详细的叙述,可以一读。

    DocBlockr: 代码块注释
    可以快速的对函数进行注释。保持代码规范。支持多种语言,有 JavaScript (including ES6), PHP, ActionScript, Haxe, CoffeeScript, TypeScript, Java, Apex, Groovy, Objective C, C, C++ and Rust.

    /*:回车创建一个代码块注释

    /**:回车在自动查找函数中的形参等等。

    它会生成 JSDoc 格式的注释。如果你从没有使用过类似的工具,DocBlockr 会让你觉得以前没有它是如何写代码的。帮助你创造你的代码注释,通过解析功能,参数,变量,并且自动添加基本项目;如果你愿意其更为便捷,不妨再结合AutoHotKey,高效注释,由此开启。

    sublime-text-git: Git 版本控制
    可视化的操作:帮助你与你的Git repo协议进行交互。它支持很多命令像init,push, pull, branch, stash,等等。使用它当然提前需要安装 Git,并做好响应的配置;对于这个插件,不妨看下这篇文章 Using Git Inside of Sublime Text to Improve Workflow,相信她的伴随不会让你失望的。

    advancedNewFile: 快速创建文件
    当我们在 Sublime Text 编辑器里我们可以通过快捷键command+n(win: ctrl+n),来新建一个文件,然后command+s(Win:ctrl+s)进行弹出保存框,填写文件名进行保存。还是老问题,麻烦!!我们接下来就通过安装advancedNewFile插件来提升我们在Sublime Text编辑器下的创建文件速度。

    关乎其使用,安装完成之后,运用快捷键command+alt+n(win: ctrl+alt+n)
    ,Sublime Text底部会弹出输入框;我们只需在这个输入框里输入我们需要新建的文件名回车即可(我们甚至可以带路径,譬如:src/components/perfect.vue;这就会在当前项目目录下,建立该文件;需要注意的是这路径前面不可加 '/', 这会使得建立的路径成为用户目录,而非改项目目录)。默认情况下文件会存储在当前目录,如果当前没有目录,会存储在用户的家目录。

    剩下些许其他的可以按需安装的插件,比如:

    ConvertToUTF8  支持 GBK, BIG5, EUC-KR, EUC-JP, Shift_JIS 等编码的插件

    Bracket Highlighter 用于匹配括号,引号和html标签。对于很长的代码很有用。安装好之后,不需要设置插件会自动生效

    DocBlockr 可以自动生成PHPDoc风格的注释。它支持的语言有Javascript, PHP, ActionScript, CoffeeScript, Java, Objective C, C, C++

    <font color="purple">Emmet(Zen Coding)</font>快速生成HTML代码段的插件,强大到无与伦比:可以超快速编写HTML/CSS/JS,当然这个插件还支持多种编译环境,如常见的:Eclipse/Aptana、Coda、Notepad++、Adobe Dreamweaver、TextMate等,web开发必备!!!。

    jsFormat 格式化js代码,懂者自懂;强迫症Coder必备!默认快捷键Ctrl+Alt+F。

    phpFormat 格式化php代码,懂者自懂;强迫症Coder必备!

    CSS Compact Expand CSS属性展开收缩:写CSS的盆友,喜欢将其写多行还是一行(个人喜欢将其格式化为多行)?如果阅读别人的代码不符合自己的习惯,可以用CSS Compact Expand这个插件将CSS格式化一下,按 Ctrl+Alt+[ 收缩CSS代码为一行显示,按 Ctrl+Alt+] 展开CSS代码为多行显示;强迫症Coder必备!。

    Autoprefixer插件:这是一款CSS3私有前缀自动补全插件;该插件使用CanIUse资料库(当然,SublimeText自然也有<font color="purple">CanIUse</font>这个插件咯),能精准判断哪些属性需要什么前缀,与CssComb插件一样,该插件也需要系统已安装Node.js环境;使用方法:在输入CSS3属性后(冒号前)按Tab键即可。

    YUI Compressor:压缩JS和CSS文件,按F7键后,若压缩当前文件(demo.js),则压缩后的文件(demo.min.js)保存在该文件的同级目录,需要安装java的JDK。使用方法:YUI Compressor

    ClickableURLs:可点击的URL
    使用小插件ClickableURLs可以让文件中的URL能够点击。

    Vue Syntax Highlight: Vue(*.vue)高亮插件;于前端而言,使用Vue框架开发,是一个很酷爽的存在,那么此插件也就很有必要拥有;同时Jade, SASS等插件也是很有拥有的必要,谁用谁知道(说到用vue, 这vue-cli就蛮有使用的必要了( Webpack, Eslint, Test等都配置完善,十分贴心); 而写Js代码,于稍大项目 Eslint 就很有使用必要,而 sublime 在针对使用 Eslint 的 *.vue文件,目测还没有很好格式化插件,坐等诞生😳)。

    终极王道:自己编写专用的Sublime Text插件。虽然说各个方面比如移动端,Web前段,服务器端,非Coder的Writer所需要的方便已经被集成在了不同的插件中。但譬如,需要快捷打开PC端的某个模拟器,便捷的进行某些校验,只要你想的到的基本都可以将其在插件内,以快捷键处理之。至于如何编写SublimeText插件,请参看这里编写自己的Sublime Text2 插件

    定制属于自己的快捷键

    首先要会使用SublimeText内置的快捷键:
    比如 Commond Shift P 打开命令面板:例如打开Package Control安装各种插件;可以可以输入Set(Snytax)来改变使用的语言环境,瞬间切换等等。

    设置快捷键。在SublimeText里,打开Preferences -> Key Bindings - User,我设置的快捷键:

    [
    { "keys": ["ctrl+f9"], "command": "build" },
    { "keys": ["f10"], "command": "build", "args": {"variant": "Run"} },
    { "keys": ["ctrl+shift+x"], "command": "toggle_comment", "args": { "block": true } },
    ]

    环绕娱乐网还为您提供以下相关内容希望对您有帮助:

    如何用atom编辑器开发html

    系统:windows10, 文本编辑:atom,网站服务器:IIS,浏览器:chrome 1,给chrome安装安装LivePage这个插件。&lt;img src="https://pic3.zhimg.com/50/97bc44f556c4be5839f3e5dac2548416_hd.png" data-rawwidth="601"...

    less以及sass两者什么区别

    LESS和Sass的主要不同就是他们的实现方式,LESSS是基于JavaScript,所以,是在客户端处理的。另一方面,Sass是基于Ruby的,然后是在服务器端处理的。很多开发者不会选择LESS因为JavaScript引擎需要额外的时间来处理代码然后输出修改过的CSS到浏览...

    HTML/CSS 手机端中的长度单位rem 可以像px一样直接用吗?需不需要什么声...

    rem一般用于设置字体的大小,1rem就是html根元素的字体大小,2rem就是html字体大小的2倍,1.5rem是html字体的1.5倍,0.75rem则是html字体大小的四分之三,依此类推。因此,rem是一个相对长度单位,当改变html根元素的...

    webstorm | 编译 Less 保存自动生成 wxss/acss/css

    1、配置在当前目录生成.wxss 2、less独立文件夹,生成 .wxss 文件到指定的目录中 和微信步骤一样,只是后缀不同 路径 File | Settings | Tools | File Watchers | + 点加号,选择less, 弹出下面的窗口,已经有默认...

    Sublime在配置CSS编辑辅助工具包时出现错误

    必备的:Alignment,JsFormat,CSSComb,CTags,DocBlockr,Emmet,FileDiffs,SASS,LESS,SASS Build,Lessc,Git,SublimeLinter 另外还有几个不错的,可以选择使用:Terminal,Trimmer,ColorPicker,ConverToUTF8等。五、补充...

    怎么解决浏览器的css样式兼容问题

    1、在同一个CSS样式表中,使用 !important 来定义不同的值以适应Firefox和IE。例如:padding: 20px !important; /For Firefox/ padding: 10px; /For IE/ (注意这里IE6是无法识别,important 这个标记的,但它会识别...

    Top