自动化配置vscode的snippets

起因

今天开发时遇到一个问题调了许久，之后才发现是option的结构有问题。觉得这种样板代码不应该去写，而应该自动生成，所以就想着配一下vscode的snippets。

解决过程

小程序需要写的主要是页面组件和基础组件，所以写了两种样板代码

<template>
  <view></view>
</template>
<script>
  export default {
    fileType: 'page',
      config: {
        usingComponents:[
        ]
      },
      data: {
      },
      methods: {},
      onLoad() {
      }
  }
</script>
<style lang='scss'>
</style>

<template>
  <view></view>
</template>
<script>
  export default {
    fileType: 'component',
      config: {
      },
      properties: [
      ],
      data: {
      },
      methods: {}
  }
</script>
<style lang='scss'>
</style>

觉得这个snippets别的小伙伴也需要，所以想着分享出去。

在vscode中配置的步骤还是比较复杂的，需要先找到snippets的配置，然后找到对应的vue的配置，之后还需要根据要求的结构来配置。于是决定封装一个脚本，可以通过执行脚本来自动配置。

遇到的问题

代码的逻辑比较简单，就是把配置写入对应的文件，其中有一个需要特别注意的地方是node并不支持～的解析，需要自己拼接出home目录，我是使用正则表达式解析__dirname来做的，对于没有解析出username的会报错提示换一个执行路径。

//解析路径，获取用户名
const GET_USERNAME_REG = /\/Users\/(.[^\/]*)/
const getUserName = function(path) {
    return GET_USERNAME_REG.exec(path)[1];
}

let userName = getUserName(__dirname) 
if(!userName) {
    throw new Error('获取用户名失败，请在/Users/xxx/的路径下执行脚本')
}

最终效果是只需要执行这个脚本，在vscode里面就可以直接用page和comp这两个snippets了。

总结

解决一个卡了许久的问题之后，觉得样板代码应该生成而不是自己写，于是配置了vscode 的snippets，之后觉得别的小伙伴也需要用，就想着分享给其他小伙伴，因为配置还是有别繁琐的，于是写了一个小脚本来自动配置。

完整代码如下：

const fs = require('fs')

//解析路径，获取用户名
const GET_USERNAME_REG = /\/Users\/(.[^\/]*)/
const getUserName = function(path) {
    return GET_USERNAME_REG.exec(path)[1];
}

//写入文件
const writeFile = function(content, distPath) {
    fs.writeFileSync(distPath, content)
    console.log('写入文件成功：' + distPath );
}

//配置内容
const configContent = `
{
     "page snippts": {
        "prefix": "page",
        "body": [
            "<template>"+
            "  <view></view>"+
            "</template>"+
            "<script>"+
            "  export default {"+
            "    fileType: 'page',"+
            "      config: {"+
            "        usingComponents:["+
            "        ]"+
            "      },"+
            "      data: {"+
            "      },"+
            "      methods: {},"+
            "      onLoad() {"+
            "      }"+
            "  }"+
            "</script>"+
            "<style lang='scss'>"+
            "</style>"
        ],
        "description": "微信小程序单文件组件模版--page"
    },
    "component snippts": {
        "prefix": "comp",
        "body": [
            "<template>"+
            "  <view></view>"+
            "</template>"+
            "<script>"+
            "  export default {"+
            "    fileType: 'component',"+
            "      config: {"+
            "      },"+
            "      properties: ["+
            "        key: {"+
            "          type: String"+
            "        }"+
            "      ],"+
            "      data: {"+
            "      },"+
            "      methods: {}"+
            "  }"+
            "</script>"+
            "<style lang='scss'>"+
            "</style>"
        ],
        "description": "微信小程序单文件组件模版--component"
    }   
}
`;


function main () {
    let userName = getUserName(__dirname) 
    if(!userName) {
        throw new Error('获取用户名失败，请在/Users/xxx/的路径下执行脚本')
    }
    
    const distFilePath = '/Users/' +userName+ '/Library/Application Support/Code/User/snippets/vue.json';   
    
    writeFile(configContent, distFilePath)
    console.log('自动配置vscode snippets成功！')
}

main();