【VSCode】设置代码格式化插件Beautify

背景

开发过程中，经常由于一些代码的复制粘贴，或者编写时的一些不良习惯，导致代码可读性比较差，这个时候就需要一个代码格式化插件来帮助我们把不规范的代码格式化一下。VSCode中拥有大量的插件库，其中最具代表性的使用库就是Beautify了。

设置VUE代码模板

在我们开发过程中，难免会新建一些文件，那么可不可以当我们新建文件的时候，就把一些VUE文件中的基本信息给代入其中呢？比如，再比如一些钩子函数等，这样一来就可以帮我们节约很多时间。

有的，可以自由设置模板。操作如下。

如果之前没有新建过该后缀的代码片段，可以点击新建代码片段，点击后会提示你输入该文件的名称，格式是这样的，比如我们想新建vue为后缀的代码片段，则命名vue.json，然后回车以确认。

随后便可以在里面输入你的代码模板了，比如我输入的内容如下：

{"Print to console": {"prefix": "vue","body": ["<!-- $1 -->","<template>","<div class='$2'>$5</div>","</template>","","<script>","export default {","components: {},","data() {","return {","","};","},","computed: {},","watch: {},","methods: {","","},","created() {","","},","mounted() {","","},","beforeCreate() {}, ","beforeMount() {}, ","beforeUpdate() {}, ","updated() {}, ","beforeDestroy() {}, ","destroyed() {}, ","activated() {}, ","}","</script>","<style lang='scss' scoped>","$4","</style>"],"description": "vue template"}
}

保存内容后，可新建.vue文件，然后在文件中输入vue三个字母，随后敲一下Tab键，就可以发现新建的模板展示在我们面前了。

代码格式化

首先需要去vscode商店中安装Beautify，安装好了以后，按照如下步骤操作：

如果之前没有使用过beautify,可能不会有对应内容，此时将如下内容添加即可：

"beautify.language": {"js": {"type": ["javascript","json"],"filename": [".jshintrc",".jsbeautify"]},"html": ["html","vue" // 这里是针对vue的，其他的是我对应其他文件的配置]}

内容添加好后，将文件保存即可。注：此处可自行扩展更多后缀。

添加代码格式化规范

现在可以解析并位vue文件格式化代码了，但是具体按照什么规则来格式化代码呢？
根目录下新建.jsbeautifyrc文件。
然后填写如下内容：

{"brace_style": "none,preserve-inline","indent_size": 2,"indent_char": " ","jslint_happy": true,}

这些是一些基本配置，防止与eslint冲突，也可以按照自己的喜好定制修改，可查阅相关文档自行完成。

设置快捷键

【设置】-> 【键盘快捷方式】，然后按如下方式操作：

最后，按照提示用键盘输入你想要的快捷键，回车即可，这样就设置好了，这里我设置的是ctrl B,取Beautify首字母。这样，当下次想格式化代码的时候就直接Ctrl B就可以了，是不是很方便呢，大家也设置起来吧~