vue老项目启用eslint及在webstorm中一键修复eslint错误

近期有点忙，导致博客停更了。。。

最近接手别人的项目，发现他项目从立项开始就未使用eslint，这对代码规范及质量不是很好，而且使用eslint可以避免因为犯低级错误导致出现bug，因此对他的项目启用了eslint，步骤如下：

一、安装eslint相关库

在package.json devDependencies中安装如下相关库：

    "eslint": "~3.19.0",
    "eslint-config-airbnb-base": "~11.3.0",
    "eslint-friendly-formatter": "~3.0.0",
    "eslint-import-resolver-webpack": "~0.8.3",
    "eslint-loader": "~1.7.1",
    "eslint-plugin-html": "~3.0.0",
    "eslint-plugin-import": "~2.7.0",
    "eslint-plugin-vue": "~2.1.0",
    "babel-eslint": "~7.1.1"

二、设置eslint启用变量

在config中的index.js 设置eslint启用变量

module.exports = {
  dev: {
    // Use Eslint Loader?
    // If true, your code will be linted during bundling and
    // linting errors and warnings will be shown in the console.
    useEslint: true,
    // If true, eslint errors and warnings will also be shown in the error overlay
    // in the browser.
    showEslintErrorsInOverlay: false,
}

这里顺便说下 如何设置以自动获取ip的方式打开浏览器；

const path = require('path')
const os = require('os')

// const ipv4IpLocal =function getLoaclIP() {
//   let ipObj = os.networkInterfaces();
//   let IPv4 = [];
//   Object.keys(ipObj).forEach(ele => {
//     ipObj[ele].forEach(ip => {
//       if (ip.family === 'IPv4') {
//         IPv4.push(ip.address);
//       }
//     })
//   });
//   return IPv4[0]
// }
const ipv4IpLocal = function getLoaclIP() {
  let ipObj = os.networkInterfaces();
  let IPv4address = [];
  // Object.keys(ipObj).forEach(ele => {
  //   ipObj[ele].forEach(ip => {
  //     if (ip.family === 'IPv4' && ip.address !== '127.0.0.1') {
  //     // if (ip.family === 'IPv4') {
  //       console.log('ip----------',ip)
  //       console.log('ipObj----------',ipObj)
  //       IPv4address = ip.address;
  //     }
  //   })
  // });
  let NET_NAME='以太网';




  // 台式机 检查有没有 以太网 名字的 网络适配器
  Object.keys(ipObj).some((item)=>{
    if(item===NET_NAME){
      console.log(NET_NAME+'存在ipObj----',ipObj)

      IPv4address=filterIPv4AndNotLocalIP(ipObj[item])
    }
    return item===NET_NAME
  });

  // 不存在以太网 名字的 网络适配器 ----- jenkins 或其它平台  取第一个符合的  网络适配器
  if (!IPv4address[0]) {
    let notYTW=[];
    Object.keys(ipObj).forEach((item)=>{
      console.log(NET_NAME+'不存在ipObj----',ipObj)
      // notYTW.push()
      if(filterIPv4AndNotLocalIP(ipObj[item])[0]){
        notYTW.push(filterIPv4AndNotLocalIP(ipObj[item])[0])
      }
    })

    console.log('notYTW没有以太网',notYTW)
    IPv4address=notYTW;

    if(!IPv4address[0]){
      throw new Error('未捕获到接口地址')
    }
  }
  console.log('IPv4address',IPv4address)
  return IPv4address[0]
}

function filterIPv4AndNotLocalIP(ipObjItem) {
  let ipListArray=[];
  const result= ipObjItem.filter((itemItem)=>{
    return itemItem.family === 'IPv4' && itemItem.address !== '127.0.0.1'
  });
  result.forEach((item)=>{
    ipListArray.push(item.address)
  })
  console.log('ipListArray',ipListArray)
  return ipListArray;
}

module.exports = {
  dev: {
    host: ipv4IpLocal(), // can be overwritten by process.env.HOST
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: true,

三、启用eslint

在build中的webpack.base.conf.js 启用eslint

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

四、增加eslint配置文件

在项目根目录中添加.eslintrc.js和.eslintignore文件；

.eslintrc.js

// https://eslint.org/docs/user-guide/configuring

module.exports = {
  root: true,
  parser: 'babel-eslint',
  parserOptions: {
    sourceType: 'module',
  },
  env: {
    browser: true,
  },
  extends: 'airbnb-base',
  // required to lint *.vue files
  plugins: [
    // 'html'
    'vue',
  ],
  // check if imports actually resolve
  settings: {
    'import/resolver': {
      webpack: {
        config: 'build/webpack.base.conf.js',
      },
    },
  },
  // add your custom rules here
  rules: {
    // enforce consistent linebreak style (linebreak-style)
    'linebreak-style': 0,
    'no-console': 0,
    'no-param-reassign': ['error', { props: false }],
    // don't require .vue extension when importing
    'import/extensions': ['error', 'always', {
      js: 'never',
      vue: 'never',
    }],
    // allow optionalDependencies
    'import/no-extraneous-dependencies': ['error', {
      optionalDependencies: ['test/unit/index.js'],
    }],
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
    semi: [0],
    'max-len': ['error', { code: 380 }],


  },
}

.eslintignore

/build/
/config/
/dist/
/*.js
/test/unit/coverage/

五、在webstorm中 启用 eslint 一键修复

image.png

image.png