目錄

一、前言

二、插件位置

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

2.點(diǎn)擊“安裝新插件”------>"前往插件市場安裝"

?3.插件市場搜索eslint----->點(diǎn)擊下載------>使用HBuilderX導(dǎo)入插件

?三、小結(jié)

四、補(bǔ)充

一、前言

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

二、插件位置

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

2.點(diǎn)擊“安裝新插件”------>"前往插件市場安裝"

?3.插件市場搜索eslint----->點(diǎn)擊下載------>使用HBuilderX導(dǎo)入插件

?3.1.eslint.js: 用于js和html中的代碼校驗(yàn)

3.2.eslint-plugin-vue:用于vue內(nèi)的代碼校驗(yàn)

（因此兩個(gè)都需要下載）

?

?

?

4. 下載后找到設(shè)置--->工具--->插件配置---->保存時(shí)自動(dòng)修復(fù)

?三、小結(jié)

至此自動(dòng)保存代碼插件下載配置已經(jīng)完成。

四、補(bǔ)充

因?yàn)槊總€(gè)人的代碼習(xí)慣不同，格式化代碼要求也有所不一，想要依據(jù)自己的習(xí)慣進(jìn)行細(xì)節(jié)配置可以繼續(xù)看

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

?2.自定義校驗(yàn)規(guī)則

?3.可根據(jù)需要自行尋找符合自己需求的配置信息復(fù)制到自己的setting.js

//更詳細(xì)的配置文檔請(qǐng)參考：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',
        //不允許重復(fù)的keys
        'vue/no-dupe-keys': 'error',
        //不允許重復(fù)的attributes
        'vue/no-duplicate-attributes': 'warn',
        //在 <template> 標(biāo)簽下不允許解析錯(cuò)誤
        'vue/no-parsing-error': ['error',{
            'x-invalid-end-tag': false,
        }],
        //不允許覆蓋保留關(guān)鍵字
        'vue/no-reserved-keys': 'error',
        //強(qiáng)制data必須是一個(gè)帶返回值的函數(shù)
        // 'vue/no-shared-component-data': 'error',
        //不允許在computed properties中出現(xiàn)副作用。
        'vue/no-side-effects-in-computed-properties': 'error',
        //<template>不允許key屬性
        'vue/no-template-key': 'warn',
        //在 <textarea> 中不允許mustaches
        'vue/no-textarea-mustache': 'error',
        //不允許在v-for或者范圍內(nèi)的屬性出現(xiàn)未使用的變量定義
        'vue/no-unused-vars': 'warn',
        //<component>標(biāo)簽需要v-bind:is屬性
        'vue/require-component-is': 'error',
        // render 函數(shù)必須有一個(gè)返回值
        'vue/require-render-return': 'error',
        //保證 v-bind:key 和 v-for 指令成對(duì)出現(xiàn)
        'vue/require-v-for-key': 'error',
        // 檢查默認(rèn)的prop值是否有效
        'vue/require-valid-default-prop': 'error',
        // 保證computed屬性中有return語句 
        'vue/return-in-computed-property': 'error',
        // 強(qiáng)制校驗(yàn) template 根節(jié)點(diǎn)
        'vue/valid-template-root': 'error',
        // 強(qiáng)制校驗(yàn) v-bind 指令
        'vue/valid-v-bind': 'error',
        // 強(qiáng)制校驗(yàn) v-cloak 指令
        'vue/valid-v-cloak': 'error',
        // 強(qiáng)制校驗(yàn) v-else-if 指令
        'vue/valid-v-else-if': 'error',
        // 強(qiáng)制校驗(yàn) v-else 指令 
        'vue/valid-v-else': 'error',
        // 強(qiáng)制校驗(yàn) v-for 指令
        'vue/valid-v-for': 'error',
        // 強(qiáng)制校驗(yàn) v-html 指令
        'vue/valid-v-html': 'error',
        // 強(qiáng)制校驗(yàn) v-if 指令
        'vue/valid-v-if': 'error',
        // 強(qiáng)制校驗(yàn) v-model 指令
        'vue/valid-v-model': 'error',
        // 強(qiáng)制校驗(yàn) v-on 指令
        'vue/valid-v-on': 'error',
        // 強(qiáng)制校驗(yàn) v-once 指令
        'vue/valid-v-once': 'error',
        // 強(qiáng)制校驗(yàn) v-pre 指令
        'vue/valid-v-pre': 'error',
        // 強(qiáng)制校驗(yàn) v-show 指令
        'vue/valid-v-show': 'error',
        // 強(qiáng)制校驗(yàn) v-text 指令
        'vue/valid-v-text': 'error',
        'vue/comment-directive': 0
    }
};

?4.自己的setting.js文章來源地址http://www.zghlxwxcb.cn/news/detail-401935.html

到了這里，關(guān)于[HBuilderX開發(fā)uniapp]自動(dòng)代碼格式化插件安裝及配置的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！