visiocode詳解

一、visiocode下載

Visiocode是一款十分強大的開源代碼編輯器，具有很多強大的功能。相較於其他的編輯器，它可以更方便和快速地進行調試、自動完成、快捷鍵設置等。這裡我們來講述如何下載visiocode。

1、首先進入visiocode官網（https://code.visualstudio.com/）點擊按鈕‘Download’下載visiocode。

2、下載完成後，進入安裝程序，根據提示進行安裝操作，安裝完成後就可以使用visiocode了。

二、visiocode生成頭代碼快捷鍵

在進行web開發的時候，需要編寫大量的html頭部代碼。visiocode提供了一個很便捷的方式，可以快速生成html頭代碼，大大提高了開發效率。

這裡推薦兩種生成頭代碼的方式，一種是通過設置用戶代碼片段，另一種是通過使用插件。下面我們分別詳細介紹。

1、通過設置用戶代碼片段

{
    "html header": {
        "prefix": "!head",
        "body": [
            "<!DOCTYPE html>",
            "<html lang='en'>",
            "<head>",
            "    <meta charset='UTF-8'>",
            "    <meta name='viewport' content='width=device-width, initial-scale=1.0'>",
            "    <meta http-equiv='X-UA-Compatible' content='ie=edge'>",
            "    <title>Document</title>",
            "</head>",
            "<body>",
            "",
            "</body>",
            "</html>"
        ],
        "description": "Generate html header quickly"
    }
}

代碼中的“prefix”是生成頭代碼的快捷鍵，這裡設置為“!head”，用戶在編輯器中輸入“!head”即可生成頭代碼。

2、通過使用插件

visiocode也提供了很多插件來幫助用戶提高開發效率。其中“HTML Boilerplate”插件可以生成HTML5的基本框架，內置了基本的head代碼，可以適用於大部分編寫HTML的情況。

使用方法：

點擊左側導航欄“擴展”，在搜索欄中輸入“HTML Boilerplate”，點擊安裝即可。安裝完成後輸入“html”感嘆號，即可生成HTML框架的頭代碼。

三、visiocode導入包

在進行開發的過程中，經常需要使用到第三方的庫或者自己編寫的模塊，這時就需要導入包。visiocode提供了很好的支持，用戶可以在編輯器中導入包來提高開發效率。

在進行開發時，在項目的根目錄下會有一個文件夾node_modules，所有的第三方包都會被存儲在這個文件夾下。通過導入包，用戶可以方便地使用這些第三方包。例如，如果我們想使用jquery這個包，可以在命令行中輸入“npm install jquery –save”。這樣，jquery就會被安裝並存放在node_modules文件夾中。

安裝完成後，在需要使用jquery的代碼中，通過require()函數導入即可，例如：

const $ = require('jquery');
$('div').click(function () {
    console.log('clicked');
});

四、visiocode快捷鍵

visiocode提供了很多的快捷鍵，可以幫助用戶快速完成開發工作。常用的快捷鍵列舉如下：

1. Cmd + Shift + P：打開命令面板。

2. Cmd + P：打開文件搜索。

3. Cmd + Shift + F：全局搜索。

4. Cmd + Shift + E：顯示側邊欄。

5. Ctrl + `：打開終端。

6. Cmd + B：切換左側導航欄的顯示與隱藏。

7. Cmd + Shift + X：打開擴展面板。

8. Cmd + Shift + G：顯示Git面板。

9. Ctrl + D：選中相同的詞。

10. Cmd + /：注釋和取消注釋。

五、visiocode 配置native

在進行開發的時候，經常需要進行編譯和調試等操作，使用visiocode可以很方便地進行這些操作。同時，由於許多Node.js模塊都是使用C++編寫的，所以我們需要為系統安裝Native編譯器。下面介紹如何進行配置。

1. Mac:

在終端中輸入“xcode-select –install”然後等待安裝即可。

2. Windows:

安裝Visual C++ Build Tools即可。

3. Linux:

使用命令sudo apt-get install build-essential安裝即可。

六、visiocode中head怎麼生成

visiocode可以很方便地生成HTML頭文件和CSS文件，這讓web開發變得非常簡單。下面介紹如何在visiocode中生成head文件。

1.在新建HTML文件的時候，visiocode會自動為文件添加HTML5的骨架，這個骨架包含了基本的head文件，代碼如下：




    
    Document

2.另外一種方式是使用上面提到的“用戶代碼片段”的方式，在settings.json文件中添加如下代碼：

{
    "files.autoSave": "afterDelay",
    "files.autoSaveDelay": 500,
    "emmet.triggerExpansionOnTab": true,
    "emmet.includeLanguages": {
        "javascript": "javascriptreact"
    },
    "editor.tabSize": 2,
    "html.header": {
        "description": "My awesome HTML header",
        "prefix": "!html",
        "body": [
            "",
            "",
            "",
            "\t",
            "\t",
            "\t",
            "\t$1",
            "\t$0",
            "",
            "",
            "\t$2",
            "",
            ""
        ]
    }
}

然後在編輯器中輸入“!html”即可快速生成head文件。

七、visiocode中文插件怎麼用

對於非英語用戶來說，在visiocode中使用中文插件會更加方便。visiocode中提供了很多中文插件，可以讓用戶以更加熟悉的方式使用編輯器。

使用方法：

1.在左邊導航欄中點擊擴展，在搜索框中搜索“Chinese Language Pack for Visual Studio Code”，點擊安裝即可。

2.安裝完成後，重新啟動visiocode即可使用中文環境。

總結

以上是對visiocode的詳細介紹。作為一款強大的代碼編輯器，visiocode提供了很多有用的工具和插件，可以讓開發者更加高效地進行開發，提升開發效率。希望以上內容能夠幫助開發者更好地使用visiocode。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/297805.html