vue+eslint+vscode配置

package.json文件所需要的eslint包

"scripts": {
    "lint": "eslint --ext .js,.vue src",
  },
"devDependencies": {
    "babel-eslint": "^8.2.1",
    "eslint": "^4.15.0",
    "eslint-config-airbnb-base": "^11.3.0",
    "eslint-config-standard": "^13.0.1",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-import-resolver-webpack": "^0.8.3",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-html": "^4.0.0",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-node": "^9.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^5.0.0-beta.6",
    }

webpack.base.conf.js文件添加

const createLintingRule = () => ({
  test: /\.(js|vue)$/,
  loader: 'eslint-loader',
  enforce: 'pre',
  include: [resolve('src'), resolve('test')],
  options: {
    formatter: require('eslint-friendly-formatter'),
    emitWarning: !config.dev.showEslintErrorsInOverlay
  }
})
 module: {
    rules: [
      ...(config.dev.useEslint ? [createLintingRule()] : []),
      ]}

执行npm install安装好这些依赖包

在项目中添加两个文件

• .eslintrc.js

module.exports = {
  "extends": [
    // "standard",
    "plugin:vue/base"
  ],
  "env": {
    "browser": true,
    "commonjs": true,
    "es6": true
  },
  "parser": "babel-eslint",// 使用babel进行编译,解决import报错：error  Parsing error: Unexpected token import
  "plugins": [
    "html"
  ],//插件，此插件用于识别文件中的js代码，没有MIME类型标识没有script标签也可以识别到，因此拿来识别.vue文件中的js代码
  // "extends": "eslint:recommended",//eslint默认推荐规则这里作了注释，使用我们定义的规则
  "parserOptions": {
    "sourceType": "module",
    "ecmaVersion": 7,
  },
"rules": {
     //这里自定义规则，规则地址:
     //http://eslint.cn/docs/rules/
 }
}

• .eslintignore

自行配置eslint检查时所忽略的文件

• 完成后在目录中的结果

vscode+eslint配置

我这里是使用vscode进行检查因此还需配置vscode与eslint插件

• 在vscode中下载并且安装eslint插件

• 打开vscode的Perferences->settings

• 点击右上角的{}进入settings.json页面

{
    "explorer.confirmDelete": false,
    "editor.formatOnType": true,
    "editor.formatOnSave": true,
    "eslint.autoFixOnSave": true, //保存自动修复eslint错误
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "vue",
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    "eslint.options": { //指定eslint配置文件位置
        "configFile": ".eslintrc.js" //指定项目根目录中的eslint配置文件
    },
    "files.autoSave": "off",
}

结束

最后终于可以愉快地配置你们项目中所需要的eslint规则啦！