webpack4 配置eslint

￡神魔★判官ぃ 2021-07-24 13:31 534阅读 0赞

方式一:配置eslint-loader	
    	1、下载
    		cnpm install -D eslint-config-airbnb-base eslint eslint-plugin-import eslint-loader
    		
    		使用airbnb-base库来进行代码检查
    		手动配置检查:
    			去官网demo/演示中自行配置然后下载.eslintrc.json文件,其中配置包含选择的rules
    		
    	2、配置
    		
    		module:{
    			rules:[
    			 {
    		        test: /\.js$/,
    		        exclude:/node_modules/,	不检查node_modules
    		        loader: 'eslint-loader',
    		        enforce:'pre',  优先执行该loader,避免其他loader对js文件处理后(如兼容性处理)报错
    		        options: {
    		          fix:true		检查出错误后自动修复
    		        }
    		      }
    			]
    		},
    		
    		添加eslint配置:
    			方式一:
    				修改package.json,添加eslintConfig,与devDependencies同级设置
    				  "eslintConfig": {
    				    "extends": "airbnb-base",	使用airbnb-base库进行代码检查
    				    "env":{
    				      "browser":true	添加浏览器全局变量
    				     }
    				  }
    				  
    		    方式二:
    		    	创建.eslintrc.*文件,可以是js、json或yaml,js文件需要module.exports导出
    		    	(1)下载:
    			    	cnpm install -D babel-eslint
    			    (2)配置:
    			    	module.exports = {
    					  "parser": "babel-eslint",	可以使用babel-eslint来解析ESLint本身还不支持的类型(流)或实验性特性,否则使用默认即可,需要先下载
    					  "parserOptions": {			
    					    "sourceType": "module",		支持es6+语法
    					    "allowImportExportEverywhere": false,	支持import和export在任何地方
    					    "codeFrame": true
    					  },
    					  "env": {	支持的环境
    					    "browser": true,
    					    "node":true
    					  },
    					  "extends":["airbnb-base"],  使用airbnb-base库的规范,如果下载的是eslint-config-airbnb就使用airbnb
    					  "rules": {	修改或添加验证规则,具体规则查看eslint官网
    					    
    					  }
    					}
    		    	
    		  
    	3、避开代码检查
    		在需要避开检查的代码上一行添加如下注释
    		//eslint-disable-next-line
    
    方式二:通过命令行启动eslint
    	(1)下载
    		cnpm install -D eslint-config-airbnb-base eslint eslint-plugin-import eslint-loader
    		cnpm install -g eslint-cli
    		
    	(2)配置.eslintrc.js如上方所示
    	
    	(3)运行
    		eslint 文件目录/文件路径  --fix
    			--fix 自动修复
    		例子:
    			eslint --fix --ext .后缀1,.后缀2	目录路径 目录路径2 
    			具体命令行规则:http://eslint.cn/docs/user-guide/command-line-interface

代码示例:

package.json:

{ 
      "name": "demo1",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": { 
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "",
      "license": "ISC",
      "devDependencies": { 
        "css-loader": "^5.0.1",
        "eslint": "^7.17.0",
        "eslint-config-airbnb-base": "^14.2.1",
        "eslint-loader": "^4.0.2",
        "eslint-plugin-import": "^2.22.1",
        "file-loader": "^6.2.0",
        "html-loader": "^0.5.5",
        "html-webpack-plugin": "^4.5.1",
        "less": "^3.13.1",
        "less-loader": "^7.2.1",
        "mini-css-extract-plugin": "^1.3.3",
        "optimize-css-assets-webpack-plugin": "^5.0.4",
        "postcss-loader": "^4.1.0",
        "postcss-preset-env": "^6.7.0",
        "style-loader": "^2.0.0",
        "url-loader": "^4.1.1",
        "webpack": "^4.41.6",
        "webpack-cli": "^3.3.11",
        "webpack-dev-server": "^3.11.1"
      },
      "browserslist": { 
        "development": [
          "last 1 chrome version",
          "last 1 firefox version",
          "last 1 safari version"
        ],
        "production": [
          ">0.2%",
          "not dead",
          "not op_mini all"
        ]
      },
      "eslintConfig": { 
        "extends": "airbnb-base"
      }
    }