前端入门行囊

基础工具

Sublime Text 3 - 文本编辑器(推荐)

轻量文本编辑器,支持markdown以及多种代码扩展插件,目前最广泛使用的文本编辑器

Atom - 文本编辑器

Github出品的文本编辑器,基于Sublime Text 基础上开发,综合了各式编辑器特点,开源,更新频繁,插件丰富多彩

Visual Studio Code - 代码编辑器

微软出品的代码编辑器,支持markdown及多种代码语法,功能类似于Sublime Text ,目前更新频繁,插件较为丰富

WebStorm - JavaScript 代码编辑器

老牌著名jetbrains出品的系列编辑器之一,同系列有PhpStorm - php 代码编辑器,支持HTML/CSS ,集成es6等最新的语法标准,支持新框架如Angular JS等,专门对JavaScript进行了优化

插件扩展

本部分以Sublime Text 3为例子作为讲解,如使用Atom/VS code等请对应参照相应的安装插件扩展教程,本部分涉及的插件扩展都有对应的Atom/VS code版本,若无则可以找相近替代

Package Control / 扩展包控制工具

Sublime text 3 安装插件必需前提,为其提供安装管理功能。

  1. 下载安装
    将官网对应Package Control的安装包解压缩到Packages 目录(菜单->preferences->packages

  2. 在线安装
    调出console,键入以下代码之后,重启Sublime Text生效:

     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())
    
  3. 安装插件
    按下Ctrl+Shift+P调出命令面板,输入install 调出 Install Package 选项并回车,然后在列表中选中要安装的插件。

Emmet - 代码快速扩展补完

对按照约定形式的代码缩写进行自动扩展补完,支持HTML/CSS/JavaScript,触发键为TAB
例:

div.wrap>((header>p)+(content>a.link{Item $}*3)+(footer>span))

Emmet扩展:

<div class="wrap">
       <header>
            <p></p>
        </header>
        <content>
            <a href="" class="link">Item 1</a>
            <a href="" class="link">Item 2</a>
            <a href="" class="link">Item 3</a>
        </content>
        <footer><span></span></footer>
</div>

CSS comb - CSS代码属性排序(需要Node.js环境)

按照属性类别对CSS代码进行排序
触发键为Crtl+Shift+C

Js Format - JavaScript代码格式化

按照通用标准格式化JavaScript代码
触发键为Crtl+Alt+F

Autoprefixer - CSS3私有前缀补全

使用CanIUse资料库,对CSS3属性进行自动补全
触发键:Tab

MarkDown Preview - MD语法支持

预览MD语法文件,用于编写MD文档

SublimeEnhancements - 侧栏增强工具

增强Sublime Text中侧栏的功能,支持工程内新建副本/刷新/工程内移动文件等
触发键:侧栏视图中鼠标右键


Clipboard History - 剪切板历史记录

显示剪切板历史记录,方便选择粘贴
触发键:
Ctrl+alt+v:显示历史记录
Ctrl+alt+d:清空历史记录

强迫症特供

  • Alignment - 代码对齐(等号对齐,触发键为Crtl+Alt+A
  • TrailingSpaces - 跟踪空格(高亮多余空格和Tab)


更多插件

根据项目/产品需要以及个人喜好进行插件库的整理,如使用JQuery/LESS/SASS等可搜寻对应的插件扩展使用。

本地开发环境

wamp

未完待续

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 157,298评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,701评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 107,078评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,687评论 0 202
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,018评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,410评论 1 211
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,729评论 2 310
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,412评论 0 194
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,124评论 1 239
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,379评论 2 242
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,903评论 1 257
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,268评论 2 251
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,894评论 3 233
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,014评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,770评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,435评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,312评论 2 260

推荐阅读更多精彩内容