Day 27 - VS Code plugin 安裝

近期社群再戰編輯器還是IDE什麼的之類, 小弟也是拿板凳在旁觀看者之一, 都各有自己的優點與好處, 選擇自己順手, 喜愛的也無不可, 喜愛就值得花時間投入, 當然對自己能有幫助能省時間都是好的, PHPStorm內建功能超強大真的沒話說, sublime, vscode, atom 等等之類也都各有好處。

小弟一直以來都是看到不錯的或是人家推薦的就用看看, phpstorm 會再找時間嘗試, 要花錢沒啥問題, 但現在暫時沒產值還是先緩緩, 而且對於編輯器的一堆插件and輔助算不上熟悉, 還是先練練先了解吧, 最近又把vscode裝回來了, 改版改到現在似乎也強大起來, open source果然發展神速, sublime 我要先拋棄你了(你也是很好用的啦）, 有關vscode好處與介紹請google或百度吧～

紀錄找到不錯用的插件, 有些只是裝上去, 還不怎麼瞭解如何用＝＝, 順序無關好用度`, 有用到就記錄下來。

個人設定

{
    "workbench.colorTheme": "Material Theme",
    "editor.fontSize": 16,
    "workbench.iconTheme": "vscode-great-icons",
    "editor.minimap.enabled": false,
    "editor.formatOnType": true,
    "editor.formatOnPaste": true,
    "editor.snippetSuggestions": "top",
    "editor.renderIndentGuides": true,
    "window.reopenFolders": "all",
    "terminal.external.osxExec": "iTerm.app",
    "terminal.integrated.fontSize": 14,
    "beautify.language": {
        "indent_size": 4,
        "indent_char": " ",
        "js": {
            "type": [
                "javascript",
                "json"
            ],
            "filename": [
                ".jshintrc",
                ".jsbeautify"
            ]
        },
        "css": [
            "css",
            "scss"
        ],
        "html": [
            "htm",
            "html"
        ]
    },
    "css.validate": false,
    "scss.validate": false,
    "javascript.validate.enable": false
}

插件

Auto Rename Tag
-自動重命名配對的HTML / XML標籤
AutoFileName
-自動尋找檔案路徑

Beautify
-美化javascript, JSON, CSS, Sass, and HTML in Visual Studio Code.

// 將您的按鍵組合放入此檔案中以覆寫預設值
[
    {
        "key": "ctrl+f5",
        "command": "HookyQR.beautifyFile"
    }
]

Bracket Pair Colorizer
(), [], {} 顏色會不一樣
Document This
自動為TypeScript和JavaScript文件生成詳細的JSDoc註釋。
Ctrl+Alt+D 然後再次 Ctrl+Alt+D
file-icons
文件小圖, 看起來爽
filesize
檔案大小
Git History (git log)
查看git日誌, 圖形, 比較版本差異
GitLens
代碼導航, 顯示訊息, 比較檔案
shift+alt+b
HTML CSS Support
web必裝啊..
JavaScript (ES6) code snippets
可直接產生jsES6代碼片段, 要熟悉一下縮寫
縮寫 + tab
JavaScript Standard Style
javascript 標準樣式
markdownlint
當使用markdownlint編輯Markdown文件時，任何違反markdownlint規則的行將在編輯器中觸發警告。警告用波浪綠色下劃線表示
Material Theme
支持代碼顏色, 類似版本很多種, 挑個喜歡的就好
Output Colorizer
輸出顏色
Project Manager
案子切換管理
Sort lines
字母排序
F9
vscode-stylelint
css/scss/less 擴展到lint
TODO Highlight
TODO:, FIXME: 亮高顯示, 查詢
VSCode Great Icons
檔案小圖