[Sublime 4] 常用套件筆記

記錄我目前有在用的套件，隨時更新。

一、前置作業

1. 安裝 Package Control

網址：https://packagecontrol.io/
按 Ctrl+Shift+p，輸入 install 就會出現 Package Control 選項。安裝好後就可以透過 Ctrl+Shift+p 選擇 Package Control: Install Package 搜尋想要安裝的套件。

二、Syntax

1. ApacheConf

網址：https://packagecontrol.io/packages/ApacheConf

2. DotENV

網址：https://packagecontrol.io/packages/DotENV

3. INI

網址：https://packagecontrol.io/packages/INI

4. Laravel Blade Highlighter

網址：https://packagecontrol.io/packages/Laravel%20Blade%20Highlighter

5. Sass

網址：https://packagecontrol.io/packages/Sass

6. Vue Syntax Highlight

網址：https://packagecontrol.io/packages/Vue%20Syntax%20Highlight

7. Tailwind CSS

網址：https://packagecontrol.io/packages/Tailwind%20CSS

三、Snippets 和 Autocomplete

1. Blade Snippets

網址：https://packagecontrol.io/packages/Blade%20Snippets

2. Laravel 5 Snippets

網址：https://packagecontrol.io/packages/Laravel%205%20Snippets

四、Formatter

1. phpfmt

網址：https://packagecontrol.io/packages/phpfmt
設定：

{
    "excludes": [
        "AlignConstVisibilityEquals",
        "AlignDoubleArrow",
        "AlignDoubleSlashComments",
        "AlignEquals",
        "MergeNamespaceWithOpenTag",
        "SpaceAfterExclamationMark"
    ],
    "format_on_save": false,
    "passes":
    [
        "AlignPHPCode",
        "AutoSemicolon",
        "ConvertOpenTagWithEcho",
        "ExtraCommaInArray",
        "IndentPipeOperator",
        "IndentTernaryConditions",
        "RemoveSemicolonAfterCurly",
        "RestoreComments",
        "ShortArray",
        "SpaceBetweenMethods"
    ],
    "php_bin": "C:/xampp/php/php.exe"
}

2. Js​Prettier

網址：https://packagecontrol.io/packages/JsPrettier
要先透過 npm 安裝 prettier。

npm install --global prettier

設定：

{
    "prettier_cli_path": "C:/Users/user/AppData/Roaming/npm/prettier.cmd",
    "prettier_options": {
        "printWidth": 100,
        "tabWidth": 4
    }
}

五、其他

1. A File Icon

網址：https://packagecontrol.io/packages/A%20File%20Icon
讓側邊欄 folders 有漂亮的 icon 顯示。

2. BracketHighlighter

網址：https://packagecontrol.io/packages/BracketHighlighter
可自動顯示 HTML 標籤或 JavaScript 的各種對應區塊 ( { } )。

3. DocBlockr

網址：https://packagecontrol.io/packages/DocBlockr
快速建立出文件、標準格式註解。
輸入 /** 後，按下 Enter 或 Tab。

4. MarkdownPreview

網址：https://packagecontrol.io/packages/MarkdownPreview
可以在瀏覽器檢視結果。

5. ProjectManager

網址：https://packagecontrol.io/packages/ProjectManager
專案管理工具。
想要 ignore 某些資料夾可以加上 folder_exclude_patterns 設定。

{
    "folders":
    [
        {
            "path": "projectRootPath",
            "folder_exclude_patterns":
            [
                "folder1",
                "folder2/sub-folder"
            ]
        }
    ]
}

六、曾經用過後來沒在用的套件

1. Bootstrap 3 Autocomplete

網址：https://packagecontrol.io/packages/Bootstrap%203%20Autocomplete

2. Bootstrap 3 Snippets

網址：https://packagecontrol.io/packages/Bootstrap%203%20Snippets

3. Bootstrap 4 Autocomplete

網址：https://packagecontrol.io/packages/Bootstrap%204%20Autocomplete

4. Bootstrap 4 Snippets

網址：https://packagecontrol.io/packages/Bootstrap%204%20Snippets

5. Emmet

網址：https://packagecontrol.io/packages/Emmet
快速建立標籤。
範例：ul>li*4，在按下 tab，會變成

<ul> 
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

6. SublimeCodeIntel

網址：https://packagecontrol.io/packages/SublimeCodeIntel
強大的語法提示。

7. CodeFormatter

網址：https://packagecontrol.io/packages/CodeFormatter
美化程式碼。
設定：要先把 Default 整個複製過來再改，如果只寫要改的選項會發生 Formatter for this file type not found. 錯誤。

{
    "codeformatter_php_options":
    {
        "enable_auto_align": false
    },

    "codeformatter_js_options":
    {
        "preserve_newlines": true,
        "max_preserve_newlines": 2
    },

    "codeformatter_css_options":
    {
        "newline_between_rules": true
    },

    "codeformatter_scss_options":
    {
        "newline_between_rules": true
    }
}

8. HTML-CSS-JS Prettify

網址：https://packagecontrol.io/packages/HTML-CSS-JS%20Prettify
設定：

{
    "all":
    {
        "max_preserve_newlines": 1,
    },

    "css":
    {
        "selector_separator_newline": false
    },

    "json":
    {
        "brace_style": "collapse-preserve-inline",
    }
}

9. SideBarEnhancements

網址：https://packagecontrol.io/packages/SideBarEnhancements
擴充側邊欄的功能。

10. Alignment

網址：https://packagecontrol.io/packages/Alignment
對齊程式碼。
設定：

{
    "mid_line_tabs": true
}