[Sublime 4] 常用套件筆記
記錄我目前有在用的套件,隨時更新。
按 Ctrl+Shift+p,輸入 install 就會出現 Package Control 選項。安裝好後就可以透過 Ctrl+Shift+p 選擇 Package Control: Install Package 搜尋想要安裝的套件。
設定:
設定:
讓側邊欄 folders 有漂亮的 icon 顯示。
對齊程式碼。
設定:
可自動顯示 HTML 標籤或 JavaScript 的各種對應區塊 ( { } )。
快速建立出文件、標準格式註解。
輸入 /** 後,按下 Enter 或 Tab。
可以在瀏覽器檢視結果。
專案管理工具。
想要 ignore 某些資料夾可以加上 folder_exclude_patterns 設定。
快速建立標籤。
範例:ul>li*4,在按下 tab,會變成
強大的語法提示。
美化程式碼。
設定:要先把 Default 整個複製過來再改,如果只寫要改的選項會發生 Formatter for this file type not found. 錯誤。
設定:
擴充側邊欄的功能。
目錄
一、前置作業
1. 安裝 Package Control
二、Syntax
1. ApacheConf
2. DotENV
3. INI
4. Laravel Blade Highlighter
5. Sass
6. Vue Syntax Highlight
7. Tailwind CSS
三、Snippets 和 Autocomplete
1. Blade Snippets
2. Laravel 5 Snippets
四、Formatter
1. phpfmt
2. JsPrettier
五、其他
1. A File Icon
2. Alignment
3. BracketHighlighter
4. DocBlockr
5. MarkdownPreview
6. ProjectManager
六、曾經用過後來沒在用的套件
1. Bootstrap 3 Autocomplete
2. Bootstrap 3 Snippets
3. Bootstrap 4 Autocomplete
4. Bootstrap 4 Snippets
5. Emmet
6. SublimeCodeIntel
7. CodeFormatter
8. HTML-CSS-JS Prettify
9. SideBarEnhancements
一、前置作業
1. 安裝 Package Control
二、Syntax
1. ApacheConf
2. DotENV
3. INI
4. Laravel Blade Highlighter
5. Sass
6. Vue Syntax Highlight
7. Tailwind CSS
三、Snippets 和 Autocomplete
1. Blade Snippets
2. Laravel 5 Snippets
四、Formatter
1. phpfmt
2. JsPrettier
五、其他
1. A File Icon
2. Alignment
3. BracketHighlighter
4. DocBlockr
5. MarkdownPreview
6. ProjectManager
六、曾經用過後來沒在用的套件
1. Bootstrap 3 Autocomplete
2. Bootstrap 3 Snippets
3. Bootstrap 4 Autocomplete
4. Bootstrap 4 Snippets
5. Emmet
6. SublimeCodeIntel
7. CodeFormatter
8. HTML-CSS-JS Prettify
9. SideBarEnhancements
一、前置作業
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/ApacheConf2. DotENV
網址:https://packagecontrol.io/packages/DotENV3. INI
網址:https://packagecontrol.io/packages/INI4. Laravel Blade Highlighter
網址:https://packagecontrol.io/packages/Laravel%20Blade%20Highlighter5. Sass
網址:https://packagecontrol.io/packages/Sass6. Vue Syntax Highlight
網址:https://packagecontrol.io/packages/Vue%20Syntax%20Highlight7. Tailwind CSS
網址:https://packagecontrol.io/packages/Tailwind%20CSS三、Snippets 和 Autocomplete
1. Blade Snippets
網址:https://packagecontrol.io/packages/Blade%20Snippets2. Laravel 5 Snippets
網址:https://packagecontrol.io/packages/Laravel%205%20Snippets四、Formatter
1. phpfmt
網址:https://packagecontrol.io/packages/phpfmt設定:
- {
- "excludes": [
- "AlignConstVisibilityEquals",
- "AlignDoubleArrow",
- "AlignEquals",
- "MergeNamespaceWithOpenTag",
- "SpaceAfterExclamationMark"
- ],
- "format_on_save": false,
- "passes": [
- "AlignDoubleSlashComments",
- "AlignPHPCode",
- "AutoSemicolon",
- "ConvertOpenTagWithEcho",
- "ExtraCommaInArray",
- "RemoveSemicolonAfterCurly",
- "RestoreComments",
- "ShortArray",
- "SpaceBetweenMethods"
- ],
- "php_bin": "C:/xampp/php/php.exe",
- "psr2": true,
- }
2. JsPrettier
網址:https://packagecontrol.io/packages/JsPrettier設定:
- {
- "prettier_options": {
- "printWidth": 100,
- "tabWidth": 4
- }
- }
五、其他
1. A File Icon
網址:https://packagecontrol.io/packages/A%20File%20Icon讓側邊欄 folders 有漂亮的 icon 顯示。
2. Alignment
網址:https://packagecontrol.io/packages/Alignment對齊程式碼。
設定:
- {
- "mid_line_tabs": true
- }
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 設定。
- {
- "folders":
- [
- {
- "path": "projectRootPath",
- "folder_exclude_patterns":
- [
- "folder1",
- "folder2/sub-folder"
- ]
- }
- ]
- }
六、曾經用過後來沒在用的套件
1. Bootstrap 3 Autocomplete
網址:https://packagecontrol.io/packages/Bootstrap%203%20Autocomplete2. Bootstrap 3 Snippets
網址:https://packagecontrol.io/packages/Bootstrap%203%20Snippets3. Bootstrap 4 Autocomplete
網址:https://packagecontrol.io/packages/Bootstrap%204%20Autocomplete4. Bootstrap 4 Snippets
網址:https://packagecontrol.io/packages/Bootstrap%204%20Snippets5. 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擴充側邊欄的功能。
留言
張貼留言