【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就可以了，是不是很方便呢，大家也設置起來吧~