前端工程师养成记:开发环境搭建(Sublime Text必备插件推荐)

为了让自己更像一个前端工程师,决定从开发环境开始武装自己。本文将介绍前段工程师开发的一些利器的安装步骤,主要包括了:

1.Node.js的安装

2.Grunt的安装及常用插件

3.Sublime Text的安装及必备插件

一.Node.js的安装

Node.js就是一堆前端工程师捧红的,所以装上这个嘛,主要不是自己需要使用Node.js而是一堆工具对他的依赖。

Windows下安装步骤很简单:

1.去到http://nodejs.org/下载最新的安装包,安装。

2.在CMD下运行,node和npm看看能否运行成功,如果不行就检查下PATH的设置。

二.Grunt的安装

Grunt是目前用的比较多的构建工具,写Java的都知道Maven,这玩意儿就是Javascript界的Maven。里面有各种插件非常实用。

1.在CMD下运行:npm install -g grunt-cli

2.试下能不能在CMD下运行:grunt,可能会报错,没关系因为没有配置文件。

正常的一个项目构建的流程通常是先在代码根目录下面,创建了package.json和Gruntfile.js,之后先运行npm install然后再运行grunt就可以完成项目的构建了。

下面介绍一些前端常用的Grunt插件:

grunt-cli 这个就是命令行

grunt-contrib-clean 这个用于build前的清理工作

grunt-contrib-concat 这个用于拼接文件

grunt-contrib-copy 这个用于拷贝文件

grunt-contrib-cssmin 这个用于压缩css

grunt-contrib-uglify 这个用于压缩js

grunt-contrib-htmlmin 这个用于压缩html

可以看下我的开源项目Tiny-Alert基本上展示了一个最简单的配置。https://coding.net/u/shootyou/p/Tiny-Alert/git

三.Sublime Text的安装及必备插件

没用Sublime之前以为这黑不拉几的玩意儿有啥好玩的,自己用了才知道,这玩意儿真不是用来装逼的,用熟了至少提高前端工程师一倍的效率,敲代码那叫一个快。

1.安装Sublime Text 3: http://www.sublimetext.com/3

2.破解什么的自行补脑

3.安装package control

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,按ctrl+`或者菜单View > Show Console打开命令窗口,粘贴以上代码并回车即可。

然后就开始幸福生活了,Ctrl+Shift+P唤起,这个玩意儿是万能的,你想要啥都在这输入下就行了。输入:Install,选择Install Package,然后输入下面插件的名字搜索就行了。

必备插件:

AutoFileName:自动补全文件名

Emmet:神器啊,花10分钟学学语法,让你提升10倍编码速度:http://blog.wpjam.com/m/emmet-grammar/

Go-To-Css-Declaration:跳转到css的定义处

JsFormat:格式化js代码

Tag:貌似是可以补全和格式化html标签

Themr:主题选择

Autoprefixer:自动添加浏览器兼容前缀

CodeFormatter:代码格式化

ConvertToUTF8:解决中文编码问题

SublimeLinter:代码提示高亮

Terminal:唤起终端控制台

前端工程师养成记:开发环境搭建(Sublime Text必备插件推荐)

时间: 2024-10-25 21:07:22

前端工程师养成记:开发环境搭建(Sublime Text必备插件推荐)的相关文章

前端project师养成记:开发环境搭建(Sublime Text必备插件推荐)

为了让自己更像一个前端project师,决定从开发环境開始武装自己. 本文将介绍前段project师开发的一些利器的安装步骤,主要包含了: 1.Node.js的安装 2.Grunt的安装及经常使用插件 3.Sublime Text的安装及必备插件 一.Node.js的安装 Node.js就是一堆前端project师捧红的,所以装上这个嘛,主要不是自己须要使用Node.js而是一堆工具对他的依赖. Windows下安装步骤非常easy: 1.去到http://nodejs.org/下载最新的安装包

Qt开发环境搭建 - Windows + VS2010 + VS插件

Qt 开发环境搭建 - Windows+VS2010+VS插件 1.Qt在Windows平台下的三种开发环境 方案 编辑器 编译器 调试器 一 Qt Creator MinGW GDB 二 Qt Creator VisualC++ 编译器 Debugging Tools for Windows 三 VS2010自带 VS2010自带 VS2010自带 说明: 1) C/C++语言.Qt库.开发环境.操作系统的关系 2) 编辑器.编译器.调试器三者的关系 2.1) 三者共同组成了开发环境 2.2)

Sublime Text 2插件推荐

必装Package Control 使用Ctrl+`快捷键或者通过View->Show 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.P

慕课网-安卓工程师初养成-1-2 开发环境搭建 未完待续

http://www.imooc.com/video/1459 Java开发环境搭建 第一步:安装JDK 下载: http://www.oracle.com/technetwork/java/javase/downloads/ 针对不同的系统有不同文件,32bit和64bit也有不同文件 未完待续

win平台下搭建cocos2dx 3.1.1 lua开发环境 VS2012+sublime text+lua 5.2.3

安装vs2012 安装python 2.7.3和环境配置 下载cocos2dx 3.1.1 用vs2012打开test项目 右键运行生成解决方案  cocos2dx3.1.1 新建lua项目 cocos2dx 3.1.1引擎目录依次找到tools cocos2d-console bin,  把cocos.py拖到在dos的command(cmd)中 然后继续输入新建项目的信息: new game -p com.test.app  -l lua 我们这就可以在屏幕中提示的路径找到新建的项目game

windows下golang开发环境搭建(sublime text3 + gosublime + sublimeGDB)

最近开始学习go语言的相关开发教程,之前的工作都是在linux上完成居多,但是家里的电脑还是windows的系统. 在搜索了N多方案以及尝试了N多IDE后,决定还是使用sublime+gosublime插件 这一套东西作为家用学习的跑demo方案. 在此需要感谢go社区以及一众之前已经存在的搭建方法和文档,本页以记录一下自己的搭建过程为主o(∩_∩)o 哈哈 1. 安装go语言 官网地址:https://golang.org/  点击下载需要的平台的安装版本,推荐msi,下载完成之后,点击安装,

Ubuntu 配置 Go 语言开发环境(Sublime Text+GoSublime)

本文针对的 Go 语言版本为 1.3,之前也有相关文章讲解如何在 Ubuntu 下配置Go语言的开发环境,但时过境迁,一些方法已经不相同或者不必要.虽讲的是 Ubuntu 下安装配置过程,但 Windows 系统不仅下载更方便,配置环境部分大同小异,其中 64 位系统的 GCC 编译器可到 http://tdm-gcc.tdragon.net/ 下载. 第一步:安装Go语言相关工具请在终端输入以下指令(如果发现下载速度一般,建议每个分开安装,否则一个安装失败将导致未安装的全部失败): ? 1 s

Sublime Text 3下C/C++开发环境搭建

Sublime Text 3下C/C++开发环境搭建 之前在Linux Mint 17一周使用体验中简单介绍过Sublime Text. 1.Sublime Text 3安装 Ubuntu.Linux Mint的软件管理器中已经能够找到Sublime Text 3,直接安装即可.或者去官网下载.deb或tarball安装包,手动安装. 2.Package Control管理器 ST最吸引我的第一点就是这个非常棒的扩展管理器!安装方法也很简单,在ST中按Ctrl+`进入ST的控制台,然后去官网上将

在windows环境下基于sublime text3的node.js开发环境搭建

首先安装sublime text3,百度一堆,自己找吧.理论上sublime text2应该也可以.我只能说一句:这个软件实在是太强悍了. 跨平台,丰富的插件体系,加上插件基本上就是一个强悍的ide了.目前我在使用的主要是Emmet.Python.还有一些格式化的插件(xml,json),加上这次安装的node.js. node.js的安装就不用多说了,直接http://nodejs.org/ 点击install下载window版本的安装程序后安装即可.默认的安装会将安装目录加到path环境变量