KonishiLee's Blog

前端开发者Mac配置(二)

写在最前

介绍完了开发环境的搭建,这一篇介绍一款钟爱的编辑器(主要是喜欢独特的思想)、

Sublime Text 3

Sublime Text 是一款跨平台代码编辑器(Not IDE),拥有非常丰富成熟的插件,辅以大量的快捷键,足使开发效率成倍提升。

另外,GitHub 在去年开源了一款叫 Atom 的代码编辑器,基本和 Sublime Text 无异。不过是基于 Node.js 和 Chromium,这个会在下一篇进行介绍。

目前我主要使用的是 Sublime Text 3,当然使用过 Atom,不过使用期间比较卡顿,所以遗弃了一段时间(相信现在已经很好用了吧)…

安装

目前最新版本为 Sublime Text 3,在官方网站提供了各个平台的下载。推荐使用此版本,有部分插件只支持 Sublime Text 3。

Package Control

安装好 Sublime 之后,通过安装 Package Control 来管理其大量的插件。

  • 打开 Sublime Text 3 然后 `Ctrl + `` 打开控制台
  • 粘贴下面的代码到控制台,然后回车
1
import urllib.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)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

待 Package Control 安装完成之后,用 cmd + shift + p 打开命令面板输入 PC 即可看到和 Package Control 相关的选项。紧接着就可以安装(管理)各种插件了。

配置

Sublime Text 并不提供专门的配置界面,而是通过 JSON 文件来放置各种配置信息。而每种配置信息都分为 DefaultUser 两个版本,即 Default 为默认配置,因此不建议直接修改 Default 配置文件,而是在 User 文件中放置自己的个性化配置。

推荐一个常用的配置:

1
2
3
4
5
6
7
8
9
10
11
{
"font_size": 14,
"font_face": "Monaco",
"theme": "Spacegray.sublime-theme",
"color_scheme": "Packages/User/SublimeLinter/base16-ocean.dark (SL).tmTheme",
"tab_size": 2,
"translate_tabs_to_spaces": true,
"trim_automatic_white_space": true,
"trim_trailing_white_space_on_save": true,
"ensure_newline_at_eof_on_save": true
}

插件推荐

  • SideBarEnhancements : 侧边栏增强工具(仅支持 Sublime Text 3)
  • BracketHighlighter: 高亮显示匹配括号及当前光标所在区域
  • Trailing​Spaces: 高亮空格并在保存时删除
  • Git​Gutter: 在代码行的前面显示 Git 的改动和差异
  • Alignment: 用于对齐代码的赋值语句
  • DocBlockr: 生成块注释
  • Emmet: 更快更高效地编写 HTML/CSS
  • Tag: 编写 HTML/XML 时自动关闭打开的标签
  • HTML5: HTML5 语法增强
  • JsFormat: JavaScript 代码格式化
  • SublimeLinter: 语法检测工具
  • Sublime​Linter-jscs: 按照 jscs 规则对 JavaScript 语法进行检测,需要先安装 jscssudo npm i -g jscs
  • Sublime​Linter-jshint: 按照 jshint 规则对 JavaScript 语法进行检测,需要先安装 jshintsudo npm i -g jshint
    SublimeLinter-csslint CSS 语法检测工具,需要先安装 csslint 包 udo npm i -g csslint
  • Sublime​Linter-jsxhint (optional): 对 JSX(React.js) 语法进行检测,需要先安装 jsxhintsudo npm i -g jsxhint
  • Handlebars (optional): Handlebars.js 模板引擎语法增强
  • Stylus (optional): CSS 预处理器 Stylus 语法增强
  • Go​Sublime (optional): Golang 增强

只需要打开 Sublime Text 3,并且 Ctrl + Shift + P,输入 Install Package, 输入以上的插件列表,逐一安装即可,快来体验一下 Sublime Text 3 的独特魅力吧…

如果喜欢这个分享,就帮忙买杯咖啡吧