${content}
9 | `;
10 |
--------------------------------------------------------------------------------
/packages/formatter/src/prettify.ts:
--------------------------------------------------------------------------------
1 | import parserTypescript from "prettier/parser-typescript";
2 | import { format } from "prettier/standalone";
3 |
4 | export function prettify(text: string) {
5 | return format(text, {
6 | plugins: [parserTypescript],
7 | parser: "typescript",
8 | printWidth: 60,
9 | singleAttributePerLine: false,
10 | arrowParens: "avoid",
11 | });
12 | }
13 |
--------------------------------------------------------------------------------
/apps/vscode-extension/syntaxes/type.tmGrammar.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "TypeScript Type",
3 | "scopeName": "source.type",
4 | "patterns": [
5 | {
6 | "include": "source.ts#type"
7 | },
8 | {
9 | "include": "source.ts#directives"
10 | },
11 | {
12 | "include": "source.ts#statements"
13 | },
14 | {
15 | "include": "source.ts#shebang"
16 | }
17 | ]
18 | }
19 |
--------------------------------------------------------------------------------
/packages/vscode-formatter/src/components/spanBreak.ts:
--------------------------------------------------------------------------------
1 | import { d } from "@pretty-ts-errors/utils";
2 |
3 | /**
4 | * Since every thing in the extension hover split into spans,
5 | * we need to close the previous span before we're opening a new one
6 | * Note: the line breaks is important here
7 | */
8 | export const spanBreak = (children: string) => d/*html*/ `
9 |
10 | ${children}
11 |
12 | `;
13 |
--------------------------------------------------------------------------------
/apps/vscode-extension/src/test/suite/extension.test.ts:
--------------------------------------------------------------------------------
1 | // You can import and use all API from the 'vscode' module
2 | // as well as import your extension to test it
3 | import * as vscode from "vscode";
4 |
5 | suite("Extension Test Suite", () => {
6 | /**
7 | * The tests moved to the formatter package, I'm leaving
8 | * this here for future tests to the VSCode extension
9 | */
10 | vscode.window.showInformationMessage("Start all tests.");
11 | });
12 |
--------------------------------------------------------------------------------
/packages/vscode-formatter/src/components/anyCodeBlock.ts:
--------------------------------------------------------------------------------
1 | import { inlineCodeBlock, multiLineCodeBlock } from "./codeBlock";
2 | import { unstyledCodeBlock } from "./plainCodeBlock";
3 |
4 | export const anyCodeBlock = (
5 | code: string,
6 | language?: string,
7 | multiLine?: boolean
8 | ) => {
9 | if (!language) {
10 | return unstyledCodeBlock(code);
11 | }
12 | if (multiLine) {
13 | return multiLineCodeBlock(code, language);
14 | }
15 | return inlineCodeBlock(code, language);
16 | };
17 |
--------------------------------------------------------------------------------
/packages/formatter/README.md:
--------------------------------------------------------------------------------
1 | # Pretty TypeScript Error formatter
2 |
3 | The formatting package of [pretty-ts-errors](https://github.com/yoavbls/pretty-ts-errors)
4 |
5 | # Usage
6 |
7 | ```typescript
8 | import { formatDiagnosticMessage } from "@pretty-ts-errors/formatter";
9 |
10 | function codeBlock(code: string, language?: string, multiLine?: boolean) {
11 | return `\`\`\`${language}
12 | ${code}
13 | \`\`\`
14 | `;
15 | }
16 |
17 | formatDiagnosticMessage(
18 | `Type 'string' is not assignable to type 'number'.`,
19 | codeBlock
20 | );
21 | ```
22 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: Bug report
3 | about: Create a report to help us improve
4 | title: ""
5 | labels: bug
6 | assignees: ""
7 | ---
8 |
9 | **Describe the bug**
10 | A clear and concise description of what the bug is.
11 |
12 | **Expected behavior**
13 | A clear and concise description of what you expected to happen.
14 |
15 | **Original error**
16 | If this bug is related to an error that is not formatting well, please
17 | attach the original error in a code block:
18 |
19 | Type 'number' is not assignable to type 'string'.ts(2322)
20 |
21 |
22 | **Screenshots**
23 | If applicable, add screenshots to help explain your problem.
24 |
--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | // Place your settings in this file to overwrite default and user settings.
2 | {
3 | "files.exclude": {
4 | "out": false, // set this to true to hide the "out" folder with the compiled JS files
5 | "dist": false // set this to true to hide the "dist" folder with the compiled JS files
6 | },
7 | "search.exclude": {
8 | "out": true, // set this to false to include "out" folder in search results
9 | "dist": true // set this to false to include "dist" folder in search results
10 | },
11 | // Turn off tsc task auto detection since we have the necessary tasks as npm scripts
12 | "typescript.tsc.autoDetect": "off"
13 | }
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "private": true,
3 | "scripts": {
4 | "build": "turbo run build",
5 | "dev": "turbo run dev",
6 | "lint": "turbo run lint",
7 | "format": "prettier --write \"**/*.{ts,tsx,md}\""
8 | },
9 | "engines": {
10 | "node": ">=20"
11 | },
12 | "devDependencies": {
13 | "@eslint/js": "^9.15.0",
14 | "@types/node": "^20.19.21",
15 | "eslint": "^9.15.0",
16 | "globals": "^16.4.0",
17 | "prettier": "^2.8.8",
18 | "turbo": "^2.1.3",
19 | "typescript": "^5.7.2",
20 | "typescript-eslint": "^8.15.0"
21 | },
22 | "name": "pretty-ts-errors-mono",
23 | "packageManager": "npm@10.0.0",
24 | "workspaces": [
25 | "packages/*",
26 | "apps/*"
27 | ]
28 | }
29 |
--------------------------------------------------------------------------------
/apps/vscode-extension/src/provider/hoverProvider.ts:
--------------------------------------------------------------------------------
1 | import { HoverProvider } from "vscode";
2 | import { uriStore } from "./uriStore";
3 |
4 | export const hoverProvider: HoverProvider = {
5 | provideHover(document, position, _token) {
6 | const itemsInUriStore = uriStore[document.uri.fsPath];
7 |
8 | if (!itemsInUriStore) {
9 | return null;
10 | }
11 |
12 | const itemInRange = itemsInUriStore.filter((item) =>
13 | item.range.contains(position)
14 | );
15 |
16 | if (itemInRange.length === 0) {
17 | return null;
18 | }
19 |
20 | const first = itemInRange[0];
21 | if (!first) {
22 | return null;
23 | }
24 | return {
25 | range: first.range,
26 | contents: itemInRange.flatMap((item) => item.contents),
27 | };
28 | },
29 | };
30 |
--------------------------------------------------------------------------------
/packages/vscode-formatter/src/format/formatDiagnostic.ts:
--------------------------------------------------------------------------------
1 | import { formatDiagnosticMessage } from "@pretty-ts-errors/formatter";
2 | import { Diagnostic } from "vscode-languageserver-types";
3 | import { title } from "../components/title";
4 | import { anyCodeBlock } from "../components/anyCodeBlock";
5 | import { d } from "@pretty-ts-errors/utils";
6 | import { embedSymbolLinks } from "./embedSymbolLinks";
7 | import { identSentences } from "./identSentences";
8 |
9 | export function formatDiagnostic(diagnostic: Diagnostic) {
10 | const newDiagnostic = embedSymbolLinks(diagnostic);
11 |
12 | return d/*html*/ `
13 | ${title(diagnostic)}
14 |
15 | ${formatDiagnosticMessage(
16 | identSentences(newDiagnostic.message),
17 | anyCodeBlock
18 | )}
19 |
20 | `;
21 | }
22 |
--------------------------------------------------------------------------------
/docs/pretty-ts-errors-hack.css:
--------------------------------------------------------------------------------
1 | /* Allow copying */
2 | .codicon-none {
3 | user-select: text !important;
4 | -webkit-user-select: text !important;
5 | }
6 |
7 | /* Hide errors */
8 | div.monaco-hover-content:has(.codicon-none) > .hover-row:first-child {
9 | display: none !important;
10 | }
11 | div.monaco-hover-content:has([style="color:#f96363;"]) > .hover-row:first-child {
12 | display: none !important
13 | }
14 |
15 | /* Change order */
16 | .monaco-hover .monaco-hover-content {
17 | display: flex;
18 | flex-direction: column;
19 | }
20 | .monaco-hover .monaco-hover-content .hover-row {
21 | order: 2;
22 | }
23 | .monaco-hover .monaco-hover-content .hover-row:has(.codicon-none) {
24 | order: 1;
25 | }
26 | .monaco-hover .monaco-hover-content .hover-row:has([style="color:#f96363;"]) {
27 | order: 1;
28 | }
--------------------------------------------------------------------------------
/packages/formatter/vitest.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "vitest/config";
2 | import path from "path";
3 |
4 | export default defineConfig({
5 | test: {
6 | environment: "node",
7 | globals: true,
8 | include: ["test/**/*.vitest.{ts,tsx}", "test/**/*.spec.{ts,tsx}"],
9 | },
10 | resolve: {
11 | alias: [
12 | {
13 | // Map direct src imports of the sibling vscode-formatter package
14 | find: "@pretty-ts-errors/vscode-formatter/src",
15 | replacement: path.resolve(__dirname, "../vscode-formatter/src"),
16 | },
17 | {
18 | // Map the package root to its src index for local testing
19 | find: "@pretty-ts-errors/vscode-formatter",
20 | replacement: path.resolve(
21 | __dirname,
22 | "../vscode-formatter/src/index.ts"
23 | ),
24 | },
25 | ],
26 | },
27 | });
28 |
--------------------------------------------------------------------------------
/apps/vscode-extension/src/test/suite/index.ts:
--------------------------------------------------------------------------------
1 | import * as path from "path";
2 | import Mocha from "mocha";
3 | import { glob } from "glob";
4 |
5 | export function run(
6 | testsRoot: string,
7 | cb: (error: unknown | null, failures?: number) => void
8 | ): void {
9 | // Create the mocha test
10 | const mocha = new Mocha({
11 | ui: "tdd",
12 | color: true,
13 | });
14 |
15 | glob("**/**.test.js", { cwd: testsRoot })
16 | .then((files) => {
17 | // Add files to the test suite
18 | files.forEach((f) => mocha.addFile(path.resolve(testsRoot, f)));
19 |
20 | try {
21 | // Run the mocha test
22 | mocha.run((failures) => {
23 | cb(null, failures);
24 | });
25 | } catch (err) {
26 | console.error(err);
27 | cb(err);
28 | }
29 | })
30 | .catch((err) => {
31 | return cb(err);
32 | });
33 | }
34 |
--------------------------------------------------------------------------------
/apps/vscode-extension/src/test/runTest.ts:
--------------------------------------------------------------------------------
1 | import * as path from "path";
2 |
3 | import { runTests } from "@vscode/test-electron";
4 |
5 | async function main() {
6 | try {
7 | // The folder containing the Extension Manifest package.json
8 | // Passed to `--extensionDevelopmentPath`
9 | const extensionDevelopmentPath = path.resolve(__dirname, "../../");
10 |
11 | // The path to test runner
12 | // Passed to --extensionTestsPath
13 | const extensionTestsPath = path.resolve(__dirname, "./suite/index");
14 |
15 | // Download VS Code, unzip it and run the integration test
16 | await runTests({
17 | version: "1.77.0",
18 | extensionDevelopmentPath,
19 | extensionTestsPath,
20 | launchArgs: ["--disable-extensions"],
21 | });
22 | } catch (err) {
23 | console.error("Failed to run tests");
24 | process.exit(1);
25 | }
26 | }
27 |
28 | main();
29 |
--------------------------------------------------------------------------------
/packages/vscode-formatter/src/format/embedSymbolLinks.ts:
--------------------------------------------------------------------------------
1 | import { Diagnostic } from "vscode-languageserver-types";
2 |
3 | export function embedSymbolLinks(diagnostic: Diagnostic): Diagnostic {
4 | if (
5 | !diagnostic?.relatedInformation?.[0]?.message?.includes("is declared here")
6 | ) {
7 | return diagnostic;
8 | }
9 | const ref = diagnostic.relatedInformation[0];
10 | const symbol = ref?.message.match(/(?| 25 | ${" ".repeat(3).repeat(whiteSpacesCount)} 26 | 27 | 28 | | 29 |${line} | 30 |