我很难在我的Webpack项目中插入一个Typescript linter。
显然eslint-loader
已经过时了,他们给予了eslint-webpack-plugin
作为替代。另外,我使用的是typescript-eslint/parser
而不是tslint
(deprecated)问题是我在.eslintrc.js
中设置的规则似乎没有得到考虑。我在.eslintrc
中添加了一个简单的规则,当使用分号时会抛出错误。
export default class A {
static yes = 'this is static'; // ";" <- should be invalidated by eslint
}
我的相依性为:
"@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"
如果我理解正确的话,它应该是这样工作的:
# # # # # # # # # # # # # #
@typescript-eslint/parser --> eslint-webpack-plugin --> # #
(uses eslint?) (replaces eslint-loader) # webpack v4 #
# w/ webpack-dev-server #
typescript --> ts-loader --> # #
# # # # # # # # # # # # # #
边注:* 我使用的是webpack-dev-server
,而不是webpack-cli
的服务命令doesn't seem to work quite yet with webpack
v5*。
启动服务器时运行的命令:webpack-dev-server --hot --inline
- 项目结构:
./
├─── src
│ └─── index.ts
└─── dist
├─── bundle.js
└─── index.html <- imports bundle.js
*webpack.配置.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"
]
}
3条答案
按热度按时间ttp71kqs1#
我在尝试将
eslint-webpack-plugin
与.vue
文件一起使用时遇到了类似的问题。我的解决方案是使用
extensions
设置而不是files
。dpiehjr42#
我修复了这个问题,我当前的ESLintPlugin选项对象如下:
希望这对你有帮助。
PD:
context
属性是您的 *.js或 *.ts文件相对于您的package.json
文件的根位置,您可以使用path.resolve(__dirname, './src/scripts');
或任何您存储脚本的位置。guykilcj3#
我在尝试使用Webpack设置狭缝时遇到了同样的问题。我通过使用Webpack内部的覆盖配置解决了这个问题
您可以在官方eslint文档www.example.com中找到它https://eslint.org/docs/latest/developer-guide/nodejs-api#-new-eslintoptions