Eslint的配置相对复杂一点,记录一下项目中使用的配置,以备后续查阅。
1. 下载Eslint插件并在webpack的配置文件中声明、初始化
const EslintWebpackPlugin = require("eslint-webpack-plugin");
plugins: [
//eslint用于代码规范检查,作用相当于js的编译器
//eslint的配置还需要在根目录下的.eslintrc.js配置文件中指定更多规则
new EslintWebpackPlugin({
context: path.resolve(__dirname, "../src"),
exclude: "node_modules", //node_modules不做检查
cache: true,
cacheLocation: path.resolve(__dirname, "../node_modules/.cache/.eslintcache"),
}),
]
2. 在项目的根目录下新建.eslintrc.js文件,需要注意文件名的拼写,以·开头;在eslint配置文件中继承React官方规则,并配置babelOptions以解决报错问题:
module.exports = {
extends: ["react-app"], //继承react官方规则
parserOptions: {
babelOptions: {
presets: [
//继承react官方规则会有报错,通过以下配置解决报错问题
["babel-preset-react-app", false],
"babel-preset-react-app/prod",
],
},
},
};