在将我的React应用程序的软件包从eslint v4升级到v5时,当我运行linter时,我的.scss
文件出现解析错误。我正在使用babel-eslint作为插件。我在下面包括我的package.json,webpack.config.js和.eslintrc文件。我不确定是否是软件包的版本。当我降级到以下级别时,我没有这个问题:
"babel-eslint": "^7.2.3",
"eslint": "^4.19",
"eslint-loader": "^1.8.0",
"eslint-plugin-react": "^7.1.0"
package.json
{
"devDependencies": {
"@babel/cli": "^7.2.3",
"@babel/core": "^7.1.0",
"@babel/plugin-proposal-object-rest-spread": "^7.2.0",
"@babel/polyfill": "^7.2.5",
"@babel/preset-env": "^7.1.0",
"@babel/preset-react": "^7.0.0",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"babel-jest": "^21.2.0",
"babel-loader": "^8.0.2",
"enzyme": "^3.8.0",
"eslint": "^5.12.0",
"eslint-loader": "^2.1.1",
"eslint-plugin-react": "^7.12.4",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"jest": "^21.2.1",
"mini-css-extract-plugin": "^0.5.0",
"react-sortable-hoc": "^1.4.0",
"react-test-renderer": "^16.7.0",
"sinon": "^7.2.2",
"webpack": "^4.28.4",
"webpack-cli": "^3.2.1",
"webpack-dev-server": "^3.1.14",
"webpack-node-externals": "^1.7.2"
},
...
"scripts": {
...
"lint": "eslint 'app/**'",
}
}
webpack.config.js
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = env =>
{
const developMode = (env && env.dev);
const watch = developMode;
return {
mode: (developMode ? 'development' : 'production'),
context: path.resolve(__dirname, './app'),
module: {
rules: [
{
test: /\.m?js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
plugins: [
'@babel/plugin-proposal-object-rest-spread'
],
presets: [
'@babel/preset-env',
'@babel/preset-react'
]
}
}
},
{
test: /\.jsx?$/,
use: [
{
loader: 'eslint-loader'
}
],
exclude: /node_modules/
},
{
test: /\.scss$/,
include: /\.scss$/,
loaders: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader!sass-loader',
}),
},
{
test: /\.css$/,
exclude: /\.scss$/,
use: ['style-loader', 'css-loader']
},
]
},
entry: {
'js/app.file1.js': './exports/file1.js',
'js/app.file2.js': './exports/file2.js',
'css/app.file1.css': './styles/file1.scss',
'css/app.file2.css': './styles/file2.scss'
},
output: {
path: path.resolve(__dirname, './assets'),
filename: '[name]'
},
performance: {
hints: false,
},
resolve: {
modules: [
path.resolve('./app'),
'node_modules'
]
},
plugins: [
new ExtractTextPlugin({
filename: '[name]'
})
],
watch: watch
};
};
.eslintrc
{
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"env": {
"browser": true,
"es6": true
},
"globals": {
"apiRequest": true,
"$": true,
"launchModal": true,
"Promise": true,
"toastr": true,
"localStorage": true
},
"parser": "babel-eslint",
"plugins": [
"react"
],
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"rules": {
"camelcase": [
"error",
{
"properties": "never"
}
],
"curly": "error",
"for-direction": "error",
"global-require": "error",
"indent": [
"error",
4,
{
"SwitchCase": 1,
"ignoredNodes": [
"JSXAttribute",
"JSXSpreadAttribute"
]
}
],
"key-spacing": [
"error",
{
"beforeColon": false,
"afterColon": true,
"mode": "strict"
}
],
"no-case-declarations": "off",
"no-confusing-arrow": [
"error",
{
"allowParens": false
}
],
"no-multi-spaces": "error",
"no-trailing-spaces": "error",
"no-unused-expressions": "error",
"no-var": "error",
"no-whitespace-before-property": "error",
"padding-line-between-statements": [
"error",
{
"blankLine": "always",
"prev": "*",
"next": [
"block-like",
"function",
"multiline-block-like",
"return"
]
}
],
"quotes": [
"error",
"single"
],
"react/class-methods-use-this": "off",
"react/jsx-filename-extension": "off",
"react/jsx-no-bind": "off",
"react/jsx-sort-props": [
"error",
{
"shorthandFirst": true,
"callbacksLast": true
}
],
"react/jsx-uses-react": "error",
"react/jsx-uses-vars": "error",
"react/jsx-wrap-multilines": "off",
"react/prefer-stateless-function": "off",
"react/prop-types": "off",
"react/react-in-jsx-scope": "off",
"react/require-default-props": "off",
"react/sort-comp": "error",
"semi": [
"error",
"always"
],
"sort-imports": [
"error",
{
"ignoreCase": true
}
],
"space-before-blocks": [
"error",
"always"
]
},
"settings": {
"react": {
"version": "detect"
}
}
}