I am having a hard time plugging a Typescript linter in my Webpack project.
Apparently eslint-loader
is deprecated, they give eslint-webpack-plugin
as an alternative. Additionally, I am using typescript-eslint/parser
instead of tslint
(deprecated) The problem is the rules I set inside my .eslintrc.js
don't seem to get accounted for. I have added a simple rule in .eslintrc
that should throw an error when using a semicolon.
export default class A {
static yes = 'this is static'; // ";" <- should be invalidated by eslint
}
My dependencies are:
"@typescript-eslint/eslint-plugin": "^4.5.0",
"@typescript-eslint/parser": "^4.5.0",
"eslint": "^7.11.0",
"eslint-webpack-plugin": "^2.1.0",
"ts-loader": "^8.0.6",
"typescript": "^4.0.3",
"webpack": "^4.41.3",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.9.0"
If I understand correctly it should work like so:
# # # # # # # # # # # # # #
@typescript-eslint/parser --> eslint-webpack-plugin --> # #
(uses eslint?) (replaces eslint-loader) # webpack v4 #
# w/ webpack-dev-server #
typescript --> ts-loader --> # #
# # # # # # # # # # # # # #
Side note: I'm using webpack-dev-server
instead of webpack-cli
's serve command which doesn't seem to work quite yet with webpack
v5.
The command I run to launch the server: webpack-dev-server --hot --inline
- project structure:
./
├─── src
│ └─── index.ts
└─── dist
├─── bundle.js
└─── index.html <- imports bundle.js
- webpack.config.js:
const path = require('path')
const ESLintPlugin = require('eslint-webpack-plugin')
module.exports = {
mode: 'development',
entry: './src/index.ts',
devtool: 'inline-source-map',
devServer: {
contentBase: path.resolve(__dirname, 'dist')
// publicPath: "/assets", // path of the served resources (js, img, fonts...)
},
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
],
},
plugins: [
new ESLintPlugin({
files: 'src/**/*.ts',
})
],
resolve: {
extensions: [ '.tsx', '.ts', '.js' ],
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
}
- .eslintrc.js:
module.exports = {
root: true,
env: {
node: true,
},
parser: '@typescript-eslint/parser',
extends: [
'plugin:@typescript-eslint/recommended'
],
parserOptions: {
ecmaVersion: 2020,
sourceType: 'module',
},
rules: {
'semi': ['error', 'never'],
},
ignorePatterns: [ "dist/*" ],
}
- tsconfig.json:
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"importHelpers": true,
"moduleResolution": "node",
"experimentalDecorators": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"dom",
"dom.iterable",
]
},
"include": [
"src/**/*.ts",
"tests/**/*.ts",
],
"exclude": [
"node_modules"
]
}
I experienced a similar issue when trying to use the
eslint-webpack-plugin
with.vue
files.My solution was to use the
extensions
setting instead offiles
. Try this: