vue項目Eslint工具的使用

一、基本配置

1、安裝

• npm install -g eslint

2、創建.eslint.js文件

• 手動創建
• eslint --init創建（需要回答問題創建）

3、關於 eslint 的配置文件（eslint.js）

• root 限定配置文件的使用範圍
• parser 指定eslint的解析器
• parserOptions 設置解析器選項
• extends 指定eslint規範，常用的大廠定義的規範有Airbnb、- - standard、google
• plugins 引用第三方的插件
• env 指定代碼運行的宿主環境
• rules 啓用額外的規則或覆蓋默認的規則，我們可以自定義自己想要的規則
  // "off"或0 -關閉規則
  // “warn” 或1 - 開啓規則, 使用警告 程序不會退出
  // "error"或2 - 開啓規則, 使用錯誤 程序退出
• globals 聲明在代碼中的自定義全局變量

module.exports = {
    "extends": [
        // "eslint:recommended",
        "plugin:vue/essential",
        ‘standard’//引入規範
     ],
     extends: 'eslint:recommended’, //允許執行eslint命令
     rules: { //規則、制定eslint規則
        'no-console': 'off’,//關掉 禁止 console命令
     },
     //全局變量配置
     globals:{
    	'mui':true,
    	'Vue':true,
    	'ud':true,
    	'wx':true
  	}
};

4、webpack.base.conf.js配置

{
     test: /\.(js|vue)$/,
     loader: 'eslint-loader',
     enforce: 'pre',
     include: [resolve('src'), resolve('test')],
     options: {
        formatter: require('eslint-friendly-formatter')
     }
}

5、vscode設置
下載eslint、vetur，文件設置，相當於格式化代碼，根據你的eslint規則設置更加方便

二、eslint創建備註

• eslint創建語句解釋
  1、如何使用eslint
  
  2、項目使用那種模塊
  
  3、項目使用那個框架
  
  4、項目是否使用typeScript
  
  5、代碼運行環境選擇
  
  6、你希望你的配置文件採用什麼格式
  
  7、文件配置需要如下文件
  8、所有配置

三、常見eslint命令使用

• 忽略eslint的校驗

/* eslint-disable */
console.log('yan')
/* eslint-disable */

• eslint.js文件rules規則常用校驗

// 自定義指定規則
"rules": {
// 忽略空白報錯
 "no-irregular-whitespace": "off",
// 關閉標籤閉合報錯
"vue/no-parsing-error": [2, { "x-invalid-end-tag": false }],
// 加分號，不加分號兩者共存
// 強制在註釋中 // 或 /* 使用一致的空格
"spaced-comment": "off",
// 關閉段落前空格的校驗
"space-before-blocks": "off",
// 關閉v-for和v-if在一起的衝突
"vue/no-use-v-if-with-v-for":'off',
'space-before-function-paren': [
// 'error',
// { anonymous: 'always', named: 'never' }
// ],
// 強制在對象字面量的屬性中鍵和值之間使用一致的間距
 "key-spacing": "off",
// 強制在關鍵字前後使用一致的空格 (前後腰需要)
"keyword-spacing": "off",
// 禁止使用 Object 的構造函數
 "no-new-object": "off",
// 禁止只允許[]創建新數組
"no-array-constructor": "off",
// prop 的默認值必須匹配它的類型 太嚴格了
'vue/require-valid-default-prop': 'off',
// 關閉僅一行代碼的聲明
 "one-var": "off",
"semi": "off",
// 允許引號類型 '' "" ``
// 關閉僅引用單引號
"quotes": "off",
// 在方法和方法名字之間要有一個空格
"space-before-function-paren": "off",
// 關閉全等和等於的“===和==”的報錯
"eqeqeq": "off",
// 開啓驗證駝峯允許下劃線命名方式
"camelcase": "off",
// 將禁止new關掉
"no-new": "off",
// 關閉最後一行必須關閉
"eol-last": "off",
// 去掉尾隨逗號校驗
"comma-dangle": "off",
// 無用的return禁用
"no-useless-return": "off",
}