第三方的配置文件

其實(shí)有些配置是默認(rèn)了算墨，但是這些文件優(yōu)先級(jí)會(huì)較高，起到覆蓋作用

至于為什么么還需要配置汁雷，主要是適應(yīng)我們的編程習(xí)慣净嘀。而vuecli配置的這些一般都適應(yīng)大部分人的編程習(xí)慣报咳。包括我。

.browserslistrc (瀏覽器的適配)

Browserslist 的數(shù)據(jù)都是來(lái)自Can I Use的挖藏。

其他參數(shù)可參考他的官網(wǎng)

.editorconfig

編輯器的配置

以下是vscode支持的規(guī)則

# 匹配全部文件
[*]
# 結(jié)尾換行符暑刃，可選"lf"、"cr"膜眠、"crlf"
end_of_line = lf
# 在文件結(jié)尾插入新行
insert_final_newline = true
# 刪除一行中的前后空格
trim_trailing_whitespace = true
# 匹配js和py結(jié)尾的文件
[*.{js,py}]
# 設(shè)置字符集
charset = utf-8

# 匹配py結(jié)尾的文件
[*.py]
# 縮進(jìn)風(fēng)格岩臣，可選"space"、"tab"
indent_style = space
# 縮進(jìn)的空格數(shù)
indent_size = 4

# 以下匹配宵膨，類同
[Makefile]
indent_style = tab
# tab的寬度
tab_width = 4

# 以下匹配架谎，類同
[lib/**.js]
indent_style = space
indent_size = 2

[{package.json,.travis.yml}]
indent_style = space
indent_size = 2

.eslintrc.js (代碼校驗(yàn)的配置)

由于我們創(chuàng)建項(xiàng)目的時(shí)候選擇了使用這個(gè)插件。所以這里就有了這個(gè)配置文件辟躏，它是針對(duì)與代碼風(fēng)格的校驗(yàn)谷扣。這個(gè)主要體現(xiàn)在團(tuán)隊(duì)協(xié)作時(shí)強(qiáng)制統(tǒng)一編碼風(fēng)格。當(dāng)然捎琐，如果只是你一個(gè)人的項(xiàng)目大可不必用它会涎，用它的最大好處就是提高自己的編碼風(fēng)格和出錯(cuò)率。不用為缺少分號(hào)抓耳撓腮野哭。因?yàn)樗梢远ㄎ诲e(cuò)誤在塔。

默認(rèn)配置

我個(gè)人的配置如下

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint',
    sourceType: 'module' // js的導(dǎo)入方式幻件，這里指以模塊方式導(dǎo)入
  },
  env: {
    browser: true,
    node: true,
    es6: true,
  }, //eslint:recommended:表示引入eslint的核心功能拨黔，并且報(bào)告一些常見(jiàn)的共同錯(cuò)誤。
  extends: ['plugin:vue/recommended', 'eslint:recommended'],

  rules: {
   // 設(shè)置每行最大屬性數(shù)
    'vue/max-attributes-per-line': [2, {
    'singleline': 10, // 標(biāo)簽為單行時(shí)绰沥，每行最大屬性數(shù)值為 10篱蝇，默認(rèn)值為 1
    'multiline': {
    'max': 1, // 標(biāo)簽為多行時(shí)，每行最大屬性數(shù)字為 1徽曲，默認(rèn)值為 1
    'allowFirstLine': false // 不允許屬性與該標(biāo)記名稱位于同一行零截，默認(rèn)值為 false
    }
    }],
    // 禁用單行標(biāo)簽內(nèi)容需換行的校驗(yàn)
    'vue/singleline-html-element-content-newline': 'off',
    // 禁用多行標(biāo)簽內(nèi)容需換行的校驗(yàn)
    'vue/multiline-html-element-content-newline':'off',
    // 組件 name 屬性值必須使用帕斯卡命名法（單詞首字母大寫）
    'vue/name-property-casing': ['error', 'PascalCase'],
    // 禁用禁止使用 v-html 的校驗(yàn)
    'vue/no-v-html': 'off',
    // 對(duì)象必須使用 getter / setter 對(duì)，即：每個(gè)已定義 setter 的屬性都需有一個(gè) getter
    'accessor-pairs': 2,
    // 箭頭函數(shù) => 前后必須有空格
    'arrow-spacing': [2, {
    'before': true,
    'after': true
    }],
    // 單行代碼塊花括號(hào)打開(kāi)塊之后和關(guān)閉塊之前秃臣，至少一個(gè)空格
    'block-spacing': [2, 'always'],
    // 強(qiáng)制執(zhí)行標(biāo)準(zhǔn)大括號(hào)風(fēng)格樣式（關(guān)鍵字要與花括號(hào)保持在同一行）
    'brace-style': [2, '1tbs', {
    'allowSingleLine': true // 允許同一行上打開(kāi)和關(guān)閉括號(hào)
    }],
    // 關(guān)閉駝峰命名規(guī)則校驗(yàn)（變量命名時(shí)涧衙，名稱之間不允許下劃線，常量（全部大寫）除外）
    'camelcase': [0, {
    'properties': 'always' // 屬性名稱強(qiáng)制執(zhí)行駝峰命名法樣式
    }],
    // 在對(duì)象或數(shù)組中不允許尾隨逗號(hào)
    'comma-dangle': [2, 'never'],
    // 變量聲明奥此，數(shù)組文字弧哎，對(duì)象文字，函數(shù)參數(shù)和序列中的逗號(hào)前后加上一致的間距
    'comma-spacing': [2, {
    'before': false, // 在逗號(hào)前不允許有空格
    'after': true // 在逗號(hào)后需要一個(gè)或多個(gè)空格
    }],
    // 使用標(biāo)準(zhǔn)逗號(hào)樣式稚虎，逗號(hào)位于當(dāng)前行的末尾撤嫩。在數(shù)組元素，對(duì)象屬性或變量聲明在同一行之后和同一行需要逗號(hào)
    'comma-style': [2, 'last'],
    // 子類構(gòu)造函數(shù)必須使用 super()調(diào)用父類構(gòu)造函數(shù)蠢终。非子類的構(gòu)造函數(shù)不得調(diào)用
    'constructor-super': 2,
    // 當(dāng)一個(gè)塊只包含一條語(yǔ)句時(shí)序攘，if茴她，else if，else程奠，for丈牢，while，或 do 允許省略花括號(hào)
    'curly': [2, 'multi-line'],
    // 表達(dá)式中點(diǎn)"."要求與屬性位于同一行
    'dot-location': [2, 'property'],
    // 強(qiáng)制文件以換行符結(jié)束（文件以一空行結(jié)束）
    'eol-last': 2,
    // 強(qiáng)制使用 === 和 !== 但不將此規(guī)則應(yīng)用于 null
    'eqeqeq': ['error', 'always', {'null': 'ignore'}],
    // 使用生成器時(shí)關(guān)鍵字 * 前后均須有空格
    'generator-star-spacing': [2, {
    'before': true,
    'after': true
    }],
    // 回調(diào)模式需處理 err 或 error瞄沙，報(bào)告所有未處理的錯(cuò)誤
    'handle-callback-err': [2, '^(err|error)$'],
    // 使用兩個(gè)空格進(jìn)行縮進(jìn)赡麦，
    'indent': [2, 2, {
    'SwitchCase': 1 // case 針對(duì) switch 語(yǔ)句使用 2 個(gè)空格縮進(jìn)
    }],
    // 在 JSX 屬性中強(qiáng)制使用單引號(hào)
    'jsx-quotes': [2, 'prefer-single'],
    // 對(duì)象字面量屬性中強(qiáng)制在冒號(hào)后放置空格，冒號(hào)前不允許空格
    'key-spacing': [2, {
    'beforeColon': false, // 不允許在對(duì)象文字中的鍵和冒號(hào)之間使用空格
    'afterColon': true // 需要在冒號(hào)和對(duì)象文字中的值之間至少有一個(gè)空格
    }],
    // 關(guān)鍵字前后至少有一個(gè)空格
    'keyword-spacing': [2, {
    'before': true,
    'after': true
    }],
    // 構(gòu)造函數(shù)名需以大寫字母開(kāi)頭帕识，以下內(nèi)置標(biāo)識(shí)符可免除此規(guī)則：Array泛粹、Boolean、 Date肮疗、Error晶姊、Function、Number伪货、Object们衙、RegExp、String碱呼、Symbol
    'new-cap': [2, {
    'newIsCap': true, // new 方式調(diào)用的函數(shù)需以大寫開(kāi)頭
    'capIsNew': false // 允許直接調(diào)用大寫開(kāi)頭的函數(shù)蒙挑，無(wú)需使用 new
    }],
    // 使用 new 關(guān)鍵字調(diào)用無(wú)參構(gòu)造函數(shù)，函數(shù)名后強(qiáng)制使用括號(hào)
    'new-parens': 2,
    // 禁止使用數(shù)組構(gòu)造函數(shù)愚臀，
    'no-array-constructor': 2,
    // 禁止使用 arguments.caller 和 arguments.callee
    'no-caller': 2,
    // 關(guān)閉 console 檢驗(yàn)規(guī)則
    'no-console': 'off',
    // 禁止給類賦值
    'no-class-assign': 2,
    // 禁止在條件語(yǔ)句中使用賦值運(yùn)算符
    'no-cond-assign': 2,
    // 禁止修改 const 關(guān)鍵字聲明的變量
    'no-const-assign': 2,
    // 關(guān)閉正則表達(dá)式中的控制字符校驗(yàn)規(guī)則
    'no-control-regex': 0,
    // 不允許對(duì)變量使用 delete 操作符
    'no-delete-var': 2,
    // 不允許在函數(shù)聲明或表達(dá)式中使用重復(fù)的參數(shù)名稱
    'no-dupe-args': 2,
    // 不允許在類的聲明中出現(xiàn)重復(fù)名稱
    'no-dupe-class-members': 2,
    // 不允許在對(duì)象中使用重復(fù)鍵
    'no-dupe-keys': 2,
    // 不允許在 switch 語(yǔ)句的 case 子句中使用重復(fù)的 case 分支
    'no-duplicate-case': 2,
    // 不允許在正則表達(dá)式中使用空字符
    'no-empty-character-class': 2,
    // 對(duì)象和數(shù)組使用解構(gòu)時(shí)忆蚀，不允許空模式
    'no-empty-pattern': 2,
    // 禁止使用 eval()函數(shù)
    'no-eval': 2,
    // 禁止給 catch 語(yǔ)句中的異常參數(shù)賦值
    'no-ex-assign': 2,
    // 不允許直接修改內(nèi)置原生對(duì)象
    'no-extend-native': 2,
    // 避免不必要的函數(shù)綁定 bind()
    'no-extra-bind': 2,
    // 禁止不必要的布爾轉(zhuǎn)換
    'no-extra-boolean-cast': 2,
    // 在使用函數(shù)表達(dá)式時(shí)，禁止使用不必要的括號(hào)
    'no-extra-parens': [2, 'functions'],
    // 禁止 switch 穿透姑裂，需使用 break 中斷
    'no-fallthrough': 2,
    // 禁止省略浮點(diǎn)數(shù)中的 0
    'no-floating-decimal': 2,
    // 不允許重新分配 function 聲明
    'no-func-assign': 2,
    // 禁止使用隱式 eval()馋袜，即：始終使用函數(shù)作為 setTimeout()、setInterval()和execScript()的第一個(gè)參數(shù)
    'no-implied-eval': 2,
    // 禁止在塊中聲明 function
    'no-inner-declarations': [2, 'functions'],
    // 不允許 RegExp 構(gòu)造函數(shù)中使用無(wú)效的正則表達(dá)式字符串
    'no-invalid-regexp': 2,
    // 禁止使用無(wú)效空格（不是正常的制表符和空格）舶斧，但允許在字符串中使用任何空格字符
    'no-irregular-whitespace': 2,
    // 禁止使用該__iterator__屬性
    'no-iterator': 2,
    // label 標(biāo)簽名不能與變量名相同
    'no-label-var': 2,
    // 禁止使用標(biāo)簽語(yǔ)句
    'no-labels': [2, {
    'allowLoop': false,
    'allowSwitch': false
    }],
    // 禁止使用不必要的嵌套塊
    'no-lone-blocks': 2,
    // 不允許使用混合空格和制表符進(jìn)行縮進(jìn)
    'no-mixed-spaces-and-tabs': 2,
    // 禁止在邏輯表達(dá)式欣鳖，條件表達(dá)式，聲明茴厉，數(shù)組元素泽台，對(duì)象屬性，序列和函數(shù)參數(shù)周圍使用多個(gè)空格
    'no-multi-spaces': 2,
    // 禁止使用斜線（\）進(jìn)行換行
    'no-multi-str': 2,
    // 禁止多個(gè)連續(xù)空行矾缓，最大連續(xù)空行數(shù)為 1
    'no-multiple-empty-lines': [2, {
    'max': 1
    }],
    // 不允許修改只讀全局變量
    'no-native-reassign': 2,
    // 不允許否定 in 表達(dá)式中的左操作數(shù)
    'no-negated-in-lhs': 2,
    // 不允許使用 Object 構(gòu)造函數(shù)
    'no-new-object': 2,
    // 不允許使用 new require
    'no-new-require': 2,
    // 禁止使用 Symbol 構(gòu)造器
    'no-new-symbol': 2,
    // 禁止使用原始包裝器怀酷，new String，new Number 或 new Boolean
    'no-new-wrappers': 2,
    // 禁止將全局對(duì)象作為函數(shù)調(diào)用而账，即不允許調(diào)用 Math胰坟，JSON 和 Reflect 對(duì)象作為函數(shù)
    'no-obj-calls': 2,
    // 不允許使用八進(jìn)制
    'no-octal': 2,
    // 不允許字符串中的八進(jìn)制轉(zhuǎn)義序列
    'no-octal-escape': 2,
    // node 中避免使用__dirname 和__filename 全局變量進(jìn)行路徑字符串拼接
    'no-path-concat': 2,
    // 使用方法 getPrototypeOf 替換__proto__屬性
    'no-proto': 2,
    // 不允許同一作用域內(nèi)聲明相同變量名稱
    'no-redeclare': 2,
    // 正則表達(dá)式文字中不允許有多個(gè)空格
    'no-regex-spaces': 2,
    // return 語(yǔ)句中的賦值必需有括號(hào)包裹
    'no-return-assign': [2, 'except-parens'],
    // 不允許將變量自我賦值
    'no-self-assign': 2,
    // 禁止變量與自己進(jìn)行比較操作
    'no-self-compare': 2,
    // 禁止使用逗號(hào)運(yùn)算符，除非在 for 語(yǔ)句的初始化或更新部分，表達(dá)式序列顯式包含在圓括號(hào)中
    'no-sequences': 2,
    // 禁止對(duì)全局對(duì)象賦值
    'no-shadow-restricted-names': 2,
    // 功能標(biāo)識(shí)符與其應(yīng)用程序之間不允許有間距
    'no-spaced-func': 2,
    // 禁止使用稀疏數(shù)組笔横，不適用于最后一個(gè)元素之后的尾隨逗號(hào)
    'no-sparse-arrays': 2,
    // 使用 this 前請(qǐng)確保 super() 已調(diào)用
    'no-this-before-super': 2,
    // 用 throw 拋錯(cuò)時(shí)竞滓，拋出 Error 對(duì)象而不是字符串
    'no-throw-literal': 2,
    // 禁止在行尾添加尾隨空白（空格，制表符和其他 Unicode 空白字符）
    'no-trailing-spaces': 2,
    // 禁止引用未聲明的變量
    'no-undef': 2,
    // 禁止使用 undefined 來(lái)初始化變量
    'no-undef-init': 2,
    // 禁止混淆多行表達(dá)式
    'no-unexpected-multiline': 2,
    // 檢查循環(huán)條件內(nèi)的引用是否在循環(huán)中被修改
    'no-unmodified-loop-condition': 2,
    // 當(dāng)存在更簡(jiǎn)單的選擇時(shí)吹缔，此規(guī)則不允許三元運(yùn)算符
    'no-unneeded-ternary': [2, {
    'defaultAssignment': false // 不允許將條件表達(dá)式作為默認(rèn)的分配模式
    }],
    // return商佑，throw，continue厢塘，和 break 語(yǔ)句后不允許跟代碼
    'no-unreachable': 2,
    // 不允許 return茶没，throw，break晚碾，和 continue 語(yǔ)句使用 finally 塊抓半，即：finally 代碼塊中不要再改變程序執(zhí)行流程，但它允許間接使用
    'no-unsafe-finally': 2,
    // 不允許存在聲明但未使用的變量格嘁，函數(shù)和函數(shù)的參數(shù)
    'no-unused-vars': [2, {
    'vars': 'all', // 檢查全局范圍內(nèi)的變量
    'args': 'none' // 不檢查參數(shù)
    }],
    // 禁止使用.call()和.apply()
    'no-useless-call': 2,
    // 禁止不必要的計(jì)算屬性鍵作對(duì)象屬性
    'no-useless-computed-key': 2,
    // 禁止不必要的構(gòu)造函數(shù)
    'no-useless-constructor': 2,
    // 關(guān)閉不必要的轉(zhuǎn)義檢測(cè)規(guī)則
    'no-useless-escape': 0,
    // 對(duì)象的屬性在同一行上時(shí)禁止在屬性前使用空格笛求，當(dāng)對(duì)象和屬性位于單獨(dú)的行上時(shí)，此規(guī)則允許使用空格糕簿，因?yàn)橥ǔＴ谳^長(zhǎng)的屬性鏈中添加換行符
    'no-whitespace-before-property': 2,
    // 禁止使用 with
    'no-with': 2,
    // 一個(gè)變量關(guān)鍵字（var探入，let 或 const）只聲明一個(gè)變量
    'one-var': [2, {
    'initialized': 'never' // 每個(gè)作用域要求多個(gè)變量聲明用于初始化變量
    }],
    // 使用一致的換行符樣式，將換行符放置在運(yùn)算符之后
    'operator-linebreak': [2, 'after', {
    'overrides': {
    '?': 'before', // 三元運(yùn)算換行符置于 ? 前
    ':': 'before' // 三元運(yùn)算換行符置于 : 前
    }
    }],
    // 在 block 語(yǔ)句和類的開(kāi)頭和結(jié)尾處不允許出現(xiàn)空行
    'padded-blocks': [2, 'never'],
    // 字符串盡可能使用單引號(hào)
    'quotes': [2, 'single', {
    'avoidEscape': true, // 允許字符串使用單引號(hào)或雙引號(hào)懂诗，只要字符串包含必須被轉(zhuǎn)義的引號(hào)即可
    'allowTemplateLiterals': true // 允許字符串使用反引號(hào)
    }],
    // 禁止使用分號(hào)結(jié)尾
    'semi': [2, 'never'],
    // 分號(hào)后強(qiáng)制使用空格蜂嗽，并在分號(hào)前禁止使用空格
    'semi-spacing': [2, {
    'before': false,
    'after': true
    }],
    // 代碼塊前至少有一個(gè)空格
    'space-before-blocks': [2, 'always'],
    // 函數(shù)名稱或 function 關(guān)鍵字與開(kāi)頭括號(hào)之間不允許有空格
    'space-before-function-paren': [2, 'never'],
    // 禁止在括號(hào)內(nèi)使用空格
    'space-in-parens': [2, 'never'],
    // 中綴運(yùn)算符周圍需有空格
    'space-infix-ops': 2,
    // 一元運(yùn)算詞后須有空格，一元運(yùn)算符后不允許有空格
    'space-unary-ops': [2, {
    'words': true,
    'nonwords': false
    }],
    // 注釋//和/*后必須跟一個(gè)空格
    'spaced-comment': [2, 'always', {
    'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
    }],
    // 模板字符串${}中不允許有空格
    'template-curly-spacing': [2, 'never'],
    // 不允許 NaN 值得直接比較殃恒，需使用 isNaN()
    'use-isnan': 2,
    // typeof 比較需使用有效字符串（"undefined"植旧，"object"，"boolean"芋类，"number"隆嗅，"string"界阁，"function"侯繁，"symbol"，和"bigint"）
    'valid-typeof': 2,
    // 自調(diào)用匿名函數(shù) (IIFEs) 使用括號(hào)包裹
    'wrap-iife': [2, 'any'],
    // yield 表達(dá)式前后都要有空格
    'yield-star-spacing': [2, 'both'],
    // 禁止 Yoda 條件（條件的字面值排在第一泡躯，而變量排在第二）
    'yoda': [2, 'never'],
    // 使用 const 聲明初始賦值后永遠(yuǎn)不重新賦值的變量
    'prefer-const': 2,
    // 生產(chǎn)環(huán)境中禁止使用 debugger 調(diào)試器
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
    // 花括號(hào)內(nèi)需要空格（{}除外）
    'object-curly-spacing': [2, 'always', {
    objectsInObjects: false // 以對(duì)象元素開(kāi)始或結(jié)束的花括號(hào)間不允許有空格
    }],
    // 數(shù)組方括號(hào)內(nèi)不允許使用空格
    'array-bracket-spacing': [2, 'never']
  }
}

配置校驗(yàn)忽略文件 .eslintignore

內(nèi)容為忽略的路徑和文件贮竟，符合規(guī)則的文件不會(huì)被校驗(yàn)

.gitignore（git忽略文件）

和.eslintignore 一樣，配置一些git 管理不需要 管理的 文件

.DS_Store
node_modules
/dist

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

babel.config.js

Babel 可以通過(guò) babel.config.js 進(jìn)行配置较剃。
它包含了 babel-preset-env咕别、JSX 支持以及為最小化包體積優(yōu)化過(guò)的配置。通過(guò)它的文檔可以查閱到更多細(xì)節(jié)和 preset 選項(xiàng)写穴。

這里vueCli專用的

package.json

引第三包需要注意它的性質(zhì)惰拱，因?yàn)榇虬暇€depend里的包都會(huì)被打包，會(huì)影響打包體積

vue.config.js

vue.config.js 是一個(gè)可選的配置文件啊送，如果項(xiàng)目的 (和 package.json 同級(jí)的) 根目錄中存在這個(gè)文件偿短，那么它會(huì)被 @vue/cli-service 自動(dòng)加載欣孤。你也可以使用 package.json 中的 vue 字段，但是注意這種寫法需要你嚴(yán)格遵照 JSON 的格式來(lái)寫昔逗。
參數(shù)具體參考:文檔

const path = require('path')

function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  publicPath: '/',  //公共路徑
  outputDir: 'dist',  //打包到xx文件夾,沒(méi)有會(huì)自動(dòng)生成
  assetsDir: 'static',  // 打包后的靜態(tài)資源存放xx文件夾,css.js等
  lintOnSave: process.env.NODE_ENV === 'development',
  productionSourceMap: false, //靜態(tài)資源打包時(shí)是否生成.map文件降传。本地true，線上false
  devServer: {
    port: 7779, //運(yùn)行端口
    open: true, //npm run serve完是否在瀏覽器打開(kāi) localhost:7771
    overlay: {  //警告和錯(cuò)誤提示
      warnings: false,
      errors: true
    },
  },
  configureWebpack: {
    name: 'dkyadmin',
    resolve: {
      alias: { //還可以配置一些特定的文件夾勾怒∑排牛看個(gè)人愛(ài)好
        '@': resolve('src') // 簡(jiǎn)化路徑匹配 @/views == 項(xiàng)目路徑/src/views 
      }
    }
  }
}

至此 配置結(jié)束，