webpack -- eslint的配置

最新推荐文章于 2024-09-23 09:42:00 发布

-小橙子-

最新推荐文章于 2024-09-23 09:42:00 发布

阅读量1.3k

点赞数

分类专栏： Webpack 文章标签： eslint的使用

本文链接：https://blog.csdn.net/Riona_cheng/article/details/100664161

版权

Webpack 专栏收录该内容

19 篇文章 2 订阅

订阅专栏

本文介绍了如何在webpack中配置eslint进行代码规范检查，详细步骤包括初始化eslint配置、执行代码检查以及在webpack中使用eslint-loader。同时强调了loader执行顺序的重要性，并提到在实际项目中，通常会在git钩子中使用eslint，而非直接在webpack配置中，以避免影响打包速度。

摘要由CSDN通过智能技术生成

eslint的作用：代码规范工具。

eslint的使用

项目目录：（简单举例）

|--demo
	|--src
		|--index.html
		|--index.js
		|--home.js
		|--list.js
	|--node_modules
	|--package.json
	|--package-lock.json
	|--webpack.config.js

index.js代码：（不规范版本）

import React, { Component } from 'react';
import ReactDom from 'react-dom';
class App extends Component {
  render() {
    return <div>hello 小橙子</div>
  }
}

ReactDom.render(<App />, document.getElementById('root'));

安装eslint：

npm  i  eslint  -D

初始化eslint配置文件:

npx  eslint  --init  // 使用npx可以直接运行刚刚安装的eslint命令

1.选择规范约束类型

分别代表含义：

只检查语法
检查语法，并查找问题
检查语法、查找问题并强制执行代码样式

2.选择import/export模块语法。

3.选择react语法

4.不实用TypeScripts语法。

5.选择在浏览器运行项目。

6.选择一种通用的约束标准：

7.选择Airbnb公司的前端规范要求

8.选择JavaScript语法进行配置：

9.做eslint需要一些依赖项，选择现在开始安装：

按照以上顺序初始化eslint配置之后，在项目根目录下，会多出一个 .eslintrc.js文件 . 具体配置如下：

module.exports = {
  env: {
    browser: true,
    es6: true,
  },
  extends: [
    'airbnb',
  ],
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly',
  },
  parserOptions: { 
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 2018,
    sourceType: 'module',
  },
  plugins: [
    'react',
  ],
  rules: {
  },
};

接下来，我们使用eslint来检测src下得代码是否符合airbnb公司前端代码规范：
命令行运行：npx eslint src

执行检测src目录代码规范命令后，不规范代码会在命令行直接给予提示，方便我们错误排查。很明显，index.js中的代码有两处不符合airbnb公司前端代码的规范：

第2行，import语句后应有1个空行。
第5行，缺少分号。

我们做如下修正：(index.js规范版本)

import React, { Component } from 'react';
import ReactDom from 'react-dom';

class App extends Component {
  render() {
    return <div>hello 小橙子</div>;
  }
}

ReactDom.render(<App />, document.getElementById('root'));

再次执行规范检查：npx eslint src
此时命令行不再报错。

在webpack中配置eslint

业务代码不再具体体现，主要分享eslint的配置方式

需借助eslint-loader:

npm  i  eslint-loader  --save-dev

在webpack.config.js里配置：

module: { 
    rules: [{
      test: /\.js$/,
      exclude: /node_modules/,
      use: ['babel-loader', 'eslint-loader'] // loader的执行顺序是从后向前的，这里先执行eslint-loader
    }]
}

当遇到一个js文件的时候，我们会先使用eslint-loader检查代码是否规范，然后再去使用babel-loader做代码的转换。

执行打包：

npm  run  start

会在命令行中提示代码规范错误❌. 如果我们期望当不规范代码出现时，直接在浏览器页面弹出层提示，可以通过如下配置来完成：（overlay）

webpack.config.js

devServer: {
    overlay: true, // 当运行webpack-dev-server去做打包的时候，一旦遇到语法规范的问题，就会在页面弹出层提示我们
    contentBase: './dist',
    open: true,
    port: 8081,
    hot: true,
    hotOnly: true
}

overlay: true 指当运行webpack-dev-server去做打包的时候，一旦遇到语法规范的问题，就会在页面弹出层提示我们.

再次执行打包，页面提示如下：

这样我们就可以根据报错提示，一一修正不规范代码。

如果我们不想遵循某个规范，可以在 .eslintrc.js 配置项rules里排除掉：

rules: {
    "import/no-extraneous-dependencies": 0, // 不遵循此要求
    "react/prefer-stateless-function": 0,
    "react/jsx-filename-extension": 0
}

把规范项设置为0，既为不遵循此规则。

即便我们的编译器中没有eslint的插件，我们也可以借助eslint-loader依赖，在webpack中的配置，也可以很方便的定位我们代码规范中的问题，同时也能快速的解决。（使用过vue框架的小伙伴应该清楚，在vue开发项目的过程中，也会经常在页面上出现报错想象，是因为在vue-cli脚手架里，已经帮我们封装好了一些插件的配置。原理与我们使用的eslint-loader的配置类似）

注意事项

在webpack.config.js的module配置规则中：

module: { 
    rules: [{
      test: /\.js$/,
      exclude: /node_modules/,
      use: ['babel-loader', {
        loader: 'eslint-loader',
        options: {
          fix: true // 如果存在很浅显的不规范代码，eslint会自动帮你修复掉
        }
      }] 
    }]
}

loader的执行顺序是从后向前的，这里先执行eslint-loader
当遇到一个js文件的时候，我们会先使用eslint-loader检查代码是否规范，然后再去使用babel-loader做代码的转换。

如果把eslint-loader和babel-loader颠倒位置配置，则是不正确的做法，如果非要这么做，那么可以借助 force: “pre” 配置项，强制eslint-loader先执行。如下：

module: { 
    rules: [{
      test: /\.js$/,
      exclude: /node_modules/,
      use: [{
        loader: 'eslint-loader',
        options: {
          fix: true // 如果存在很浅显的不规范代码，eslint会自动帮你修复掉
        },
        force: 'pre' // 强制eslint-loader先执行
      }, 'babel-loader'] 
    }]
}