快捷導(dǎo)航

.eslintrc配置目錄及配置項(xiàng)的使用方式

更新時(shí)間：2022年10月25日 08:54:13 作者：高素質(zhì)車間工人

這篇文章主要介紹了.eslintrc配置目錄及配置項(xiàng)的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

今天在運(yùn)行antd-design-vue的源代碼項(xiàng)目時(shí)，發(fā)現(xiàn)vscode有很多eslint的報(bào)錯(cuò)，原因是我使用了vetur插件的格式化，但是antd-design-vue源碼有自定義的eslintrc和prettierrc配置，這些配置和vetur插件里默認(rèn)的配置不一致導(dǎo)致的。

那么如果有強(qiáng)迫癥，想消除這些檢查報(bào)錯(cuò)我們就需要在源碼自定義的eslintrc和prettierrc配置里修改相應(yīng)的配置。

.eslintrc文件配置介紹

{
    // 環(huán)境定義了預(yù)定義的全局變量。
    "env": {
        //環(huán)境定義了預(yù)定義的全局變量。更多在官網(wǎng)查看
        "browser": true,
        "node": true,
        "commonjs": true,
        "amd": true,
        "es6": true,
        "mocha": true
    },
    // JavaScript 語(yǔ)言選項(xiàng)
    "parserOptions": {
        // ECMAScript 版本
        "ecmaVersion": 6,
        "sourceType": "module", //設(shè)置為 "script" (默認(rèn)) 或 "module"（如果你的代碼是 ECMAScript 模塊)。
        //想使用的額外的語(yǔ)言特性:
        "ecmaFeatures": {
            // 允許在全局作用域下使用 return 語(yǔ)句
            "globalReturn": true,
            // impliedStric
            "impliedStrict": true,
            // 啟用 JSX
            "jsx": true,
            "modules": true
        }
    },
    //-----讓eslint支持 JSX start
    "plugins": [
        "react"
    ],
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended"
    ],
    //-----讓eslint支持 JSX end


    /**
     * "off" 或 0 - 關(guān)閉規(guī)則
     * "warn" 或 1 - 開啟規(guī)則，使用警告級(jí)別的錯(cuò)誤：warn (不會(huì)導(dǎo)致程序退出),
     * "error" 或 2 - 開啟規(guī)則，使用錯(cuò)誤級(jí)別的錯(cuò)誤：error (當(dāng)被觸發(fā)的時(shí)候，程序會(huì)退出)
     */
    "rules": {
        // 可能的錯(cuò)誤 
        // 禁止條件表達(dá)式中出現(xiàn)賦值操作符
        "no-cond-assign": 2,
        // 禁用 console
        // ...其他規(guī)則
    }
}

規(guī)則文檔

eslint-plugin-vue規(guī)則文檔地址：eslint-plugin-vue文檔

通用的eslint規(guī)則可以看下：開發(fā)者文檔

eslint問題如下

eslint

直接點(diǎn)擊打開報(bào)錯(cuò)是給的外部鏈接，他會(huì)直接調(diào)到規(guī)則的說明下

還有相關(guān)的案例說明

在下面的Options里有這個(gè)規(guī)則的配置方法。直接復(fù)制進(jìn).eslintrc文件就行了，有時(shí)候ignores配置會(huì)報(bào)錯(cuò)，最簡(jiǎn)單的就是把這個(gè)報(bào)錯(cuò)的地方刪了。

{
  "vue/singleline-html-element-content-newline": ["error", {
    "ignoreWhenNoAttributes": true,
    "ignoreWhenEmpty": true,
    "ignores": ["pre", "textarea", ...INLINE_ELEMENTS]
  }]
}

Options下還有關(guān)于每個(gè)參數(shù)的介紹：

ignoreWhenNoAttributes … allows having contents in one line, when given element has no attributes. default true

ignoreWhenEmpty … disables reporting when element has no content. default true

ignores … the configuration for element

看不懂的可以翻譯下，簡(jiǎn)單說就是詳細(xì)的配置，正常不會(huì)用到，最重要的配置就是這個(gè)error，也可以簡(jiǎn)寫‘2’，這樣就開啟規(guī)則，還可以設(shè)置off/warn，具體差別看上面的 .eslintrc文件配置介紹 ，這樣你就可以配置屬于你得代碼規(guī)范了。

都看到這了，不妨再點(diǎn)進(jìn)來學(xué)習(xí)下=》.prettierrc代碼格式化配置介紹

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: