create-react-app-typescript
create-react-app-typescript copied to clipboard
Project wide checking and linting with vscode
Is this a bug report?
No
Sharing a method to get project wide type checking and linting with errors in the vscode problems window. By default vscode tslint and tsserver will only show problems for currently open files.
Setup a vscode task with a problem matcher to watch the prettified output of webpack for problems. Type and lint errors will show up in the Problems window for all files in the project. Currently working, but the severity is not provided in the output from webpack.
.vscode/tasks.json
{
"version": "2.0.0",
"tasks": [
{
"type": "npm",
"script": "start",
"problemMatcher": {
"owner": "typescript",
"severity": "warning",
"applyTo": "closedDocuments", //"allDocuments"
"fileLocation": "absolute",
"pattern": [
{
"regexp": "^\\s*(.+)$",
"file": 1
},
{
"regexp": "^\\s*\\((\\d*),?(\\d*)\\):?\\s*(.*)$",
"line": 1,
"column": 2,
"message": 3
}
],
"background": {
"activeOnStart": false,
"beginsPattern": "^\\s*Compiled.*$",
"endsPattern": "^\\s*Compiling.*$"
}
},
"isBackground": true
}
]
}
I set the task to only show errors on closedDocuments as I use the tslint-language-service plugin for open files as it updates faster.
tsconfig.json
"plugins": [
{
"name": "tslint-language-service",
"configFile": "./tslint.json"
}
]
Alternatives: tsserver GeterrForProject - potentially get a list of all errors for the project using the language service. Preferred as the language service provides vscodes typscript support already.
Add a Formatter to \fork-ts-checker-webpack-plugin\lib\formatter
Or Update the react-dev-utils\WebpackDevServerUtils.js formatWebpackMessages to return a known format.