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
./
├─── src
│ └─── index.ts
└─── dist
├─── bundle.js
└─── index.html <- imports bundle.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'),
},
}
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/*" ],
}
{
"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"
]
}
Setting up ESLint with Webpack and TypeScript Install dev dependencies: eslint-loader : eslint webpack loader. @typescript-eslint/parser : The parser that will allow ESLint to lint TypeScript code. @typescript-eslint/eslint-plugin : A plugin that contains ESLint rules that are TypeScript specific.
ESLint is a JavaScript linter that you can use to lint either TypeScript or JavaScript code.
Eslint is a linter that enforces uniform JavaScript coding standard so that the code contributed by different developers conform to the same coding styles and recommended JavaScript practices.
webpack.config.js ℹ️ webpack-copy-plugin is not designed to copy files generated from the build process; rather, it is to copy files that already exist in the source tree, as part of the build process.
Add ESLint to Webpack configs Update your webpack.config.js file with: This will configure ESLInt as part of the Webpack's build process with eslint-loader. After each build, any ESLint errors or warnings will be logged in your terminal with ESLint errors preventing your app to compile.
@typescript-eslint/eslint-plugin: plugin with a set of recommended TypeScript rules Similar to Typescript compiler settings, you can either use the command line to generate a configuration file using the --init flag from ESLint or create it manually. Either way, it’s mandatory to have your ESLint configuration file.
What is ESLint? One of the most popular tools for linting is ESLint, which will analyze your code to not only find potential bugs, but also to improve your code quality by defining coding conventions, then enforcing them automatically. Let’s see how to install ESLint into our TypeScript project.
With TypeScript, there are 2 linting solutions: 1. ESLint and 2. TSLint. The TypeScript team has highlighted in their roadmap that they will be focusing their efforts on ESLint rather than TSLint where they state: ESLint already has the more-performant architecture... we'll be switching the TypeScript repository over to using ESLint... - Source
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 of files
. Try this:
new ESLintPlugin({
extensions: ['ts']
})
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With