我一直在尝试按照airbnb风格指南让eslint在现有项目中工作。我的大部分都在工作，但我无法获得用于通过linting的相对进口。我的一个相对导入的例子是：
import { actions as practiceActions } from 'reducers/practice';
会产生以下掉毛错误。
Unable to resolve path to module 'reducers/practice'
我的.eslintrc.json如下：
{
"env": {
"browser": true,
"mocha": true
},
"extends": ["airbnb-base"],
"globals": {
"spy": true,
"stub": true,
"mount": true,
"shallow": true,
"chai": true,
"expect": true,
"sinon": true,
"getStoreAction": true,
"getMockStore": true,
"render": true
},
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"plugins": [
"react"
],
"rules": {
"semi": 2,
"max-len": [1, 100, 2],
"indent": ["error", 4],
"import/extensions": ["warn", "never"],
"react/jsx-uses-vars": "error",
"react/jsx-uses-react": "error"
},
"settings" : {
"import/extensions": ["js", "jsx", "png"],
"import/resolver": { //note that I have also tried just using "webpack" as the resolver, with the same outcome.
"node": {
"extensions": [".js",".jsx"]
}
},
"import/ignore": ["node_modules", ".(scss|less|css)$"]
}
}
我的webpack配置很长，但它是create react app的默认配置。没有人工更改。
module.exports = {
devtool: 'cheap-module-source-map',
entry: [
require.resolve('./polyfills'),
require.resolve('react-dev-utils/webpackHotDevClient'),
paths.appIndexJs,
],
output: {
pathinfo: true,
filename: 'static/js/bundle.js',
chunkFilename: 'static/js/[name].chunk.js',
publicPath: publicPath,
devtoolModuleFilenameTemplate: info =>
path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
},
resolve: {
modules: ['node_modules', paths.appNodeModules].concat(
process.env.NODE_PATH.split(path.delimiter).filter(Boolean),
),
extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],
alias: {
'react-native': 'react-native-web',
},
plugins: [
new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
],
},
module: {
strictExportPresence: true,
rules: [
{
test: /\.(js|jsx|mjs)$/,
enforce: 'pre',
use: [
{
options: {
formatter: eslintFormatter,
eslintPath: require.resolve('eslint'),
},
loader: require.resolve('eslint-loader'),
},
],
include: paths.appSrc,
},
{
oneOf: [
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: require.resolve('url-loader'),
options: {
limit: 10000,
name: 'static/media/[name].[hash:8].[ext]',
},
},
// Process JS with Babel.
{
test: /\.(js|jsx|mjs)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
cacheDirectory: true,
},
},
{
test: /\.module.css$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
modules: true,
localIdentName: '[path]__[name]___[local]',
},
},
{
loader: require.resolve('postcss-loader'),
options: {
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
],
},
{
test: /\.css$/,
exclude: /\.module\.css$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
],
},
{
exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/],
loader: require.resolve('file-loader'),
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
},
],
},
],
},
plugins: [
new InterpolateHtmlPlugin(env.raw),
new HtmlWebpackPlugin({
inject: true,
template: paths.appHtml,
}),
new webpack.NamedModulesPlugin(),
new webpack.DefinePlugin(env.stringified),
new webpack.HotModuleReplacementPlugin(),
new CaseSensitivePathsPlugin(),
new WatchMissingNodeModulesPlugin(paths.appNodeModules),
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
],
node: {
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty',
},
performance: {
hints: false,
},
其他一切看起来都很好用，并且相对导入在应用程序中起作用。我不能让他们被我的短信认出来。
答案 0 :(得分：0)
我建议您进一步查看eslint-plugin-imports webpack resolver的文档。具体来说，尝试在.eslintrc.json中明确传递webpack配置的位置：
{
// ...
"settings": {
"import/resolver": {
"webpack": {
"config": "my.webpack.config.js"
}
}
// ...
}
}
希望这会导致解析器获取webpack配置中的所有resolve选项。