VScode插件

vscode瀏覽器打開html,修改默認瀏覽器

1.vscode瀏覽器預覽open-in-browser

 

1.點擊拓展

2.輸入open in browser，選擇第一個

3.點擊安裝(筆者已安裝，因此顯示的禁用)

4.vscode怎麼修改默認瀏覽器

在安裝完open in browser插件後，在html代碼中鼠標右鍵能夠看到多了兩個打開選擇，點擊選項便可打開瀏覽器進行預覽。

Open in Default Browsers：使用默認瀏覽器打開  快捷鍵：alt+b

Open in Other Browsers：使用其餘瀏覽器打開  快捷鍵：alt+shift+b

 

那麼怎麼修改默認瀏覽器呢？

5.選擇文件---首選項---設置

 

 

輸入open-in-browser.default搜索

 

你會看到右側多了工做區設置，好比你想默認谷歌打開，那就設置默認瀏覽器爲chrome，若是是火狐，就設置firefox。設置完畢ctrl+s進行保存，就可了。

 

無效的狀況下能夠修改系統的默認瀏覽器試一下

 

 

四、自定義快捷鍵

 

1、打開vscode,選擇文件–首選項–用戶代碼片斷

 

2、在輸入框內輸入javascript類型，打開javascript.json文件

 

"Print to console": {
        "prefix": "c",  //本身定義的快捷鍵
        "body": [
            "console.log();",//快捷鍵要生成的代碼片斷
        ]
    }

5.Auto Rename Tag
　　自動完成另外一側標籤的同步修改

 

6.Auto Close Tag
　　自動閉合HTML/XML標籤

 

 

 

 

7.Bracket Pair Colorizer
　　給括號加上不一樣的顏色，便於區分不一樣的區塊，使用者能夠定義不一樣括號類型和不一樣顏色

 

 

 

 8.Markdown Preview Enhanced

　　實時預覽markdown，markdown使用者必備

 

 

 

 

9.Material Icon Theme

我的認爲最好的vscode圖標主題，支持更換不一樣色系的圖標，值得點出的是，該插件更新極其頻繁，基本和vscode更新頻率保持一致

 

10.Path Intellisense

自動提示文件路徑，支持各類快速引入文件

 

11.HTMLHint

　html代碼檢測

 

12.CSS Peek
　　使用此插件，你能夠追蹤至樣式表中 CSS 類和 id 定義的地方。當你在 HTML 文件中右鍵單擊選擇器時，選擇「 Go to Definition 和 Peek definition 」選項，它便會給你發送樣式設置的 CSS 代碼。

安裝完成後打開HTML文件，按住CTRL鍵同時移到鼠標到要查看樣式的類上就能夠看到該類的定義了。

 

 

 

跳轉到樣式的定義，按住CTRL鍵同時點擊樣式類的名稱或者在類的名稱上按F12鍵便可跳轉到樣式的定義。CSS Peek在開前端開發過程當中節省了好多查找樣式的時間，真的方便極了。

     

 

13.Prettier - Code formatter

 

 

 

 

配置.prettierrc.js

module.exports = {

  trailingComma: 'es5',

  tabWidth: 4,

  semi: true,

  singleQuote: true,

}

ctrl + shift + F 格式化文件，若是沒有生效，從新加載下Prettier插件！

14.Window Colors

每一個VSCode窗口均可以獨特意自動着色。

 

 

 

15.Reactjs code snippets

　　一個 React 自動補工具。

16. Vue VSCode Snippets

　　VUE代碼自動補全插件

17.quokka
　　一個調試工具插件，可以根據你正在編寫的代碼提供實時反饋。它易於配置，並可以預覽變量的函數和計算值結果。另外，在使用 JSX 或 TypeScript 項目中，它可以開箱即用

 

 

18.filesize
　　在底部狀態欄顯示當前文件大小，點擊後還能夠看到詳細建立、修改時間

 

 

19. vscode-icon

1. 　　讓 vscode 資源樹目錄加

20. 在node環境下運行js: code runner

21. 如今看到的是界面配置模式，點擊右上角的大括號（以下圖），能夠打開 settings.json 文件。

{
    // vscode默認啓用了根據文件類型自動設置tabsize的選項
    "editor.detectIndentation": false,
    // 從新設定tabsize
    "editor.tabSize": 4,
    // #值設置爲true時，每次保存的時候自動格式化；值設置爲false時，代碼格式化請按shift+alt+F
    "editor.formatOnSave": false,
    // #每次保存的時候將代碼按eslint格式進行修復
    "eslint.autoFixOnSave": true,
    // 添加 vue 支持
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    //  #讓prettier使用eslint的代碼格式進行校驗
    "prettier.eslintIntegration": true,
    //  #去掉代碼結尾的分號
    "prettier.semi": false,
    //  #使用帶引號替代雙引號
    "prettier.singleQuote": true,
    "prettier.tabWidth": 4,
    //  #讓函數(名)和後面的括號之間加個空格
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    // #這個按用戶自身習慣選擇
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    // #讓vue中的js按"prettier"格式進行格式化
    "vetur.format.defaultFormatter.js": "prettier",
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            // #vue組件中html代碼格式化樣式
            "wrap_attributes": "force-aligned", //也能夠設置爲「auto」，效果會不同
            "wrap_line_length": 200,
            "end_with_newline": false,
            "semi": false,
            "singleQuote": true
        },
        "prettier": {
            "semi": false,
            "singleQuote": true
        }
    },
    "[jsonc]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    // 格式化stylus, 需安裝Manta's Stylus Supremacy插件
    "stylusSupremacy.insertColons": false, // 是否插入冒號
    "stylusSupremacy.insertSemicolons": false, // 是否插入分號
    "stylusSupremacy.insertBraces": false, // 是否插入大括號
    "stylusSupremacy.insertNewLineAroundImports": false, // import以後是否換行
    "stylusSupremacy.insertNewLineAroundBlocks": false,
    "prettier.useTabs": true,
    "files.autoSave": "off",
    "explorer.confirmDelete": false,
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "diffEditor.ignoreTrimWhitespace": false // 兩個選擇器中是否換行
}