实例详解vue-cli vscode 配置 eslint

Vue-cli是Vue的脚手架工具，本文我们主要和大家分享vue-cli vscode 配置 eslint ，希望能帮助到大家。

效果

• 可以实时在vscode中显示不符合规范的提示信息

• 可以通过运行npm run lint格式化所有不符合规范的代码，并列出所有需手动修改的代码错误及定位

• 可以定制规范【默认用的是eslint推荐的规范JavaScript Standard Style】

可以通过 /*eslint-disable */让下面的代码不接受代码规范检查、通过/*eslint-enable */让下面的代码重新接受代码规范检查、通过// eslint-disable-line no-undef让某行代码不接受规范检查以及可以有未定义的变量

如何配置

主要包括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文件并加入如下代码：

{
    "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"

和
devDependencies下：

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

1. 在项目根目录终端下运行cnpm i

2. done.

相关推荐：

如何使用 vue-cli 开发多页应用方法

怎么使用vue-cli来搭建vue项目和webpack？

总结关于Vue-cli的相关实例

以上就是实例详解vue-cli vscode 配置 eslint 的详细内容，更多请关注其它相关文章！