如何在没有esLint的vue项目里面添加esLint

有时候开发初期，为了缩短开发周期，创建项目的时候会直接去掉esLint。
后面代码优化的时候需要加上去，这时候要怎么将esLint加到项目中呢

1.安装下面esLint所需要的依赖，记住安装到 devDependencies 下  

"babel-eslint"
"eslint",
"eslint-friendly-formatter
"eslint-loader"
"eslint-plugin-import"
"eslint-plugin-node"
"eslint-plugin-vue"

2.配置webpack:打开build/webpack.base.conf.js 在module=>rules下添加下面的规则

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

3.在项目中新建.eslintrc.js文件，并添加如下代码：

module.exports = {
  "root": true,
  "env": {
    "node": true
  },
  "extends": [
    "plugin:vue/essential",
    "eslint:recommended"
  ],
  "parserOptions": {
    "parser": "babel-eslint"
  },
  /**
   * "off"或者0    //关闭规则关闭
   * "warn"或者1    //在打开的规则作为警告（不影响退出代码）
   * "error"或者2    //把规则作为一个错误（退出代码触发时为1）
   */
  "rules": {
    "no-console": process.env.NODE_ENV === "production" ? "off" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "off" : "off"
  },
}

这时候就可以校验代码了

.eslintrc.js里面的代码校验规则，可以自己添加修改
具体可以查看文档：https://cn.eslint.org/docs/rules/

 

如何忽略某个文件
在根目录下新增.eslintignore文件添加如下代码：

src/assets/*   // src/assets下的文件不校验