效果
- 可以实时在vscode中显示不符合规范的提示信息
- 可以通过运行
npm run lint格式化所有不符合规范的代码，并列出所有需手动修改的代码错误及定位 - 可以定制规范【默认用的是eslint推荐的规范JavaScript Standard Style】
可以通过/*eslint-disable */让下面的代码不接受代码规范检查、通过/*eslint-enable */让下面的代码重新接受代码规范检查、通过// eslint-disable-line no-undef让某行代码不接受规范检查以及可以有未定义的变量
参考项目：
- https://github.com/PanJiaChen...
- https://github.com/iview/ivie...
如何配置
主要包括vscode的插件安装及配置和命令行插件的安装及配置
step1 vscode的插件安装及配置
- 在vscode中搜索ESlint并安装
- 在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"
]
}- 在项目根目录下新建
.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",- 在项目根目录终端下运行
cnpm i - 至此就可以运行
npm run lint查看所有不符合规范的代码了 - done.