[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
設定:
  1. {
  2. "excludes": [
  3. "AlignConstVisibilityEquals",
  4. "AlignDoubleArrow",
  5. "AlignEquals",
  6. "MergeNamespaceWithOpenTag",
  7. "SpaceAfterExclamationMark"
  8. ],
  9. "format_on_save": false,
  10. "passes": [
  11. "AlignDoubleSlashComments",
  12. "AlignPHPCode",
  13. "AutoSemicolon",
  14. "ConvertOpenTagWithEcho",
  15. "ExtraCommaInArray",
  16. "RemoveSemicolonAfterCurly",
  17. "RestoreComments",
  18. "ShortArray",
  19. "SpaceBetweenMethods"
  20. ],
  21. "php_bin": "C:/xampp/php/php.exe",
  22. "psr2": true,
  23. }

2. Js​Prettier

網址:https://packagecontrol.io/packages/JsPrettier
設定:
  1. {
  2. "prettier_options": {
  3. "printWidth": 100,
  4. "tabWidth": 4
  5. }
  6. }

五、其他

1. A File Icon

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

2. Alignment

網址:https://packagecontrol.io/packages/Alignment
對齊程式碼。
設定:
  1. {
  2. "mid_line_tabs": true
  3. }

3. BracketHighlighter

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

4. DocBlockr

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

5. MarkdownPreview

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

6. ProjectManager

網址:https://packagecontrol.io/packages/ProjectManager
專案管理工具。
想要 ignore 某些資料夾可以加上 folder_exclude_patterns 設定。
  1. {
  2. "folders":
  3. [
  4. {
  5. "path": "projectRootPath",
  6. "folder_exclude_patterns":
  7. [
  8. "folder1",
  9. "folder2/sub-folder"
  10. ]
  11. }
  12. ]
  13. }

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

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,會變成
  1. <ul>
  2. <li></li>
  3. <li></li>
  4. <li></li>
  5. <li></li>
  6. </ul>

6. SublimeCodeIntel

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

7. CodeFormatter

網址:https://packagecontrol.io/packages/CodeFormatter
美化程式碼。
設定:要先把 Default 整個複製過來再改,如果只寫要改的選項會發生 Formatter for this file type not found. 錯誤。
  1. {
  2. "codeformatter_php_options":
  3. {
  4. "enable_auto_align": false
  5. },
  6.  
  7. "codeformatter_js_options":
  8. {
  9. "preserve_newlines": true,
  10. "max_preserve_newlines": 2
  11. },
  12.  
  13. "codeformatter_css_options":
  14. {
  15. "newline_between_rules": true
  16. },
  17.  
  18. "codeformatter_scss_options":
  19. {
  20. "newline_between_rules": true
  21. }
  22. }

8. HTML-CSS-JS Prettify

網址:https://packagecontrol.io/packages/HTML-CSS-JS%20Prettify
設定:
  1. {
  2. "all":
  3. {
  4. "max_preserve_newlines": 1,
  5. },
  6.  
  7. "css":
  8. {
  9. "selector_separator_newline": false
  10. },
  11.  
  12. "json":
  13. {
  14. "brace_style": "collapse-preserve-inline",
  15. }
  16. }

9. SideBarEnhancements

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

留言