Cheng's Blog

Sublime的大名已经无需我介绍了，首先先介绍如何启用插件安装功能：

1. 打开Sublime 3，然后按 ctrl+` 或者在View → Show Console
2. 在打开的窗口里黏贴这个网站上的代码（注意: Sublime 2和3所黏贴的代码不一样，注意选择）：https://packagecontrol.io/installation
3. 安装完成后，按 Ctrl+Shift+p (Windows) / Command+Shift+p (Mac), 输入'Install Packages'，之后Sublime会自动下载插件列表，然后弹出一个小的下拉菜单让你填写想要下载的插件名称。

注:

• 第二步中的网站如果打开困难请翻墙，这年头不翻墙连个程序都没法好好写。
• 第三步在选择完 Install Packages后，会出现卡住的情况，Sublime最底端的状态栏里会有一个 '=' 符号在来回移动。这个的意思是正在下载插件列表中，请稍后。 插件列表的下载跟墙也有关系，总之不会很快就是了。

接下来是本文重点，前端开发的几个必备插件(越靠后的几个越实用):

CSS3

链接: https://github.com/y0ssar1an/CSS3
简介: 支持CSS3里的语法高亮。(Sublime3里自带的CSS高亮不够用)。安装后, 打开一个CSS文件，然后按照下面GIF操作，将CSS3高亮作为CSS文件的默认高亮:

Sidebar Enhancement

链接: https://github.com/titoBouzout/SideBarEnhancements
简介: 让Sublime的侧边栏多出许多必备功能，如在浏览器中打开，改名，复制文件链接等等

Git Gutter

链接: https://github.com/jisaacks/GitGutter
简介: 如果你使用Git做版本控制的话，这个插件可以在行号前标记处哪些行是新加的，删除的和修改过的。

Bracket Highlighter

链接: https://github.com/facelessuser/BracketHighlighter
简介: 高亮各种括号的起始和结尾

HTML-CSS-JS Prettify

链接: https://packagecontrol.io/packages/HTML-CSS-JS%20Prettify
简介: 编辑HTML, CSS, JS时，经常会出现缩进不对，代码行不对其的情况。装了这个插件之后，只要按下Ctrl+Shift+h (Windows), Command+Shift+h (Mac), 你的文档就会被整理干净。
安装: Ctrl+Shift+P → Package Control: Install Package → HTML-CSS-JS Prettify

livestyle

链接: http://livestyle.emmet.io/

简介: 这货太神奇了。在调试页面的样式时，经常会打开Chrome自带的开发者工具，然后编辑CSS，等满意了再把CSS代码黏贴回Sublime里。这货允许你在Chrome里修改CSS，然后相对应的在Sublime里的CSS文件就自动更新了！（你更新Sublime里的CSS并保存，打开的网页也会自动更新）

安装: 需要安装两个插件，一个是Sublime的插件，一个是Chrome的插件。
Sublime插件: Ctrl+Shift+P → Package Control: Install Package → LiveStyle
Chrome插件: https://chrome.google.com/webstore/detail/emmet-livestyle/diebikgmpmeppiilkaijjbdgciafajmg

用法: 先重启你的Sublime，然后打开一个CSS文件。然后在Chrome里打开包含这个CSS的HTML页面 → 打开Chrome的开发者工具，工具栏的最后会多出一个 LiveStyle选项:

livereload

链接: http://feedback.livereload.com/knowledgebase/articles/86242-how-do-i-install-and-use-the-browser-extensions

简介: 该软件需要付费($9.99). 这款软件不算是Sublime的插件，但是开发的时候非常必要。功能和上面介绍的livestyle类似，就是源码文件有所改动的话，打开的网页页面也会自动刷新。（但是不支持在网页里直接改源码，然后反向刷新源码文件）软件源码其实是开源的，但是Mac客户端要收费。其实就60块RMB，但是在开发的时候真是省了不少力气。Windows版是测试版，免费。

安装: 需要安装两个部件，一个是Mac客户端，一个是Chrome插件。

Mac客户端:http://itunes.apple.com/us/app/livereload/id482898991?mt=12
Chrome插件: https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei
如果你使用Safari或者火狐，请到这个页面上找相应的插件:http://livereload.com/extensions/

用法: 先将客户端打开，然后在这个窗口里点 '+' 添加你源文件所在的文件夹。然后在Chrome里打开相应的HTML文件，并点击Livereload插件的图标，如果图标里的圆点变成实心，则表明已经和客户端链接完成，可以开始同步修改了。

Emmet

链接: http://docs.emmet.io/abbreviations/syntax/
简介: 通过一套简单的语法让你快速生成大量的HTML代码，比如输入:

div.row>ul>li

然后按TAB会生成:

<div class="row">
    <ul>
        <li></li>
    </ul>
</div>

虽然要背一下语法，但是只需要记忆最常用的几个就好。效率提升杠杠的。

安装:Ctrl+Shift+P → Package Control: Install Package → Emmet

其它:

以下插件要看你的个人需求，视情况而定:

Advanced New File

链接: https://packagecontrol.io/packages/AdvancedNewFile
简介: 通过Sublime里的输入框来新建一个文件。Windows上按Ctrl+alt+n激活，Mac上按Command+alt+n激活。感觉有了SidebarEnhancement后，这个就没啥大用了。
安装: Ctrl+Shift+P → Package Control: Install Package → AdvancedNewFile

Djaneiro

链接: https://github.com/squ1b3r/Djaneiro
简介: 如果你使用Django框架开发，这个插件会添加以下常用的Snippet，帮助你编辑模板的时候少打些字。如果你有Pycharm的专业版，那就不需要这个了。
安装: Ctrl+Shift+P → Package Control: Install Package → Djaneiro
用法: 安装好后会多出一种文件类型 'Djaneiro → HTML (Django)'。输入'if'然后按Tab的话会自动转换为

{% if  %}
    
{% endif %}

请打开它的网站链接，上面有所有支持的命令列表。

Bootstrap 3 Snippets

链接: https://github.com/JasonMortonNZ/bs3-sublime-plugin
简介: 在Sublime里添加了很多常用的Bootstrap 3的快捷。但前提是需要记住这些快捷的名字。。。
安装: Ctrl+Shift+P → Package Control: Install Package → Bootstrap 3 Snippets

Package Sync

链接: https://packagecontrol.io/packages/Package%20Syncing
简介: 可以同步你多台机器上Sublime的配置和安装包。目前还没测试过，但应该能用。

References:

https://www.youtube.com/watch?v=NrYzJz1P4fE
http://limestrap.blogspot.in/2013/09/12-first-bootstrap-3-page-with-sublime.html

主题

Soda theme

字体

Dejavu
编程推荐使用它的Sans Mono字体类型

Source code pro
Adobe推出的免费字体，主要用于用户界面上的文字。

Run the following command to copy the Packages and Installed Packages folder to your dropbox.

mkdir $HOME/Dropbox/sublime-text-3/
mv "$HOME/Library/Application Support/Sublime Text 3/Packages" "$HOME/Dropbox/sublime-text-3/"
mv "$HOME/Library/Application Support/Sublime Text 3/Installed Packages" "$HOME/Dropbox/sublime-text-3/"

Then, on a different computer, remove its Packages and Installed Packages folder and make a symbolic link to the copies in the Dropbox folder.

DSTPATH="$HOME/Library/Application Support/Sublime Text 3"
DROPBOX_PATH="$HOME/Dropbox/sublime-text-3"
rm -rf "$DSTPATH/Installed Packages"
rm -rf "$DSTPATH/Packages"
mkdir -p "$DSTPATH"
ln -s "$DROPBOX_PATH/Packages" "$DSTPATH/Packages"
ln -s "$DROPBOX_PATH/Installed Packages" "$DSTPATH/Installed Packages"

seen on: http://www.hongkiat.com/blog/sublime-text-tips/

To writing Markdown in Sublime Text 3, two plugins are needed to:

1. Enable Markdown syntax highlighting
2. Convert Markdown document to HTML and preview it in a web browser

To accomplish these, install these two plugins:

1. Markdown Editing: This plugin enables syntax highlighting for standard Markdown, Github Flavoured Markdown(GFM) and MultiMarkdown

2. Markdown Preview: as the name suggests, it converts your MD file to HTML and opens it in your system default browser

3. LiveReload(optional): This is a standalone plugin (i.e. has nothing to do with Sublime Text 3) that automatically refreshes a webpage if its source (HTML,CSS,JS, etc.) has changed. With this plugin, you don't have to click on refresh or F5 everytime you make changes in the Markdown document.

How to use these plugins:

• Markdown Editing: once installed, open a Markdown document, set the syntax to either Markdown, GFM, or MultiMarkdown by either click at the bottom right corner and select or use command + shift + p > Set Syntax: Markdown

• Markdown Preview: once installed, open a Markdown document, press ** Command + Shift + p ** > Preview in browser > select the markdown option (You will see two options presented here. GitHub or Mardown. The github option means to use Github's online API for parsing the MD file, this can take sometime due to your connection speed. It also has a 60 calls/day limitaion. But the upside is you get a GFM with syntax highlighting and EMOJI support for free)

If selecting parser becomes anonying everytime you preview a MD file, you can always set a hotkey in your Keybindings - User file:

{ "keys": ["alt+m"], "command": "markdown_preview", "args": {"target": "browser", "parser":"markdown"} },

A "better" alternative: Github has released a text editor named Atom. It looks and works almost exactly like Sublime Text (most of the hotkeys are the same too). The best part is that it is FREE.

The reason I mentioned it is because Atom offers default Markdown support. It can open a split window with your MD file on the left and a live HTML preview on the right all in the text editor. There is no need to install any plugins or opening the web browser.

The following ST3 plugins are need for React development:

1. babel - for jsx syntax highlighting
2. sublime-jshint - for linting your js code
3. sublime-jsxhint - for linting your jsx code

Install babel

This one is very straight forward, just find babel in package control and install it. To use the Babel's JSX syntax highlight whenever a .jsx file is opened:

• open up a .jsx file in ST3
• Goto 'View -> Syntax -> Open all current extention as ... > Babel > Javascript (Babel)'

Linting JSX

I have written a blog about Linting react code here. Follow the instructions in that blog, it will give you real time linting as you code in sublime.

Install React Chrome plugin

Install this plugin if you use Chrome for development, go to this link and install.

Once installed, open up Extensions find the React plugin and check the Allow access to file URLS. This is important if you want to test React files locally.

If you have a webpage using React opened, such as this page, an extra tab named React should appear in your Developer Tools

Convert JSX files to JS files

React uses a syntax called JSX. To use it in your webpage, you have to convert it to regular JS format first. There are two ways to do it:

1. Use the 'JSXTransformer.js' (which comes with React.js download) to do the conversion
2. Use the 'react-tools' npm package to perform the conversion

Which one should you choose?

If you want to write your JSX code inside the HTML page, then use JSXTransformer.js like this:

<html>
<body>
    <script src="js/vendor/react.min.js"></script>
    <script src="js/vendor/JSXTransformer.js"></script>

    <script type="text/jsx">
            ...React code inside...
    </script>
</body>
</html>

This is good for debugging but not good for production. Because compiling from .jsx to .js takes time, you want to precompile the .jsx files to regular .js files before serving them to your customers.

So, how to compile .jsx files?

Install the 'react-tools' package via npm:

npm install -g react-tools

Once finished, go into your dev directory and use this command:

Assuming this is the structure of your dev directory

dev_dir/
    js/ 
        src/
        build/

cd dev_dir/js
jsx -w src/ build/

This command means watching all .js files inside the src folder and compile them if modified to regular .js files and save them to the build folder.

WARNING: This command works only if you saved the JSX files with .js extension, if you saved your JSX files with the .jsx extension, then you need to use this command:

jsx -x jsx -w src/ build/

If the command has been executed successfully, you should see a message like this:

built Module("your_js_or_jsx_filename")
["your_js_or_jsx_filename"]

You can import the compiled js files like this (without the need of JSXTransformer.js):

<html>
<body>
    <script src="js/vendor/react.min.js"></script>
    <script type="text/javascript" scr="js/build/precompiled.js"></script>
</body>
</html>

XMLHttpRequest cannot load

Just when you thought you can import a .jsx file like regular .js file locally like this:

<html>
<body>
    <script src="js/react.min.js"></script>
    <script src="js/JSXTransformer.js"></script>

    <script type="text/jsx" src="react_module.jsx"></script>
</body>
</html>

You will see an error in Chrome's console: XMLHttpRequest cannot load, this is because the JSXTransformer.js loads jsx files via XHR which is prohibited for local files.

There are a few ways to overcome this problem which is explained in the StackOverflow link above, but the easiest way to deal with it is to precompile your .jsx files into regular .js files and import them. (which has been explained in the previous section)

A very good React tutorial link

Reactjs Introduction for People Who Know Just Enough JQuery to Get by

This is about it to kickstart your React project using ST3.