vue-cli vscode 配置 eslint

效果

• 能夠實時在vscode中顯示不符合規範的提示信息
• 能夠經過運行npm run lint格式化全部不符合規範的代碼，並列出全部需手動修改的代碼錯誤及定位
• 能夠定製規範【默認用的是eslint推薦的規範JavaScript Standard Style】

能夠經過 /*eslint-disable */讓下面的代碼不接受代碼規範檢查、經過 /*eslint-enable */讓下面的代碼從新接受代碼規範檢查、經過 // eslint-disable-line no-undef讓某行代碼不接受規範檢查以及能夠有未定義的變量

參考項目：

1. https://github.com/PanJiaChen...
2. https://github.com/iview/ivie...

如何配置

主要包括vscode的插件安裝及配置和命令行插件的安裝及配置

step1 vscode的插件安裝及配置

1. 在vscode中搜索ESlint並安裝
2. 在vscode的用戶設置中加入以下代碼：

// 自動識別文件類型
    "emmet.syntaxProfiles": {
        "vue-html": "html",
        "vue": "html"
    },
    "eslint.autoFixOnSave": false,
    // 要lint的語言
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "vue",
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    "eslint.options": {
        "plugins": [
            "html"
        ]
    }

1. 在項目根目錄下新建.eslintrc.json文件並加入以下代碼：

mac下新建 .開頭的文件有問題

{
    "root": true,
    "parserOptions": {
        "sourceType": "module"
    },
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": "eslint:recommended",
    "plugins": [
        "html"
    ],
    "rules": {
        "accessor-pairs": 2,
        "arrow-spacing": [2, {
          "before": true,
          "after": true
        }],
        "block-spacing": [2, "always"],
        "brace-style": [2, "1tbs", {
          "allowSingleLine": true
        }],
        "camelcase": [0, {
          "properties": "always"
        }],
        "comma-dangle": [2, "never"],
        "comma-spacing": [2, {
          "before": false,
          "after": true
        }],
        "comma-style": [2, "last"],
        "constructor-super": 2,
        "curly": [2, "multi-line"],
        "dot-location": [2, "property"],
        "eol-last": 2,
        // "eqeqeq": [2, "allow-null"],
        "eqeqeq": 0,
        "generator-star-spacing": [2, {
          "before": true,
          "after": true
        }],
        "handle-callback-err": [2, "^(err|error)$"],
        "indent": [2, 2, {
          "SwitchCase": 1
        }],
        "jsx-quotes": [2, "prefer-single"],
        "key-spacing": [2, {
          "beforeColon": false,
          "afterColon": true
        }],
        "keyword-spacing": [2, {
          "before": true,
          "after": true
        }],
        "new-cap": [2, {
          "newIsCap": true,
          "capIsNew": false
        }],
        "new-parens": 2,
        "no-array-constructor": 2,
        "no-caller": 2,
        "no-console": "off",
        "no-class-assign": 2,
        "no-cond-assign": 2,
        "no-const-assign": 2,
        "no-control-regex": 0,
        "no-delete-var": 2,
        "no-dupe-args": 2,
        "no-dupe-class-members": 2,
        "no-dupe-keys": 2,
        "no-duplicate-case": 2,
        "no-empty-character-class": 2,
        "no-empty-pattern": 2,
        "no-eval": 2,
        "no-ex-assign": 2,
        "no-extend-native": 2,
        "no-extra-bind": 2,
        "no-extra-boolean-cast": 2,
        "no-extra-parens": [2, "functions"],
        "no-fallthrough": 2,
        "no-floating-decimal": 2,
        "no-func-assign": 2,
        "no-implied-eval": 2,
        "no-inner-declarations": [2, "functions"],
        "no-invalid-regexp": 2,
        "no-irregular-whitespace": 2,
        "no-iterator": 2,
        "no-label-var": 2,
        "no-labels": [2, {
          "allowLoop": false,
          "allowSwitch": false
        }],
        "no-lone-blocks": 2,
        "no-mixed-spaces-and-tabs": 2,
        "no-multi-spaces": 2,
        "no-multi-str": 2,
        "no-multiple-empty-lines": [2, {
          "max": 1
        }],
        "no-native-reassign": 2,
        "no-negated-in-lhs": 2,
        "no-new-object": 2,
        "no-new-require": 2,
        "no-new-symbol": 2,
        "no-new-wrappers": 2,
        "no-obj-calls": 2,
        "no-octal": 2,
        "no-octal-escape": 2,
        "no-path-concat": 2,
        "no-proto": 2,
        "no-redeclare": 2,
        "no-regex-spaces": 2,
        "no-return-assign": [2, "except-parens"],
        "no-self-assign": 2,
        "no-self-compare": 2,
        "no-sequences": 2,
        "no-shadow-restricted-names": 2,
        "no-spaced-func": 2,
        "no-sparse-arrays": 2,
        "no-this-before-super": 2,
        "no-throw-literal": 2,
        "no-trailing-spaces": 2,
        "no-undef": 2,
        "no-undef-init": 2,
        "no-unexpected-multiline": 2,
        "no-unmodified-loop-condition": 2,
        "no-unneeded-ternary": [2, {
          "defaultAssignment": false
        }],
        "no-unreachable": 2,
        "no-unsafe-finally": 2,
        "no-unused-vars": [2, {
          "vars": "all",
          "args": "none"
        }],
        "no-useless-call": 2,
        "no-useless-computed-key": 2,
        "no-useless-constructor": 2,
        "no-useless-escape": 0,
        "no-whitespace-before-property": 2,
        "no-with": 2,
        "one-var": [2, {
          "initialized": "never"
        }],
        "operator-linebreak": [2, "after", {
          "overrides": {
            "?": "before",
            ":": "before"
          }
        }],
        "padded-blocks": [2, "never"],
        "quotes": [2, "single", {
          "avoidEscape": true,
          "allowTemplateLiterals": true
        }],
        "semi": [2, "never"],
        "semi-spacing": [2, {
          "before": false,
          "after": true
        }],
        "space-before-blocks": [2, "always"],
        "space-before-function-paren": [2, "never"],
        "space-in-parens": [2, "never"],
        "space-infix-ops": 2,
        "space-unary-ops": [2, {
          "words": true,
          "nonwords": false
        }],
        "spaced-comment": [2, "always", {
          "markers": ["global", "globals", "eslint", "eslint-disable", "*package", "!", ","]
        }],
        "template-curly-spacing": [2, "never"],
        "use-isnan": 2,
        "valid-typeof": 2,
        "wrap-iife": [2, "any"],
        "yield-star-spacing": [2, "both"],
        "yoda": [2, "never"],
        "prefer-const": 2,
        "object-curly-spacing": [2, "always", {
          "objectsInObjects": false
        }],
        "array-bracket-spacing": [2, "never"]
      }
}

step2 命令行插件的安裝及配置

1 . 在項目根目錄下的package.json文件中的加入以下代碼：
scripts下：

"lint": "eslint --fix --ext .js,.vue src"

若是不想在 npm run lint的時候修復可自動修復的不符合規範的代碼，須要取消 --fix

和
devDependencies下：

"eslint": "^3.19.0",
"eslint-plugin-vue": "^2.1.0",

1. 在項目根目錄終端下運行cnpm i
2. 至此就能夠運行npm run lint查看全部不符合規範的代碼了
3. done.