vue項目設置eslint規則校驗

• 安裝
  npm install --save-dev eslint eslint-plugin-vue
• 配置
  "extends": ["plugin:vue/recommended"]
• 解析器
  
• vscode安裝eslint插件
• 配置vscode自動fix
  • 設置保存時格式化
    "eslint.autoFixOnSave": true,
  • 擴展檢查.vue文件
    
  • 關閉編輯器自動保存格式化，避免衝突
    
• .editorconfig配置
  • 格式統一配置工具
  • 跨瀏覽器廣泛支持(常見如IDEA,WebStorm,Sublime,Vscode等統統都支持)
  • 權重高於編輯器內部的格式設定
  • 配置項一共就8個

---

• .editorconfig完整配置

# editorconfig.org
root = true

[*]                             # 所有文件都使用配置
charset = utf-8                 # 編碼格式
indent_style = space            # Tab鍵縮進的樣式，由space和table兩種 一般代碼中是space
indent_size = 4                 # 縮進size爲2
end_of_line = lf                # 以lf換行 默認win爲crlf mac和linux爲lf
insert_final_newline = true     # 末尾加一行空行
trim_trailing_whitespace = true # 去掉行尾多餘空格

[*.md]
trim_trailing_whitespace = false

• .eslintrc.js完整配置

module.exports = {
    root: true, // 此項是用來告訴eslint找當前配置文件不能往父級查找
    parserOptions: { // 此項是用來指定javaScript語言類型和風格，sourceType用來指定js導入的方式，默認是script，此處設置爲module，指某塊導入方式
        parser: 'babel-eslint' // 此項是用來指定eslint解析器的，解析器必須符合規則，babel-eslint解析器是對babel解析器的包裝使其與ESLint解析
    },
    env: { // 此項指定環境的全局變量，下面的配置指定爲瀏覽器環境
        browser: true,
        node: true
    },
    extends: [
        'plugin:vue/recommended',
        'standard'
    ], // 此項是用來配置標準的js風格，就是說寫代碼的時候要規範的寫，如果你使用vs-code我覺得應該可以避免出錯
    plugins: [
        'vue'
    ], // 此項是用來提供插件的，插件名稱省略了eslint-plugin-，下面這個配置是用來規範html的
    rules: {
        "vue/html-indent": ["error", 4, {
            "attribute": 1,
            "baseIndent": 1,
            "closeBracket": 0,
            "alignAttributesVertically": true,
            "ignores": []
        }],
        "vue/max-attributes-per-line": ["error", {
            "singleline": 3,
            "multiline": {
                "max": 5,
                "allowFirstLine": false
            }
        }],
        'indent': [2, 4], // 縮進4
        'comma-dangle': 0, // 對象字面量項尾不能有逗號
        'new-cap': 0, // 函數名首行大寫必須使用new方式調用，首行小寫必須用不帶new方式調用
        'no-console': 0,// 禁止使用console
        'no-extra-semi': 0, // 禁止多餘的冒號
        'no-new': 0, // 禁止在使用new構造一個實例後不賦值
        'no-undef': 0, // 不能有未定義的變量
        'quote-props': 0, // 屬性名不限制
        'space-before-function-paren': [2, 'never'], // 函數定義時括號前面要不要有空格
        'semi': [2, 'never'], // 語句強制分號結尾
        'no-unused-expressions': 'off', // 禁止無用的表達式
        'generator-star-spacing': 'off', // 生成器函數*的前後空格
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' // 禁止使用debugger
    }
}

參考：
Vue.js的官方ESLint插件