[HBuilderX開發uniapp]自動代碼格式化插件安裝及配置

目錄

一、前言

二、插件位置

1.在HBuilderX中找到工具------>插件安裝​

2.點選“安裝新插件”------>"前往插件市場安裝"

 3.插件市場搜尋eslint----->點選下載下傳------>使用HBuilderX導入插件

 三、小結

四、補充

一、前言

HBuilderX作為H5 web開發的IDE其使用的普及化大幅提高，在應用中為使代碼更加優美明晰，自動化格式代碼插件的配置在我們編譯過程中為我們提供極大的便利

二、插件位置

1.在HBuilderX中找到工具------>插件安裝

2.點選“安裝新插件”------>"前往插件市場安裝"

 3.插件市場搜尋eslint----->點選下載下傳------>使用HBuilderX導入插件

 3.1.eslint.js: 用于js和html中的代碼校驗

3.2.eslint-plugin-vue:用于vue内的代碼校驗

（是以兩個都需要下載下傳）

4. 下載下傳後找到設定--->工具--->插件配置---->儲存時自動修複

 三、小結

至此自動儲存代碼插件下載下傳配置已經完成。

四、補充

因為每個人的代碼習慣不同，格式化代碼要求也有所不一，想要依據自己的習慣進行細節配置可以繼續看

1.工具--->插件安裝--->已安裝插件--->配置

 2.自定義校驗規則

 3.可根據需要自行尋找符合自己需求的配置資訊複制到自己的setting.js

//更詳細的配置文檔請參考：https://github.com/vuejs/eslint-plugin-vue#gear-configs
module.exports = {
    "extends": "plugin:vue/base",
    parserOptions: {
        ecmaVersion: 2017,
        sourceType: 'module'
    },
    'settings': {
        'html/html-extensions': [
          ".erb",
          ".handlebars",
          ".hbs",
          ".htm",
          ".html",
          ".mustache",
          ".nunjucks",
          ".php",
          ".tag",
          ".twig",
          ".wxml",
          ".we",
        ]
    },
    "rules":{
        //在computed properties中禁用異步actions
        'vue/no-async-in-computed-properties': 'error',
        //不允許重複的keys
        'vue/no-dupe-keys': 'error',
        //不允許重複的attributes
        'vue/no-duplicate-attributes': 'warn',
        //在 <template> 标簽下不允許解析錯誤
        'vue/no-parsing-error': ['error',{
            'x-invalid-end-tag': false,
        }],
        //不允許覆寫保留關鍵字
        'vue/no-reserved-keys': 'error',
        //強制data必須是一個帶傳回值的函數
        // 'vue/no-shared-component-data': 'error',
        //不允許在computed properties中出現副作用。
        'vue/no-side-effects-in-computed-properties': 'error',
        //<template>不允許key屬性
        'vue/no-template-key': 'warn',
        //在 <textarea> 中不允許mustaches
        'vue/no-textarea-mustache': 'error',
        //不允許在v-for或者範圍内的屬性出現未使用的變量定義
        'vue/no-unused-vars': 'warn',
        //<component>标簽需要v-bind:is屬性
        'vue/require-component-is': 'error',
        // render 函數必須有一個傳回值
        'vue/require-render-return': 'error',
        //保證 v-bind:key 和 v-for 指令成對出現
        'vue/require-v-for-key': 'error',
        // 檢查預設的prop值是否有效
        'vue/require-valid-default-prop': 'error',
        // 保證computed屬性中有return語句 
        'vue/return-in-computed-property': 'error',
        // 強制校驗 template 根節點
        'vue/valid-template-root': 'error',
        // 強制校驗 v-bind 指令
        'vue/valid-v-bind': 'error',
        // 強制校驗 v-cloak 指令
        'vue/valid-v-cloak': 'error',
        // 強制校驗 v-else-if 指令
        'vue/valid-v-else-if': 'error',
        // 強制校驗 v-else 指令 
        'vue/valid-v-else': 'error',
        // 強制校驗 v-for 指令
        'vue/valid-v-for': 'error',
        // 強制校驗 v-html 指令
        'vue/valid-v-html': 'error',
        // 強制校驗 v-if 指令
        'vue/valid-v-if': 'error',
        // 強制校驗 v-model 指令
        'vue/valid-v-model': 'error',
        // 強制校驗 v-on 指令
        'vue/valid-v-on': 'error',
        // 強制校驗 v-once 指令
        'vue/valid-v-once': 'error',
        // 強制校驗 v-pre 指令
        'vue/valid-v-pre': 'error',
        // 強制校驗 v-show 指令
        'vue/valid-v-show': 'error',
        // 強制校驗 v-text 指令
        'vue/valid-v-text': 'error',
        'vue/comment-directive': 0
    }
};
           

 4.自己的setting.js