2 snippets vue 修改配置_自动化配置vscode的snippets

起因

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

解决过程

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

export default {

fileType: 'page',

config: {

usingComponents:[

]

},

data: {

},

methods: {},

onLoad() {

}

}

export default {

fileType: 'component',

config: {

},

properties: [

],

data: {

},

methods: {}

}

觉得这个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": [

""+

" "+

""+

"

" export default {"+

" fileType: 'page',"+

" config: {"+

" usingComponents:["+

" ]"+

" },"+

" data: {"+

" },"+

" methods: {},"+

" onLoad() {"+

" }"+

" }"+

""+

"

""

],

"description": "微信小程序单文件组件模版--page"

},

"component snippts": {

"prefix": "comp",

"body": [

""+

" "+

""+

"

" export default {"+

" fileType: 'component',"+

" config: {"+

" },"+

" properties: ["+

" key: {"+

" type: String"+

" }"+

" ],"+

" data: {"+

" },"+

" methods: {}"+

" }"+

""+

"

""

],

"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();