.eslintrc文件配置 eslint-plugin-vue 插件
- 解析器使用vue-eslint-parser,注意babel-eslint必須寫在parserOptions裏面,配置如下:
parser: “vue-eslint-parser”,
parserOptions: {
parser: ‘babel-eslint’,
sourceType: ‘module’
}, - 插件使用vue,配置如下:
plugins: [ “vue” ], - eslint-plugin-vue插件有三種不同程度的規範:vue/vue3-essential、vue3-strongly-recommended、vue/vue3-recommended
以vue/vue3-recommended為例, 擴展配置如 extends: [‘plugin:vue/recommended’] - 配置屬於自己的html格式化規則
module.exports = {
root: true,
parser: "vue-eslint-parser",
parserOptions: {
parser: 'babel-eslint',
sourceType: 'module'
},
env: {
browser: true,
},
// https://github.com/standard/standard/blob/master/docs/RULES-en.md
extends: ['plugin:vue/recommended', 'standard'],
plugins: [
"vue"
],
// add your custom rules here
'rules': {
// allow debugger during development
'no-debugger': (process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'productionECSO') ? 2 : 0,
/* ************* eslint-plugin-vue ———— Strongly Recommended ***************** */
// 自定義組件-屬性名稱-連接符
// <MyComponent my-prop="prop" /> <----- <MyComponent myProp="prop" />
"vue/attribute-hyphenation": 0,
// 自定義組件名稱 - 駝峯和連字符
"vue/component-definition-name-casing": 0,
// html 閉括號-換行
"vue/html-closing-bracket-newline": [2, {
"singleline": "never",
"multiline": "always"
}],
// html 閉括號之前無空格
"vue/html-closing-bracket-spacing": 2,
// html 需要有結束標籤,除了自閉合標籤
"vue/html-end-tags": 2,
// 縮進
"vue/html-indent": 2,
// 屬性-引用-默認使用雙引號
"vue/html-quotes": 0,
// 自閉合標籤只能寫成這種形式 ----> <YourComponent/>
"vue/html-self-closing": 2,
// 標籤裏面每行屬性的個數--默認為1
"vue/max-attributes-per-line": [2, {
"singleline": 4,
"multiline": 4
}],
// 內容元素為多行,對稱換行
"vue/multiline-html-element-content-newline": 0,
// 內容元素為一行,換行
"vue/singleline-html-element-content-newline": 0,
// “Mustache”語法 (雙大括號) 必須有前後對稱的空格
"vue/mustache-interpolation-spacing": 0,
// 標籤裏面不允許多餘空格
"vue/no-multi-spaces": 2,
// 標籤內--屬性賦值--等號兩邊不允許空格
"vue/no-spaces-around-equal-signs-in-attribute": 0,
// v-for指令變量命名不允許歧義,比如:變量命令為l
"vue/no-template-shadow": 0,
// 一個文件導出一個組件
"vue/one-component-per-file": 0,
// props 接收的屬性名稱為駝峯形式
"vue/prop-name-casing": 0,
// props中如果沒有required,則需要提供默認屬性default
"vue/require-default-prop": 0,
// props 屬性需要聲明類型type
"vue/require-prop-types": 0,
// 默認使用冒號:,而不是v-bind:
"vue/v-bind-style": 2,
// 默認使用冒號@,而不是v-on:
"vue/v-on-style": 2,
// 默認使用冒號#,而不是v-slot:
"vue/v-slot-style": 0,
/* ************* eslint-plugin-vue ———— Recommended ***************** */
// 標籤裏面的屬性--順序
"vue/attributes-order": 0,
// <script>, <template> & <style> 標籤順序,默認: [["script", "template"], "style"]
"vue/component-tags-order": 0,
// <template>標籤中要有指令
"vue/no-lone-template": 0,
// 不允許使用v-html指令
"vue/no-v-html": 0,
// 綁定在 <slot> 的元素 ———— 插槽prop只能有一個參數
"vue/no-multiple-slot-args": 0,
// 組件聲明屬性的順序 ———— 默認順序:name、components、props、data、computed、watch、methods
"vue/order-in-components": 0,
// this 不允許出現在template中
"vue/this-in-template": 2,
/* ************* eslint-plugin-vue ———— Deprecated(已廢棄) ***************** */
// name屬性默認使用PascalCase帕斯卡命名法—— 首字母大寫,比如 name: 'MyComponent'
"vue/name-property-casing": 0,
/* ************* eslint-plugin-vue ———— Essential ***************** */
// props -- Array 或 Object,default屬性是個函數
"vue/require-valid-default-prop": 2,
/* ************* 新增 eslint 規則 ***************** */
// 文件末尾保留一行空行
'eol-last': 2,
// 禁用行尾空白
'no-trailing-spaces': 2,
// 不允許多個空行
'no-multiple-empty-lines': 2
}
}
本文章為轉載內容,我們尊重原作者對文章享有的著作權。如有內容錯誤或侵權問題,歡迎原作者聯繫我們進行內容更正或刪除文章。