讓代碼編輯神器Sublime Text 3 更好的爲咱們工做 - Sublime Text 3使用小教程

原文地址： http://www.zhoujiping.com/tooling/sublime.html

Sublime Text 是一款代碼編輯器，小巧，靈活，可安裝本身須要的插件，對於編寫Php, Ruby, Python, Js等動態腳本語言我的以爲是足夠了，固然前端用它也確定是夠了。Sublime的官網是 http://www.sublimetext.com/,你們能夠自行下載，它是一款付費軟件，價格還不便宜，不過它也提供了永久免費的試用期，只不過會偶爾彈出讓你購買的提示。

對於編寫php代碼, Phpstrom也是一個極佳的選擇，網上有不少人將Subime和Phpstrom進行討論，想論出個誰優誰劣的結果，其實這並無什麼意義，本身喜歡用哪一個就用哪一個吧，只不過Sublime類屬於編輯器(Edit), 而Phpstrom是一個集成開發環境(IDE),能夠說它們並不具有可比性。

若是非要作個對比的話，那對於這些腳本語言我確定會使用Sublime, 像編寫php,我以爲用Phpstrom太浪費個人電腦資源了，而編寫靜態語言項目，好比C#，我會選擇用Visual Studio, 編寫Java我會選擇使用IntelliJ IDEA.

下面咱們一塊兒來看下針對編寫php程序，咱們如何來配置下咱們的Sublime, 如下的操做的都是在Mac Os中進行的，windows系統本身研究下快捷鍵，應該差很少的。

美化Sublime Text 3

默認安裝的Sublime的界面貌似還沒有達到咱們心裏對美的那份追求。咱們能夠將界面換成比較流行的material theme, 你能夠google搜索material theme，就能找到下面這個網址：
https://github.com/equinusocio/material-theme,裏面有詳細的安裝教程。

這裏我也把安裝步驟說一下，首先咱們須要給sublime text 3安裝插件管理工具Package Control.io

打開sublime, 使用control + ` 快捷鍵，或者點擊View > Show Console菜單，調出控制檯，在其中輸入如下Python代碼:

import urllib.request,os,hashlib; h = 'df21e130d211cfc94d9b0905775a7c0f' + '1e3d39e33b79698005270310898eea76'; 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)

安裝完後，重啓sublime便可。官方安裝說明在這裏，也能夠本身看一下。https://packagecontrol.io/installation#st3

在sublime中按住command + shift + p，在彈出的搜索框中搜索Package Control，在跳出的下拉框中選擇Package Control:Install Package，再回車，這時候再從新跳出的搜索框中搜索：material theme,而後回車以安裝。

好了，下面還要配置下，鼠標移到菜單欄Sublime Text -> Preferences > Settings在右邊的窗口（user）中輸入你如下配置(裏面都是json格式)，保存後便可:

"color_scheme": "Packages/Material Theme/schemes/Material-Theme.tmTheme",
"theme": "Material-Theme.sublime-theme",

若是你以爲Material-Theme的默認代碼高亮你不喜歡，那麼咱們還能夠再安裝一個colorsublime的插件，仍是先command + shift + p，在彈出的搜索框中搜索Package Control，在跳出的下拉框中選擇Package Control:Install Package，再回車，這時候再從新跳出的搜索框中搜索：colorsublime,而後回車以安裝。,安裝。 安裝完後按住command + shift + p,這時候搜索colorsublime，在彈出的下拉框中選擇: Colorsublime:Install Theme`

以後你就能夠在跳出的搜索框中查看去喜歡的高亮主題了，你按住鍵盤的方向鍵去選中這些主題，它會時時的將主題預覽顯示出來，好比說咱們選擇Facebook的主題，以下：

這樣的方式選擇高亮主題後，咱們左邊的邊欄顏色和主題顏色不一致，下面咱們再來調一下，仍是先進入到Package Control:Install Package中，搜索PackageResourceViewer安裝, 再command + shift + p調出搜索框，搜索並打開PackageResourceViewer:Extract Package, 而後搜索點擊Material Theme.

如今咱們按下圖所示打開咱們的sublime packages文件夾：

咱們編輯下Material-Theme文件夾中Material-Theme.sublime-theme文件中全部的layer0.tint的顏色，Mac電腦你能夠安裝Color picker小工具來獲取顏色, 若是你不想安裝這個工具，你也可使用QQ截圖工具獲取16進制的RGB的顏色，而後到http://www.colorpicker.com 在線進行格式轉化。

下面咱們來更換下顏色，咱們隨便找到一個"layer0.tint": [38, 50, 56]的代碼，選中38, 50, 56，而後使用快捷鍵control+command+g選中全部行的38, 50, 56, 而後輸入你本身獲取的顏色，好比37, 43, 57，全局替換便可。

而後能夠去安裝一個Fira Code字體，下載連接https://github.com/tonsky/FiraCode 安裝Regular(常規)的版本便可.而後鼠標移到菜單欄Sublime Text -> Preferences > Settings在右邊的窗口（user）中添加字體的配置：

"font_face": "Fira Code",

你還能夠調整下字體大小，行間距，設置使用空格代替tab鍵等，如個人以下：

"font_face": "Fira Code",
    "font_size": 16,
    "line_padding_bottom": 4,
    "line_padding_top": 4,
    "tab_size": 4,
    "translate_tabs_to_spaces": true

更多的配置你們能夠查看Sublime Text -> Preferences > Settings在左邊邊的窗口（Default), 只需將配置複製到右邊的(User)窗口中，覆寫它便可.

查找文件和查找函數的快捷鍵

使用快捷鍵來全局搜索文件和方法會提高不少效率：

搜索文件：command + p
搜索方法：command + r，或者command + p， 在跳出的搜索框輸入 @ 符合，就變成搜索方法了

也能夠搜索文件的同時搜索方法,如我要搜索AuthController.php中的create方法，能夠這樣寫AuthController@create，能夠快速定位到create方法中。

還有一個更快速的快捷鍵：command + shift + r, 全局查看類或方法，本身試一下,很是好用.

快速建立、重命名和刪除文件

咱們能夠在左邊欄點擊右鍵->New File來建立文件，可是還有一種更快速的方法，咱們來看一下。咱們只須要安裝一個AdvanceNewFile的插件

裝完後，咱們使用command + option + n快捷鍵就能夠建立文件了，好比要常見一個zhoujiping/index.blade.php的視圖，見下圖：

若是想建立一個和正在編輯的文件具備相同目錄的文件，能夠按以下操做：

除了建立文件，你還能夠重命名當前文件，或者刪除當前文件，按住command + shirt + p, 輸入查找rename，選擇 ANF:Rename File, 默認沒有顯示文件路徑和名，還須要配置下, 打開AdvanceNewFile的setting-user配置文件, 輸入如下內容:

{
    "rename_default": "<filepath>",
}

下面在試一下修改文件，就能顯示文件路徑和文件名了，至於刪除文件，本身搜索delete試下便可

若是你忘記sublime或者它的插件的一些快捷鍵，或者要修改配置，均可以去查看各插件的默認配置，setting-default，裏面都有詳細的註釋說明，而後將要修改的配置放到對應的setting-user中便可

Sublime的多窗口編輯

Sublime默認就可使用多窗口編輯,好比按住command + option + 2,會變成左右兩個窗口，3個窗口就command + option + 3，以此類推. 另外還有一個加強插件origami,安裝完本身看下setting中的快捷鍵，本身配置也行，這裏很少說了.

Sublime的多點編輯

選中一個單詞，而後不斷的按住command + D，能夠同時選中相同的單詞，而後能夠統一編輯

或者也能夠選中一個單詞，而後使用control + command + g來選中所有同樣的單詞，進行統一多點編輯.

構建本身的代碼塊

使用IDE的一個很大的好處是能夠快速生成代碼塊，Sublime中咱們也能夠這麼作，點擊`Tools->Developer->New Snippet, 出現下面的默認代碼:

<snippet>
    <content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <!-- <tabTrigger>hello</tabTrigger> -->
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <!-- <scope>source.python</scope> -->
</snippet>

咱們寫一個生成php方法的代碼塊，好比咱們輸入met，按table鍵就能生成，咱們改下上面的代碼：

<snippet>
    <content><![CDATA[
public function ${1}()
{
    ${2}
}
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>met</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <scope>source.php</scope>
</snippet>

而後創建個snippets文件夾，統一存放咱們寫的這些代碼片斷:

下面就可使用met按下tab鍵來建立咱們的代碼了，當按第一次tab的時候，光標會聚焦到${1}處，寫好方法名，再按下tab,光標會聚焦到${2}處，是否是很是方便.

好比咱們再來創建一個Protected function 的方法，以下：

<snippet>
    <content><![CDATA[
protected function ${1}(${2})
{
    ${3}
}
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>pmet</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <scope>source.php</scope>
</snippet>

自動生成Getters 和 Setters

好比說，咱們要自動生成下面屬性的get和set方法：

<?php

class Person
{
    protected $name;
    
    protected $age;
}

搜索安裝PHP Getters and Setters插件，安裝完畢後，command + shift + p， 搜索php，或者搜索getter, 或setter, 能夠生成一個屬性的，也能夠生成全部的，本身研究下便可。

好比說我選擇同時生成get和set, 以下：

<?php

class Person
{
    protected $name;
    
    protected $age;

    /**
     * Gets the value of name.
     *
     * @return mixed
     */
    public function getName()
    {
        return $this->name;
    }

    /**
     * Sets the value of name.
     *
     * @param mixed $name the name
     *
     * @return self
     */
    protected function setName($name)
    {
        $this->name = $name;

        return $this;
    }

    /**
     * Gets the value of age.
     *
     * @return mixed
     */
    public function getAge()
    {
        return $this->age;
    }

    /**
     * Sets the value of age.
     *
     * @param mixed $age the age
     *
     * @return self
     */
    protected function setAge($age)
    {
        $this->age = $age;

        return $this;
    }
}

快速導入命名空間及自動生成構造函數等

Phpstrom不用你手動的導入命名空間，會自動導入，sublime也能夠作到這點, 搜索安裝php companion插件.

這個插件沒有提供默認快捷鍵綁定，須要咱們要本身配置一下，打開它的github頁面https://github.com/erichard/SublimePHPCompanion

上面有詳細的配置說明，本身研究下便可，下面我舉幾個配置的列子，咱們先配置一個補全命名空間，以下:

<?php

// use Finder  當我寫出Finder時，而後按下f9快捷鍵，自動補全像下面這樣的命名空間
use Symfony\Component\Finder\Finder;

首先打開快捷鍵!]配置文件:

[
    {"keys": ["f9"], "command": "expand_fqcn" }
]

你能夠按本身的喜愛去設置快捷鍵，這裏我設置爲f9,保存後便可達到上面的效果.若是存在不一樣命名空間的同名的類，它會跳出全部的類，你本身選擇便可。

不過在PhpStrom中，咱們將類的對象依賴注入到方法中，會自動導入命名空間，咱們來配置個半自動的，好比說：

public function update(Request $request)
{
}

當咱們書寫完Request,按下f10, 自動導入命名空間，配置Key Bindings以下：

[
    {"keys": ["f9"], "command": "expand_fqcn" },
    {"keys": ["f10"], "command": "find_use" }
]

這樣就能實現咱們要的效果了，對於全自動的導入，你們能夠看下文檔本身配置下。

咱們再來配置一個構造函數自動生成的綁定，配置Key Bindings以下：

[
    {"keys": ["f9"], "command": "expand_fqcn" },
    {"keys": ["f10"], "command": "find_use" },
    {"keys": ["f7"], "command": "insert_php_constructor_property" },
]

ok, 下面再咱們的類中按下f7就能夠出現咱們要的構造函數了:

你不斷的按f7, 會不斷的添加新的屬性，試試。

若是你想將屬性的private更改成protected, 你能夠更改php companion的 user配置文件:

{
    // Sort the list of use statements by their line length
    "use_sort_length": true,

    // Visibility of properties generated by the "insert constructor property"
    // command. "public", "protected" or "private"
    "visibility": "protected",
}

在sublime中運行Artisan命令

搜索安裝laravel 5 atisan, 安裝完畢後， command + shift + p，搜索artisan,便可出現一堆的命令供你選擇。固然，若是你習慣使用終端也同樣，我的比較喜歡用終端執行,只不過這種方式會更快些.

代碼格式化爲 PSR-2 代碼風格規範

如今的不少php框架都支持了PSR-2的代碼風格規範,咱們能夠安裝個能夠自動格式化的組件 friendsofphp/php-cs-fixer, 使用composer全局安裝，進入命令行

➜  composer global require friendsofphp/php-cs-fixer
Changed current directory to /Users/zhoujiping/.composer
Using version ^2.0 for friendsofphp/php-cs-fixer
./composer.json has been updated
Loading composer repositories with package information
Updating dependencies (including require-dev)
  - Installing sebastian/diff (1.4.1)
    Downloading: 100%         

  - Installing symfony/stopwatch (v3.2.0)
    Downloading: 100%         

  - Installing symfony/polyfill-php54 (v1.3.0)
    Downloading: 100%         

  - Installing symfony/finder (v3.2.0)
    Downloading: 100%         

  - Installing symfony/filesystem (v3.2.0)
    Downloading: Failed       
    Downloading: 100%         

  - Installing symfony/event-dispatcher (v3.2.0)
    Downloading: 100%         

  - Installing friendsofphp/php-cs-fixer (v2.0.0)
    Downloading: 100%         

symfony/event-dispatcher suggests installing symfony/dependency-injection ()
symfony/event-dispatcher suggests installing symfony/http-kernel ()
Writing lock file
Generating autoload files

跑一下 php-cs-fixer：

➜  php-cs-fixer  
PHP CS Fixer version 2.0.0 by Fabien Potencier and Dariusz Ruminski

Usage:
  command [options] [arguments]

Options:
  -h, --help            Display this help message
  -q, --quiet           Do not output any message
  -V, --version         Display this application version
      --ansi            Force ANSI output
      --no-ansi         Disable ANSI output
  -n, --no-interaction  Do not ask any interactive question
  -v|vv|vvv, --verbose  Increase the verbosity of messages: 1 for normal output, 2 for more verbose output and 3 for debug

Available commands:
  describe     Describe rule / ruleset.
  fix          Fixes a directory or a file.
  help         Displays help for a command
  list         Lists commands
  readme       Generates the README content, based on the fix command help.
  self-update  Update php-cs-fixer.phar to the latest stable version.
  selfupdate   Update php-cs-fixer.phar to the latest stable version.

咱們能夠在命令行中手動的使用它:

php-cs-fixer fix Person.php --rules=@PSR2

下面咱們將其添加到sublime中，點擊Tools->Build System -> New Build System，輸入如下內容

{
    "shell_cmd": "php-cs-fixer fix $file --rules=@PSR2"
}

保存以下：

如今只要按住command + b， 就能夠將當前php文件格式化爲psr-2格式了。若是你的電腦比較老，那就少用，個人有點慢，本身把psr標準看熟去寫就行。

php語法檢查插件

先搜索安裝sublimeLinter插件, 而後安裝sublimeLinter-php插件, 好比有語法錯誤，就會按下面這樣顯示

上面這些插件咱們不用所有都裝，真的以爲有必要用時再去安裝。

結束。