导入代码段

注意

由于代码段的导入将在 webpack 编译之前执行，因此你无法使用 webpack 中的路径别名，因此加载逻辑分为三层，node_modules > @（文档根目录） > 相对目录。

你可以通过下述的语法导入已经存在的文件中的代码段：

<<< ./filepath

它也支持 行高亮：

<<< ./filepath{highlightLines}

输入

<<< ./fragments/snippet.js{2}

输出

export default function () {
    // ..
}

为了只导入对应部分的代码，你也可运用 VS Code region。你可以在文件路径后方的 # 紧接着提供一个自定义的区域名称（预设为 snippet ）

输入

<<< ./fragments/snippet-with-region.js#snippet{1}

代码文件

// #region snippet
function foo () {
    return ({
      dest: '../../vuepress',
      locales: {
        '/': {
          lang: 'en-US',
          title: 'VuePress',
          description: 'Vue-powered Static Site Generator'
        },
        '/zh/': {
          lang: 'zh-CN',
          title: 'VuePress',
          description: 'Vue 驱动的静态网站生成器'
        }
      },
      head: [
        ['link', { rel: 'icon', href: `/logo.png` }],
        ['link', { rel: 'manifest', href: '/manifest.json' }],
        ['meta', { name: 'theme-color', content: '#3eaf7c' }],
        ['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
        ['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }],
        ['link', { rel: 'apple-touch-icon', href: `/icons/apple-touch-icon-152x152.png` }],
        ['link', { rel: 'mask-icon', href: '/icons/safari-pinned-tab.svg', color: '#3eaf7c' }],
        ['meta', { name: 'msapplication-TileImage', content: '/icons/msapplication-icon-144x144.png' }],
        ['meta', { name: 'msapplication-TileColor', content: '#000000' }]
      ]
    })
  }
  // #endregion snippet
  
  export default foo

输出

function foo () {
    return ({
      dest: '../../vuepress',
      locales: {
        '/': {
          lang: 'en-US',
          title: 'VuePress',
          description: 'Vue-powered Static Site Generator'
        },
        '/zh/': {
          lang: 'zh-CN',
          title: 'VuePress',
          description: 'Vue 驱动的静态网站生成器'
        }
      },
      head: [
        ['link', { rel: 'icon', href: `/logo.png` }],
        ['link', { rel: 'manifest', href: '/manifest.json' }],
        ['meta', { name: 'theme-color', content: '#3eaf7c' }],
        ['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
        ['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }],
        ['link', { rel: 'apple-touch-icon', href: `/icons/apple-touch-icon-152x152.png` }],
        ['link', { rel: 'mask-icon', href: '/icons/safari-pinned-tab.svg', color: '#3eaf7c' }],
        ['meta', { name: 'msapplication-TileImage', content: '/icons/msapplication-icon-144x144.png' }],
        ['meta', { name: 'msapplication-TileColor', content: '#000000' }]
      ]
    })
  }