├── .gitignore ├── icon.png ├── src ├── test │ ├── suite │ │ ├── extension.test.ts │ │ └── index.ts │ └── runTest.ts └── extension.ts ├── .vscodeignore ├── README.md ├── tsconfig.json ├── CHANGELOG.md ├── LICENSE └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | out 2 | dist 3 | node_modules 4 | .vscode-test/ 5 | *.vsix 6 | -------------------------------------------------------------------------------- /icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mohd-akram/vscode-html-format/HEAD/icon.png -------------------------------------------------------------------------------- /src/test/suite/extension.test.ts: -------------------------------------------------------------------------------- 1 | import * as vscode from "vscode"; 2 | 3 | suite("Extension Test Suite", () => { 4 | vscode.window.showInformationMessage("Start all tests."); 5 | }); 6 | -------------------------------------------------------------------------------- /.vscodeignore: -------------------------------------------------------------------------------- 1 | .vscode/** 2 | .vscode-test/** 3 | src/** 4 | .gitignore 5 | .yarnrc 6 | vsc-extension-quickstart.md 7 | **/tsconfig.json 8 | **/.eslintrc.json 9 | **/*.map 10 | **/*.ts 11 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # HTML Format for Visual Studio Code 2 | 3 | Formats HTML documents by auto-indenting, wrapping and removing unnecessary 4 | whitespace while preserving newlines. 5 | 6 | ## Usage 7 | 8 | To format an HTML or Handlebars document you have open, use the 9 | **Format Document** command. 10 | 11 | ## Extension Settings 12 | 13 | `editor.wordWrapColumn` controls the maximum line length. 14 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "commonjs", 4 | "target": "ES2020", 5 | "outDir": "out", 6 | "lib": ["ES2020"], 7 | "sourceMap": true, 8 | "rootDir": "src", 9 | "strict": true /* enable all strict type-checking options */, 10 | /* Additional Checks */ 11 | "noImplicitReturns": true /* Report error when not all code paths in function return a value. */, 12 | "noFallthroughCasesInSwitch": true /* Report errors for fallthrough cases in switch statement. */, 13 | "noUnusedParameters": true /* Report errors on unused parameters. */, 14 | "noUnusedLocals": true 15 | }, 16 | "exclude": ["node_modules", ".vscode-test"] 17 | } 18 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | ## 0.1.6 4 | 5 | - Update html-format to 1.1.6. 6 | 7 | ## 0.1.5 8 | 9 | - Update html-format to 1.1.5. 10 | 11 | ## 0.1.4 12 | 13 | - Update html-format to 1.1.4. 14 | 15 | ## 0.1.3 16 | 17 | - Update html-format to 1.1.3. 18 | 19 | ## 0.1.2 20 | 21 | - Update html-format to 1.1.2. 22 | 23 | ## 0.1.1 24 | 25 | - Update html-format to 1.1.1. 26 | 27 | ## 0.1.0 28 | 29 | - Update html-format to 1.1.0. 30 | 31 | ## 0.0.5 32 | 33 | - Update html-format to 1.0.2. 34 | 35 | ## 0.0.4 36 | 37 | - Add instructions on how to format a document. 38 | 39 | ## 0.0.3 40 | 41 | - Update html-format to 1.0.1. 42 | 43 | ## 0.0.2 44 | 45 | - Use html-format package for formatting. 46 | 47 | ## 0.0.1 48 | 49 | - Initial release. 50 | -------------------------------------------------------------------------------- /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({ extensionDevelopmentPath, extensionTestsPath }); 17 | } catch (err) { 18 | console.error("Failed to run tests"); 19 | process.exit(1); 20 | } 21 | } 22 | 23 | main(); 24 | -------------------------------------------------------------------------------- /src/test/suite/index.ts: -------------------------------------------------------------------------------- 1 | import * as path from "path"; 2 | 3 | import * as Mocha from "mocha"; 4 | import { glob } from "glob"; 5 | 6 | export function run(): Promise { 7 | // Create the mocha test 8 | const mocha = new Mocha({ 9 | ui: "tdd", 10 | color: true, 11 | }); 12 | 13 | const testsRoot = path.resolve(__dirname, ".."); 14 | 15 | return new Promise(async (c, e) => { 16 | const files = await glob("**/**.test.js", { cwd: testsRoot }); 17 | 18 | // Add files to the test suite 19 | files.forEach((f) => mocha.addFile(path.resolve(testsRoot, f))); 20 | 21 | try { 22 | // Run the mocha test 23 | mocha.run((failures) => { 24 | if (failures > 0) { 25 | e(new Error(`${failures} tests failed.`)); 26 | } else { 27 | c(); 28 | } 29 | }); 30 | } catch (err) { 31 | console.error(err); 32 | e(err); 33 | } 34 | }); 35 | } 36 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2018 Mohamed Akram 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/extension.ts: -------------------------------------------------------------------------------- 1 | import * as vscode from "vscode"; 2 | import format from "html-format"; 3 | 4 | class HTMLDocumentFormatter implements vscode.DocumentFormattingEditProvider { 5 | public provideDocumentFormattingEdits( 6 | document: vscode.TextDocument, 7 | options: vscode.FormattingOptions 8 | ): Thenable { 9 | const { tabSize, insertSpaces } = options; 10 | 11 | const indent = insertSpaces ? " ".repeat(tabSize) : "\t"; 12 | 13 | const { languageId: lang, uri } = document; 14 | const langConfig = vscode.workspace.getConfiguration(`[${lang}]`, uri); 15 | const config = vscode.workspace.getConfiguration("editor", uri); 16 | const width = 17 | langConfig["editor.wordWrapColumn"] || config.get("wordWrapColumn", 80); 18 | 19 | const text = document.getText(); 20 | const range = new vscode.Range( 21 | document.positionAt(0), 22 | document.positionAt(text.length) 23 | ); 24 | return Promise.resolve([ 25 | new vscode.TextEdit(range, format(text, indent, width)), 26 | ]); 27 | } 28 | } 29 | 30 | export function activate(context: vscode.ExtensionContext) { 31 | const formatter = new HTMLDocumentFormatter(); 32 | context.subscriptions.push( 33 | vscode.languages.registerDocumentFormattingEditProvider("html", formatter) 34 | ); 35 | context.subscriptions.push( 36 | vscode.languages.registerDocumentFormattingEditProvider( 37 | "handlebars", 38 | formatter 39 | ) 40 | ); 41 | } 42 | 43 | export function deactivate() {} 44 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vscode-html-format", 3 | "displayName": "HTML Format", 4 | "description": "Format HTML documents.", 5 | "version": "0.1.6", 6 | "publisher": "mohd-akram", 7 | "engines": { 8 | "vscode": "^1.85.0" 9 | }, 10 | "categories": [ 11 | "Formatters" 12 | ], 13 | "activationEvents": [ 14 | "onLanguage:handlebars", 15 | "onLanguage:html" 16 | ], 17 | "main": "./out/extension", 18 | "icon": "icon.png", 19 | "capabilities": { 20 | "documentFormattingProvider": "true" 21 | }, 22 | "scripts": { 23 | "vscode:prepublish": "npm run compile", 24 | "compile": "tsc -p ./", 25 | "watch": "tsc -watch -p ./", 26 | "pretest": "npm run compile", 27 | "test": "node ./out/test/runTest.js" 28 | }, 29 | "repository": { 30 | "type": "git", 31 | "url": "https://github.com/mohd-akram/vscode-html-format.git" 32 | }, 33 | "keywords": [ 34 | "visual studio code", 35 | "html", 36 | "format" 37 | ], 38 | "author": "Mohamed Akram", 39 | "license": "MIT", 40 | "bugs": { 41 | "url": "https://github.com/mohd-akram/vscode-html-format/issues" 42 | }, 43 | "homepage": "https://github.com/mohd-akram/vscode-html-format#readme", 44 | "devDependencies": { 45 | "@types/mocha": "^10.0.6", 46 | "@types/node": "^20.10.6", 47 | "@types/vscode": "^1.85.0", 48 | "@vscode/test-electron": "^2.3.8", 49 | "glob": "^10.3.10", 50 | "mocha": "^10.2.0", 51 | "typescript": "^5.3.3" 52 | }, 53 | "dependencies": { 54 | "html-format": "^1.1.6" 55 | } 56 | } 57 | --------------------------------------------------------------------------------