react 引入eslint

最新推荐文章于 2024-09-27 08:57:30 发布

原创最新推荐文章于 2024-09-27 08:57:30 发布 · 291 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react #eslint #代码规范 #webpack

react 同时被 3 个专栏收录

7 篇文章

订阅专栏

webpack

3 篇文章

订阅专栏

前端自动化

3 篇文章

订阅专栏

本文详细介绍如何在项目中配置ESLint与Babel，包括安装依赖包、设置Webpack规则、配置ESLint规则以及如何在package.json中添加脚本运行ESLint检查。通过遵循这些步骤，你可以确保代码质量和一致性。

npm install --save-dev eslint-loader  eslint   eslint-plugin-react  babel-eslint 

npm install --save-dev eslint-config-airbnb

//webpack.config.js
rules:[
{//匹配所有以js或者jsx结尾的文件，并用 babel-preset-env和babel-preset-react进行解析
    test: /\.js$/,
    use: [
        {loader: "eslint-loader"},
        {
            loader: "babel-loader",
            options: {
                presets: [["env"], ["react"]]
            }
        }
    ],
},
]

//package.js
"scripts": {
  "lint": "eslint --ext .js src"
},


//.eslintrc
{
	"extends":"eslint-config-airbnb",//引入airbnb,不需要可以删除
    // 环境，这里可以设置环来做区别判断
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true
    },
    // 解析器用于解析代码
    "parser": "babel-eslint",
    // 第三方插件
    "plugins": [
        "react"
    ],
    "rules": {
        "no-alert":2
    }
}