VS code的常用配置以及插件的應用


一.插入代碼段和字體設置:

{
  "editor.fontFamily": "宋體",
  "editor.fontSize": 16,
  "editor.snippetSuggestions": "top"
}

 

二、代碼提示快捷鍵設置:

 

[
    {
        "key": "ctrl+j",
        "command": "-workbench.action.togglePanel"
    },
    {
        "key": "ctrl+j",
        "command": "editor.action.triggerSuggest",
        "when": "editorHasCompletionItemProvider && editorTextFocus && !editorReadonly"
    }
]

三。綜合配置文件

 

"editor.fontFamily": "宋體",
    "editor.fontSize": 16,
    "editor.formatOnSave": true,
    "files.autoSave": "off",
    "prettier.printWidth": 120,
    "workbench.iconTheme": "vscode-icons",
    "git.enableSmartCommit": true,
    "workbench.colorTheme": "Visual Studio Light",
    "git.autofetch": true,
    "window.zoomLevel": 0,
 "todohighlight.isEnable": true

 

四。一些常用的前端插件

 

Auto Rename Tag

 

  自動重命名配對的HTML / XML標簽

 

bachground

 

  修改背景,設置編輯器界面的背景圖片。但是好像現在會出錯,具體設置內容在vsc找到插件看詳細信息。

 

Bootstrap 4 & Font awesome snippets

 

  bootstrap4和font awesome 快速引用和代碼生成。

 

Color-Highlight

 

  在編輯器中高亮顯示顏色。

 

Color Picker

 

  代碼的顏色選擇器。

 

Css Peek

 

  能在源代碼中的字符串中找到對應的css(類和ID)。顯示在那個css文件里,還有在第幾行。

 

Csscomb

 

  css 、less、sass 的代碼格式化。

 

Debugger for Chrome

 

  js調試的插件,前端項目在Chrome中運行起來之后,可以直接在VSCode中打斷點、查看輸出、查看控制台,詳細配置見插件說明。

 

Document This

 

  為js文件生成文檔的代碼注釋。

 

 ESLint

 

  檢查Javascript編程時的語法錯誤。

 

Git Easy

 

  增加了vscode中自帶的git操作,安裝后按F1調出控制台,輸入git easy [options]完成git操作,代替git bash。

 

Git History 

 

  查看git日志以及圖表和詳細信息。
  查看文件的歷史記錄(Git日志)或文件中的行歷史(Git Blame)

 

Guides

 

  代碼的標簽對齊線。

 

HTML CSS Class Completion

 

  為基於工作空間上的CSS文件的HTML類屬性提供CSS類名稱提示。

 

HTML Boilerplate

 

  提供生成標准HTML樣板代碼。

 

HTML CSS support

 

  css 自動補齊

 

HTML Snippets

 

  支持HTML5標簽提示

 

JavaScript (ES6) snippets

 

   支持JavaScript  ES6 語法

 

jQuery Code Snippets

 

   jq代碼段提示。

 

JS-CSS-HTML  Formatter

 

  代碼格式化。

 

Lodash

 

  lodash 函數提示。

 

Lorem ipsum

 

  快速填充文本

 

Npm Intellisense

 

  在import語句中自動完成npm模塊引入的代碼插件。

 

open in browser

 

  在瀏覽器中打開,安裝后在左側目錄中右鍵點擊會出現 open in browser 選項。

 

Path Intellisense

 

  文件路徑提示。

 

Settings Sync

 

  編輯器設置同步,包括插件,配置等。

 

  詳情點擊=》https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync

 

VS Code CSS Comments

 

  css代碼注釋。

 

vscode-browser-plugin

 

  在編輯器內預覽HTML,

 

  通過開啟端口(3000)監聽當前打開項目的根目錄,在編輯器內預覽網站,省去了頻繁切換瀏覽器、編輯器看頁面效果,修改代碼后自動刷新頁面。

 

vscode-icons

 

  文件圖標。

 

Vue 2 Snippets

 

   vue 代碼提示,高亮。

 

  (ps:使用其他框架,直接搜就好,像是react,angular,就會出現相關的代碼提示和語法支持常用插件)

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM