02 vue 项目配置eslint

直接使用官方推荐的eslint-standard的npm包

1.安装eslint-standard

npm i eslint eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node -D

2.安装npm i eslint-plugin-html　

此插件可以解析vue里面的js

npm i eslint-plugin-html

3.在项目的根目录增加 .eslintrc文件

//.eslintrc
{
  "extends": "standard",
  "plugins": ["html"]
}

4.在package.json里面配置相应的检测文件及目录

"scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "lint": "eslint --ext .js --ext .jsx --ext .vue client/", //运行此命令，用于检测
　　"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue client/", // 运行此命令，进行自动修复代码的格式

   "clean": "rm -rf dist", "build:client": "cross-env NODE_ENV=production webpack --config build/webpack.config.client.js", "build": "npm run clean && npm run build:client", "dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.client.js" },

5.配置写代码时候自动检测　　

npm i eslint-loader babel-eslint -D　　

.eslintrc增加配置：

{
  "extends": "standard",
  "plugins": [
    "html"
  ],
  "parser": "babel-eslint"
}

webpack.congif.base.js增加配置

 rules: [
            {
                test: /.(vue|js|jsx)$/,
                loader: 'eslint-loader',
                exclude:/node_modules/,
                enforce:"pre" //vue-loader处理之前，进行预处理
            }
]

6.重新运行项目，改动代码，体验eslint的作用