自定義你的VSCode:主題、文件圖標、快捷鍵、設置、schema、插件


  1. 請記住一點,VSCode中的一切快捷鍵操作都可以在控制面板中輸入對應的命令來完成,並且常用命令還可以在菜單欄中找到,命令其實就是簡單的英文詞語,如果有一定的英語基礎,是很容易記住大概命令的,而這就足夠了(控制面板中支持模糊搜索)
  2. 額,如果你懶得去記憶這些內容,那麼…收藏本文並點個贊也許是個好主意
  3. 以下設置實質上都是通過命令修改配置文件

你可以通過以下設置來自定義你的VSCode

  • 改變主題
  • 更改鍵盤快捷鍵
  • 設置
  • 添加 JSON schema validation
  • 安裝擴展

主題

改變主題

(1)打開該命令的四種方式

方法一:鍵盤快捷鍵:Ctrl + K Ctrl + T(按住Ctrl不動,先按K,再按T)

方法二:鍵盤快捷鍵:Ctrl + Shift + P,在控制面板中輸入color theme

方法三:菜單:File > Preferences > Color Theme

方法四:左下角齒輪

(2)選擇主題

  • 在下拉列表中列出所有你能使用的主題
  • 上半部分爲亮主題,中間部分爲暗主題,下半部分爲高對比度主題
  • 如果默認提供的主題不能滿足你的需求,可以下載主題插件(請下拉到底部,有對應插件的傳送門)

改變文件圖標主題

(1)打開該命令的三種方式

方法一:鍵盤快捷鍵:Ctrl + Shift + P,在控制面板中輸入file icon theme,輸入命令的一部分後,下拉列表中就會出現匹配的命令

方法二:菜單:File > Preferences > File Icon Theme

方法三:左下角齒輪 > File Icon Theme

(2)選擇文件圖標主題

  • 在下拉列表中列出所有你能使用的文件圖標主題
  • 如果默認提供的文件圖標主題不能滿足你的需求,可以下載文件圖標主題插件

快捷鍵

自定義快捷鍵

(1)打開該命令的三種方式

方法一:鍵盤快捷鍵:Ctrl + K Ctrl + S(按住Ctrl不動,先按K,再按S)

方法二:菜單:File > Preferences > Keyboard Shortcuts

方法三:左下角齒輪 > Keyboard Shortcuts

(2)自定義快捷鍵
在這裏插入圖片描述
如果你願意則折騰的話,祝你好運~

下載快捷鍵插件

你是否習慣使用其他編輯器的鍵盤快捷鍵?你可以安裝一個鍵盤快捷鍵擴展程序,將你喜歡的編輯器中的鍵盤快捷方式帶到VS Code

打開該命令的四種方式

方法一:鍵盤快捷鍵:Ctrl + K Ctrl + M(按住Ctrl不動,先按K,再按M)

方法二:菜單:File > Preferences > Keymaps

方法三:左下角齒輪 > Keymaps

方法四:直接在插件商城中搜索@recommended:keymaps

設置

VS Code提供了兩種不同的設置範圍:用戶設置與工作空間設置

  • 用戶設置(User Settings):適用於您打開的任何VS Code實例(文件、文件夾、項目、工作區)
  • 工作空間設置(Workspace Settings):存儲在工作空間中的設置僅在打開工作空間時適用,並且可以在項目的開發人員之間共享,工作空間設置會覆蓋用戶的設置

VS Code工作空間通常只是您的項目根文件夾,其根目錄下的.vscode文件夾下一般包含三個文件(不是一定有哦):

  1. settings.json :工作空間設置
  2. launch.json :用於調試
  3. tasks.json :一般在VSCode中編寫非內置的語言代碼時需要配置該文件
    • 比如說配置C/C++工作區,必定先要配置該文件才能編譯、運行C/C++代碼;
    • 但也不是所有語言都需要配置該文件。比如配置Python工作區並不需要該文件,直接在settings.json文件中配置python.exe的路徑即可

(1)打開設置的四種方式

方法一:鍵盤快捷鍵:Ctrl + ,

方法二:菜單:File > Preferences > Settings

方法三:左下角齒輪 > Settings

前三個方法打開的都是圖形化界面(設置編輯器)

方法四:鍵盤快捷鍵:Ctrl + Shift + P,在控制面板中輸入settings,在下拉菜單中選擇你需要設置的目標

你可以看到,設置的操作方式分爲UI(圖形空戶界面)、JSON(配置文件),

下面我會列出配置JSON文件的常用設置:

(2)控制面板中,輸入settings.json,打開用戶設置

常用設置

➢ 更改各種UI元素的字體大小

單位爲像素(px)

//主要編輯區
"editor.fontSize": 18,

// 終端面板
"terminal.integrated.fontSize": 14,

// 輸出面板
"[Log]": {
    "editor.fontSize": 15,
}

➢ 更改縮放比例

//按住Ctrl鍵,配合鼠標滾輪放大或縮小編輯器字體大小
"editor.mouseWheelZoom":true,

//縮放等級,默認爲 0
"window.zoomLevel": 0,

➢ 字體連字

比如說,你在VSCode中輸入大於等於號,是這樣的:>=

設置了字體連字的字體後,是這樣的:

"editor.fontLigatures": true,
"editor.fontFamily": "Fira Code",
  • 你將需要安裝支持字體連字的字體
  • FiraCode是VS Code 推薦的一種字體(支持連字),你電腦上如果無此字體,可以在 FiraCode 頁面中下載
  • 首先將字體下載到電腦上,然後在VSCode中進行相應設置並保存文件,最後重啓VSCode即可

➢ 自動保存

//自動保存
"files.autoSave": "afterDelay",

你也可以,菜單:File > Auto Save

➢ 保存時格式化

//保存時格式化
"editor.formatOnSave": true,

➢ 粘貼時保留格式

//粘貼時保留格式
"editor.formatOnPaste": true,

➢ 更改制表符(Tab鍵)的大小

//一個製表符等於四個空格
"editor.tabSize": 4,

➢ 渲染空白

//空格符的渲染
"editor.renderWhitespace": "selection",

有四個值,請根據實際需求更改:

  • 默認值爲"selection",只在文本選擇中渲染空白字符(以虛化的圓點顯示),
    在這裏插入圖片描述
    不對其進行修改,即使用默認值,代碼界面是最舒服的

  • none,空格符不進行渲染,就是空白

  • boundary,只渲染邊界處的空格符

  • all,任意空格符都被渲染爲虛化的圓點

➢ 忽略文件/文件夾

//從編輯器窗口中忽略這些文件/文件夾
"files.exclude": {
    "somefolder/": true,
    "somefile": true,
}

//從搜索結果中忽略這些文件/文件夾
"search.exclude": {
    "someFolder/": true,
    "somefile": true,
}
  • somefolder/ 就是填寫你需要忽略的文件夾名
  • somefile 就是填寫你需要忽略的文件名

特定於語言的設置

  • 按語言定製編輯器,你可以按語言標識符確定設置的範圍。你可以在 語言標識符參考中找到常用語言ID的列表
"[languageid]": {

}
  • 如果你懶的去查看語言標識符參考,還可以在控制面板中輸入Configure Language Specific Settings

    打開語言選擇器

    選擇所需的語言(比如Python),會自動打開用戶設置settings.json文件

    你可以在其中添加適用的設置

關於設置這方面,我就講這麼多了,如果你有更進一步的需求,可以查閱https://code.visualstudio.com/docs/getstarted/settings#_default-settings

添加JSON schema validation

  • 默認情況下對許多文件類型啓用
  • 在settings.json中創建自己的 schema(指出如何形式描述XML文檔元素的一個標準) 和 validation(驗證)
"json.schemas": [
    {
        "fileMatch": [
            "/bower.json"
        ],
        "url": "http://json.schemastore.org/bower"
    }
]

或用於工作空間(workspace)中定義的 schema

"json.schemas": [
    {
        "fileMatch": [
            "/foo.json"
        ],
        "url": "./myschema.json"
    }
]

或者自定義 schema

"json.schemas": [
    {
        "fileMatch": [
            "/.myconfig"
        ],
        "schema": {
            "type": "object",
            "properties": {
                "name" : {
                    "type": "string",
                    "description": "The name of the entry"
                }
            }
        }
    }
]

想更深入的配置JSON,請參考JSON官方文檔

擴展插件

擴展插件不是越多越好,而是精益求精!!!

打開擴展管理的四種方式

方法一:鍵盤快捷鍵:Ctrl + Shift + X

方法二:菜單:File > Preferences > Extensions

方法三:左下角齒輪 > Extensions

方法四:視圖

注意到插件欄右上角的三個點(…)了嗎,


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章