给旧Vue项目添加eslint代码检测的方法

野性酷女 2023-06-29 05:48 33阅读 0赞

最近公司需要给旧的**vue**项目添加`eslint`代码检测,自己研究的方法如下：

## 修改配置文件 ##

*  一、在`/build/webpack.base.conf.js` 文件中检查是否含有以下内容:

module: { 
        rules: [
          ...(config.dev.useEslint ? [createLintingRule()] : []),
          { 
            test: /\.vue$/,
            loader: 'vue-loader',
            options: vueLoaderConfig
          },
          { 
            test: /\.js$/,
            loader: 'babel-loader',
            include: [ resolve('src'), 
              resolve('test'), 
              resolve('node_modules/webpack-dev-server/client'),
              resolve('node_modules/element-ui/src'),
              resolve('node_modules/element-ui/'),
     
            ]
          },
          { 
            test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
            loader: 'url-loader',
            options: { 
              limit: 10000,
              name: utils.assetsPath('img/[name].[hash:7].[ext]')
            }
          },
          { 
            test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
            loader: 'url-loader',
            options: { 
              limit: 10000,
              name: utils.assetsPath('media/[name].[hash:7].[ext]')
            }
          },
          { 
            test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
            loader: 'url-loader',
            options: { 
              limit: 10000,
              name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
            }
          }
        ]
      },

*  二、在`config/index.js`中是否开启使用eslint设置

dev: { 
      useEslint: true,
    }

*  三、在根目录下的`eslintrc.js`文件配置  
    要注意在extends 中加入模板 ,这里使用的是**standard** 标准模板

module.exports = { 
      root: true,
      parserOptions: { 
        parser: 'babel-eslint'
      },
      env: { 
        browser: true,
      },
      // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
      // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
      extends: [
        'plugin:vue/essential',
        'standard' // 设置标准样式模板 重要
      ],
      // required to lint *.vue files
      plugins: [
        'vue'
      ],
      // add your custom rules here
      rules: { 
        // allow async-await
        'generator-star-spacing': 'off',
        // allow debugger during development
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
      }
    }

*  四、在`packpage.json`文件中加入eslint的依赖  
    主要为这几项依赖

"devDependencies": { 
    	...
    	"eslint": "^4.15.0",
        "eslint-config-standard": "^10.2.1",
        "eslint-friendly-formatter": "^3.0.0",
        "eslint-loader": "^1.7.1",
        "eslint-plugin-import": "^2.7.0",
        "eslint-plugin-node": "^5.2.0",
        "eslint-plugin-promise": "^3.4.0",
        "eslint-plugin-standard": "^3.0.1",
        "eslint-plugin-vue": "^4.0.0",
        ...
    }

*  到现在配置都已经添加完毕
 *  首先`npm install` 下载依赖包
 *  接着 `npm run dev` 启动就可以在浏览器或者命令行中看到eslint检测结果了