直接使用官方推荐的 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 的作用
来源: http://www.bubuko.com/infodetail-3093433.html