1. typescript-formatter
Formatter of TypeScript code
typescript-formatter
Package: typescript-formatter
Created by: vvakame
Last modified: Tue, 28 Jun 2022 01:54:28 GMT
Version: 7.2.2
License: MIT
Downloads: 146,513
Repository: https://github.com/vvakame/typescript-formatter

Install

npm install typescript-formatter
yarn add typescript-formatter

TypeScript Formatter (tsfmt)

npm
Build Status
Dependency Status
npm
GitHub stars

A TypeScript code formatter powered by TypeScript Compiler Service.

 $ tsfmt --help
  Usage: tsfmt [options] [--] [files...]

  Options:

    -r, --replace         replace .ts file
    --verify              checking file format
    --baseDir <path>      config file lookup from <path>
    --stdin               get formatting content from stdin
    --no-tsconfig         don't read a tsconfig.json
    --no-tslint           don't read a tslint.json
    --no-editorconfig     don't read a .editorconfig
    --no-vscode           don't read a .vscode/settings.json
    --no-tsfmt            don't read a tsfmt.json
    --useTsconfig <path>  using specified config file instead of tsconfig.json
    --useTslint <path>    using specified config file instead of tslint.json
    --useTsfmt <path>     using specified config file instead of tsfmt.json
    --verbose             makes output more verbose

Installation

npm install -g typescript-formatter

Usage

Format or verify specific TypeScript files

 $ cat sample.ts
class Sample {hello(word="world"){return "Hello, "+word;}}
new Sample().hello("TypeScript");
 # basic. read file, output to stdout.
$ tsfmt sample.ts
class Sample { hello(word = "world") { return "Hello, " + word; } }
new Sample().hello("TypeScript");
 # from stdin. read from stdin, output to stdout.
$ cat sample.ts | tsfmt --stdin
class Sample { hello(word = "world") { return "Hello, " + word; } }
new Sample().hello("TypeScript");
 # replace. read file, and replace file.
$ tsfmt -r sample.ts
replaced sample.ts
$ cat sample.ts
class Sample { hello(word = "world") { return "Hello, " + word; } }
new Sample().hello("TypeScript");
 # verify. checking file format.
$ tsfmt --verify sample.ts
sample.ts is not formatted
$ echo $?
1

Reformat all files in a TypeScript project

If no files are specified on the command line but
a TypeScript project file (tsconfig.json) exists,
the list of files will be read from the project file.

 # reads list of files to format from tsconfig.json
tsfmt -r

Read Settings From Files

1st. Read settings from tsfmt.json. Below is the example with default values:

 {
  "baseIndentSize": 0,
  "indentSize": 4,
  "tabSize": 4,
  "indentStyle": 2,
  "newLineCharacter": "\r\n",
  "convertTabsToSpaces": true,
  "insertSpaceAfterCommaDelimiter": true,
  "insertSpaceAfterSemicolonInForStatements": true,
  "insertSpaceBeforeAndAfterBinaryOperators": true,
  "insertSpaceAfterConstructor": false,
  "insertSpaceAfterKeywordsInControlFlowStatements": true,
  "insertSpaceAfterFunctionKeywordForAnonymousFunctions": false,
  "insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis": false,
  "insertSpaceAfterOpeningAndBeforeClosingNonemptyBrackets": false,
  "insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": true,
  "insertSpaceAfterOpeningAndBeforeClosingTemplateStringBraces": false,
  "insertSpaceAfterOpeningAndBeforeClosingJsxExpressionBraces": false,
  "insertSpaceAfterTypeAssertion": false,
  "insertSpaceBeforeFunctionParenthesis": false,
  "insertSpaceBeforeTypeAnnotation": true,
  "placeOpenBraceOnNewLineForFunctions": false,
  "placeOpenBraceOnNewLineForControlBlocks": false
}

2nd. Read settings from tsconfig.json (tsconfig.json)

 {
  "compilerOptions": {
    "newLine": "LF"
  }
}

3rd. Read settings from .editorconfig (editorconfig)

 # EditorConfig is awesome: http://EditorConfig.org

# top-most EditorConfig file
root = true

# Unix-style newlines with a newline ending every file
[*]
indent_style = tab
tab_width = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

4th. Read settings from tslint.json (tslint)

 {
  "rules": {
    "indent": [true, 4],
    "whitespace": [true,
      "check-branch",
      "check-operator",
      "check-separator",
      "check-typecast"
    ]
  }
}

5th. Read settings from .vscode/settings.json (VisualStudio Code)

 {
  // Place your settings in this file to overwrite default and user settings.
  "typescript.format.enable": true,
  "typescript.format.insertSpaceAfterCommaDelimiter": true,
  "typescript.format.insertSpaceAfterSemicolonInForStatements": true,
  "typescript.format.insertSpaceBeforeAndAfterBinaryOperators": true,
  "typescript.format.insertSpaceAfterKeywordsInControlFlowStatements": true,
  "typescript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": false,
  "typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis": false,
  "typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBrackets": false,
  "typescript.format.insertSpaceAfterOpeningAndBeforeClosingTemplateStringBraces": false,
  "typescript.format.insertSpaceAfterOpeningAndBeforeClosingJsxExpressionBraces": false,
  "typescript.format.placeOpenBraceOnNewLineForFunctions": false,
  "typescript.format.placeOpenBraceOnNewLineForControlBlocks": false
}

Read Settings Rules

$ tree -a
.
├── .vscode
│   └── settings.json
├── foo
│   ├── bar
│   │   ├── .editorconfig
│   │   └── buzz.ts
│   ├── fuga
│   │   ├── piyo.ts
│   │   └── tsfmt.json
│   └── tsfmt.json
└── tslint.json

4 directories, 7 files
  1. exec $ tsfmt -r foo/bar/buzz.ts foo/fuga/piyo.ts
  2. for foo/bar/buzz.ts, read foo/tsfmt.json and foo/bar/.editorconfig and ./tslint.json and .vscode/settings.json
  3. for foo/fuga/piyo.ts, read foo/fuga/tsfmt.json and ./tslint.json and .vscode/settings.json

Change Log

See CHANGELOG

RELATED POST

10 Must-Know Windows Shortcuts That Will Save You Time

10 Must-Know Windows Shortcuts That Will Save You Time

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Navigating AWS Networking: Essential Hacks for Smooth Operation

Navigating AWS Networking: Essential Hacks for Smooth Operation

Achieving Stunning Visuals with Unity's Global Illumination

Achieving Stunning Visuals with Unity's Global Illumination

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code