Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/eamodio/vscode-tsl-problem-matcher
TypeScript + Webpack Problem Matchers for VS Code
https://github.com/eamodio/vscode-tsl-problem-matcher
typescript vscode vscode-extension webpack
Last synced: about 1 month ago
JSON representation
TypeScript + Webpack Problem Matchers for VS Code
- Host: GitHub
- URL: https://github.com/eamodio/vscode-tsl-problem-matcher
- Owner: eamodio
- License: mit
- Created: 2018-08-17T06:17:40.000Z (over 6 years ago)
- Default Branch: main
- Last Pushed: 2023-07-12T03:17:16.000Z (over 1 year ago)
- Last Synced: 2024-04-14T22:12:18.391Z (9 months ago)
- Topics: typescript, vscode, vscode-extension, webpack
- Homepage:
- Size: 79.1 KB
- Stars: 43
- Watchers: 4
- Forks: 10
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# TypeScript + Webpack Problem Matchers for VS Code
Provides [problem matchers](https://code.visualstudio.com/docs/editor/tasks#_processing-task-output-with-problem-matchers) for use with TypeScript projects using [Webpack](https://webpack.js.org/) with [ts-loader](https://github.com/TypeStrong/ts-loader), [fork-ts-checker-webpack-plugin](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin) v5.0 or later with or without [ESLint](https://eslint.org/), and/or [tslint-loader](https://github.com/wbuchwalter/tslint-loader).
## Features
Provides the following problem matchers:
- **\$ts-webpack** — adds errors and warnings reported by [ts-loader](https://github.com/TypeStrong/ts-loader)
- **\$ts-webpack-watch** — adds errors and warnings reported by [ts-loader](https://github.com/TypeStrong/ts-loader) while in watch mode
- **\$ts-checker-webpack** — adds errors and warnings reported by the [fork-ts-checker-webpack-plugin](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin)
- **\$ts-checker-webpack-watch** — adds errors and warnings reported by the [fork-ts-checker-webpack-plugin](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin) while in watch mode
- **\$ts-checker-eslint-webpack** — adds ESLint errors and warnings reported by the [fork-ts-checker-webpack-plugin](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin)
- **\$ts-checker-eslint-webpack-watch** — adds ESLint errors and warnings reported by the [fork-ts-checker-webpack-plugin](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin) while in watch mode
- **\$tslint-webpack** — adds lint warnings reported by tslint-loader
- **\$tslint-webpack-watch** — adds lint warnings reported by tslint-loader while in watch mode
## Usage
The following example shows how to add problem matchers to your project:
```json
{
"version": "2.0.0",
"tasks": [
{
"type": "npm",
"script": "build",
"group": "build",
"problemMatcher": ["$ts-webpack", "$tslint-webpack"]
},
{
"type": "npm",
"script": "watch",
"group": "build",
"isBackground": true,
"problemMatcher": ["$ts-webpack-watch", "$tslint-webpack-watch"]
}
]
}
```
### Webpack v5 (webpack-cli@4)
👉 Using Webpack v5 or later: In order for the _watch_ matchers to work properly in Webpack v4, you must add `--info-verbosity verbose` to your webpack watch command e.g. `webpack --watch --info-verbosity verbose` as this instructs webpack to output lifecycle event messages for each re-compile.
### Webpack v4 (webpack-cli@3)
n order for the _watch_ matchers to work properly, you must add `infrastructureLogging: { level: "log" }` to your `webpack.config.js` as this instructs webpack to output lifecycle event messages for each re-compile.
For example:
```js
// webpack.config.js
module.exports = {
// ...the webpack configuration
infrastructureLogging: {
level: 'log',
},
};
```
👉 In addition, when using the **\$ts-checker-webpack**, **\$ts-checker-webpack-watch**, **\$ts-checker-eslint-webpack**, and **\$ts-checker-eslint-webpack-watch** matchers, you must also set `formatter: 'basic'` in your [fork-ts-checker-webpack-plugin options](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin/tree/alpha#options)
## Custom Usage
You can also use any of the problem matchers as a base problem matcher for your own custom needs:
```json
{
"version": "2.0.0",
"tasks": [
{
"type": "npm",
"script": "build",
"group": "build",
"problemMatcher": ["$ts-webpack", "$tslint-webpack"]
},
{
"type": "npm",
"script": "watch",
"group": "build",
"isBackground": true,
"problemMatcher": [
{
"base": "$ts-webpack",
"background": {
"activeOnStart": true,
"beginsPattern": {
"regexp": ""
},
"endsPattern": {
"regexp": ""
}
}
},
{
"base": "$tslint-webpack",
"background": {
"activeOnStart": true,
"beginsPattern": {
"regexp": ""
},
"endsPattern": {
"regexp": ""
}
}
}
]
}
]
}
```