.eslintrc配置目錄及配置項的使用方式
今天在運行antd-design-vue的源代碼項目時,發(fā)現(xiàn)vscode有很多eslint的報錯,原因是我使用了vetur插件的格式化,但是antd-design-vue源碼有自定義的eslintrc和prettierrc配置,這些配置和vetur插件里默認的配置不一致導(dǎo)致的。
那么如果有強迫癥,想消除這些檢查報錯我們就需要在源碼自定義的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 語言選項
"parserOptions": {
// ECMAScript 版本
"ecmaVersion": 6,
"sourceType": "module", //設(shè)置為 "script" (默認) 或 "module"(如果你的代碼是 ECMAScript 模塊)。
//想使用的額外的語言特性:
"ecmaFeatures": {
// 允許在全局作用域下使用 return 語句
"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ī)則,使用警告級別的錯誤:warn (不會導(dǎo)致程序退出),
* "error" 或 2 - 開啟規(guī)則,使用錯誤級別的錯誤:error (當(dāng)被觸發(fā)的時候,程序會退出)
*/
"rules": {
// 可能的錯誤
// 禁止條件表達式中出現(xiàn)賦值操作符
"no-cond-assign": 2,
// 禁用 console
// ...其他規(guī)則
}
}
規(guī)則文檔
eslint-plugin-vue規(guī)則文檔地址:eslint-plugin-vue文檔
通用的eslint規(guī)則可以看下:開發(fā)者文檔
eslint問題如下

直接點擊打開報錯是給的外部鏈接,他會直接調(diào)到規(guī)則的說明下
還有相關(guān)的案例說明

在下面的Options里有這個規(guī)則的配置方法。直接復(fù)制進.eslintrc文件就行了,有時候ignores配置會報錯,最簡單的就是把這個報錯的地方刪了。
{
"vue/singleline-html-element-content-newline": ["error", {
"ignoreWhenNoAttributes": true,
"ignoreWhenEmpty": true,
"ignores": ["pre", "textarea", ...INLINE_ELEMENTS]
}]
}
Options下還有關(guān)于每個參數(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
看不懂的可以翻譯下,簡單說就是詳細的配置,正常不會用到,最重要的配置就是這個error,也可以簡寫‘2’,這樣就開啟規(guī)則,還可以設(shè)置off/warn,具體差別看上面的 .eslintrc文件配置介紹 ,這樣你就可以配置屬于你得代碼規(guī)范了。
都看到這了,不妨再點進來學(xué)習(xí)下=》.prettierrc代碼格式化配置介紹
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Bootstrap+Vue滑動監(jiān)聽Scrollspy實現(xiàn)餐廳餐品展示
本文主要介紹了Bootstrap+Vue滑動監(jiān)聽Scrollspy實現(xiàn)餐廳餐品展示,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03

