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/n/297805.html