Webpack 显示错误的 eslint linting 错误答案

【问题标题】：Webpack is showing wrong eslint linting errorsWebpack 显示错误的 eslint linting 错误
【发布时间】：2018-08-22 19:19:47
【问题描述】：

当我启动我的开发服务器 webpack 控制台时，一些实际上不存在的 linting 错误。您可以看到下面给出的代码错误是说“字符串必须使用单引号”，但实际上在代码中没有使用单引号。

controller.js

 const columnSelectorCtrl = ($scope, $rootScope, $modal, columnSelectionApi) => {
      const openSelectionPopup = () => {
        const saveSelectionHandler = () => {
          if ($scope.isColumnSelectionToBeSaved) {
            const selectionPayload = {
              pageId: $scope.pageId,
              selectedColumnIds: _.pluck(
                _.filter($scope.columnsList, (column) => column.show), ['id']
              ),
            };

            columnSelectionApi.save(selectionPayload);
          }
        };
        $scope.columnSelectPopup = $modal.open({
          templateUrl: 'columnSelectTemplate.html',
          controller: columnSelectorCtrl,
          scope: $scope,
        });

        return $scope.columnSelectPopup.result.finally(saveSelectionHandler);
      };

      const isColumnShown = (column) => column.show;
      const isAnyColumnShown = (columnsList) => columnsList.some(isColumnShown);
      const mapShownStateWithDefault = (column) =>
        (column.show = column.show_by_default);
      const showDefaultColumnSelection = (columnsList) =>
        columnsList.forEach(mapShownStateWithDefault);

      const determineToShowDefaultSelection = (columnsList) => {
        $scope.$watch(
          'columnsList',
          function(newList, oldList) {
            console.log('config changed');
            if (newList && !isAnyColumnShown(newList)) {
              showDefaultColumnSelection(newList);
            }
          },
          true
        );
      };

      $scope.closeSelectionPopup = () => $scope.columnSelectPopup.close();

      (function initialize() {
        $scope.openColumnsPopup = openSelectionPopup;
        determineToShowDefaultSelection($scope.columnsList);
      })();
    };

    export {
      columnSelectorCtrl,
    };

【问题讨论】：

会不会是 eslint 对转译的 javascript 而不是你原来的 javascript 进行了 linting？
我使用 npm start 运行此代码。你有什么解决方案我可以解决这个问题吗？
这真的取决于你的 webpack 配置。没有看到就很难说。

标签： javascript webpack webpack-dev-server eslint

【解决方案1】：

babel 在 eslint 开始扫描之前正在转译代码。

    loaders: [
      // Javascript
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
        options: {
          fix: true,
          quiet: true,
          failOnError: true,
        },
       {
        enforce: "post",
        test: /\.(js|jsx)$/,
        include: paths.appSrc,
        loader: 'babel',
        query: {
          presets: ['es2015'],
          // This is a feature of `babel-loader` for webpack (not Babel itself).
          // It enables caching results in ./node_modules/.cache/babel-loader/
          // directory for faster rebuilds.
          cacheDirectory: true,
        },
        options: {
          fix: true,
          quiet: true,
          failOnError: false,
        },
      },
      },

在预加载器属性中加载 eslint-loader

 preLoaders: [
      // Javascript
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
        options: {
          fix: true,
          quiet: true,
          failOnError: true,
        },
      },
    ],

【讨论】：