直接使用官方推荐的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的作用
原文：https://www.cnblogs.com/ipoodle/p/11028762.html