Sublime Text的使用-推荐的包/插件

回到目录:Sublime Text的使用

DocBlockr

一个便捷的文档构建工具,能方便的给js文档本身,js函数/方法 进行详细的文档描述

触发的方式很简单,输入 /** 然后Enter,就会自动出一个格式化的模板,修改完一个,打Tab键,就可以自动去修改下一个

Emmet

这个是zen coding的后续升级维护版,进行HTML开发是必不可少的一大利器,通过简单的css选择器语法,能快速的构建出需要的HTML代码。当然还有很多别的很方便的使用方法,具体可以查看官方文档

HTML-CSS-JS Prettify

这是前端团队风格统一化比较方面的一个插件,能快速的针对html, css和js文件进行格式化

LESS

这个是less文件语法高亮的一个插件,对前端同学来说也是很有必要性的一个工具

Markdown Preview

这个是对写完的markdown文件,进行预览的一种工具,提供两个主题的预览或者保存。

Control+Shift+P的命令界面中输入markdown(前提是已经安装了该插件),就能看到相关的命令

markdown命令

其中preview in browser就是在浏览器中预览,save to html就是在当前md所在文件夹,以同样的文件名,保存一个生成的和预览效果一致的html文件

JSONLint

这个是一个JSON的语法检测工具,能在当前打开的json文件中标示出语法错误的地方

JSONLint

这个对平时我们用json写一些接口假数据的时候,比较方便

// and more …

用package.json来管理NPM里面的依赖包

介绍了一些最近新近知道的使用npm的技巧

很久之前

开发前端项目(基于grunt),每新建一个项目,总是先用npm init来初始化一个package.json,然后就是一遍又一遍的


  npm install grunt-contrib-less --save-dev
  npm install grunt-contrib-concat --save-dev
  npm install grunt-contrib-requirejs --save-dev
  npm install grunt-contrib-uglify --save-dev

在进行版本控制的时候,以git为例,为了让项目组成员能拥有正确的开发环境,得git add node_modules,把里面所有的包都加入版本控制。一提交就是一大tuo,要是添加新的包,或者更新包,其他成员更新的时候,也是一堆。

新的能力 Get!

如果你有个新的项目,还没有下载过任何的npm包,而需要的npm包跟前一个项目差不多。那么,你可以把这个项目里面的package.json拷贝到当前项目根目录。然后npm install,所有的依赖包就会自动的下载完毕了!

现在

一个好的开发项目流程可以是这样:有一份好的前端项目开发模版,里面的目录可能是这样


src/
    css/
    js/
    img/
    less/

dist/
    css/
    js/
    img/
    less/

index.html
index-dev.html

doc/
    xxx.psd

package.json
Gruntfile.js
.gitignore

package.json里面有基本的包依赖

{
  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-jshint": "~0.6.0",
    "grunt-contrib-nodeunit": "~0.2.0",
    "grunt-contrib-uglify": "~0.2.2"
  }
}

.gitignore里面添加了node_modules/

每次新建项目就可以拷贝这份模版,然后初始化,加入版本库,提交。项目其他成功,更新到本地之后,同样的初始化就可以了