webstorm 中css,在WebStorm中使用CSScomb

在前端开发写CSS时，往往不能很好的把握格式和属性顺序，阅读起来不友好。CSScomb帮助我们解决了这个问题！

CSScomb(CSS梳理)是一个可以用来格式化和排序CSS属性的插件，官网地址http://csscomb.com/。

一、安装CSScomb

要使用CSScomb，需要先安装CSScomb，npm install csscomb -g，参考CSScomb使用方法http://csscomb.com/docs。

二、配置WebStorm

1. File -> Settings ->Tools -> External Tools

2. 点击"+"添加，随后出现Create Tool配置

3. 配置项

Name: CSScomb(可以填写其它容易识别comb插件的名字)

Group: CSSTools(可以填写其它组的名字，将会出现在对文件操作的菜单中)

Description: Makes your code beautiful.(对插件的描述)

Parameters: $FilePath$ -v -t

Working directory: $FileDir$

三、使用

6. 在项目任意位置新建一个 .csscomb.json 文件，然后写入需要的配置，WebStorm会自动读取这个配置。在CSScomb的官网，可视化的生成一个配置http://csscomb.com/config。将生成的配置拷贝到.csscomb.json文件中即可。

7. 在CSS(SCSS,Less)文件上右键菜单找到CSS TOOLS分组，点击CSScomb，就能完成对CSS(SCSS，Less)的属性排序和格式化。

四、举例

以我本地的静态网站为例

在根目录下存放了 .csscomb.json 配置详情如下：

{

"remove-empty-rulesets": true,

"always-semicolon": true,

"color-case": "lower",

"block-indent": " ",

"color-shorthand": true,

"element-case": "lower",

"eof-newline": true,

"leading-zero": false,

"quotes": "double",

"space-before-colon": "",

"space-after-colon": " ",

"space-before-combinator": " ",

"space-after-combinator": " ",

"space-between-declarations": "\n",

"space-before-opening-brace": " ",

"space-after-opening-brace": "\n",

"space-after-selector-delimiter": "\n",

"space-before-selector-delimiter": "",

"space-before-closing-brace": "\n",

"tab-size": true,

"unitless-zero": true,

"vendor-prefix-align": true

}

对 puyu.scss 选择 CSScomb 即可对 puyu.scss 进行格式化。

更改后，通过 TortoiseGit 可以查看到更改了哪些文件：

点击具体的某一项查看更改详情：

可以看到，将添加了厂商前缀的属性进行了格式化，使得值对其排列。

开发常用之在webstorm中使用cmd

而今前端开发经常与cmd打交道,如使用个npm什么的,如果老是在ide和cmd之间切换显得比较繁琐,众多前端利器中我最喜欢的就是webstorm,而webstorm中就可以直接使用cmd,如图1, ...

常见开发需求之前端利器webstorm中的git和快捷键

需求   前端开发中我们最常用的一般是webstorm.hbuilder和sublime,因为以前使用过一段时间eclipse所以我对webstorm的感觉比较良好,再加上以前使用hbuilder维护 ...

Mac OSX 下用 Homebrew 安装 MongoDB 并配置到 WebStorm 中

1. 安装 Ruby OSX 操作系统内置 Ruby,但如果没有 Ruby,则需先输入以下命令安装能够进行多版本ruby环境安装.管理和切换的命令行工具 RVM. 1.1 安装 RVM 打开终端输入以 ...

工程和界面—Webstorm入门指南 Webstorm中的工程-备

1.新建工程 “Quick Start”界面新建工程: 也可以点击顶部菜单栏“File”-> “New Project”. 弹出如下界面: “Location”指向想要创建的工程目录(如果该目录 ...

WebStorm中Node.js项目配置教程(1)——创建项目

Node.js绝对是一个web开发的热点话题,作为web神器的WebStorm也是开发Node.js的佼佼者. 接下来就Node.js项目在WebStorm的配置操作就行详细的讲解,首先是创建项目.两 ...

在WebStorm中集成Karma+jasmine进行前端单元测试

在WebStorm中集成Karma+jasmine进行前端单元测试 前言 好久没有写博了,主要还是太懒=.=,有点时间都去带娃.看书了,今天给大家分享一个原创的小东西,如果大家对TDD或者BDD有兴趣 ...

webstorm中关于vue的一些问题

在进行vue开发中,我使用了webstorm,但是过程坎坷艰辛,遇到了很多问题,我将问题和解决方案贴上,以作参考. 1.vue项目部署在webstorm中,第一个遇到的问题是,webstorm卡住了, ...

webstorm中github的配置

1.申请一个github账号,我这里的操作是已经有了账号的情况之下进行的. 打开webstorm,File-->settings,弹出settings框,输入git,得到以下界面,输入githu ...

[转]webstorm中js文件被识别成txt类型

问题描述: webstorm中index.js文件被识别成txt格式,如下图. 原因: webstorm中js文件被识别成txt文件,原因在于txt类型识别了以当前js文件名命名的模式. 解决办法: ...

随机推荐

[LeetCode] Largest Divisible Subset 最大可整除的子集合

Given a set of distinct positive integers, find the largest subset such that every pair (Si, Sj) of ...

Redis 集群方案

根据一些测试整理出来的一份方案(转自http://www.cnblogs.com/lulu/): 1. Redis 性能 对于redis 的一些简单测试,仅供参考: 测试环境:Redhat6.2 , ...

Repeater嵌套绑定Repeater

前台Html代码

Paper Reviews and Presentations

Copied from Advanced Computer Networks, Johns Hopkins University. Paper Reviews and Presentations Ea ...