Skip to content

Formatting and quality

There are several tools to help improve the quality of code (and markdown).

There are overlaps between these tools, and so there are multiple places to configure the same behaviour. They all have their own way of storing their configuration.

EditorConfig

EditorConfig helps with sharing settings for tabs and spaces across multiple editors and IDEs. In VS Code, you need to install the EditorConfig extension for this.

Add a file .editorconfig to the root of a project to share settings for that project.

root = true

[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true

indent_style = space
indent_size = 2
trim_trailing_whitespace = true

[*.md] # (1)!
indent_size = 4
trim_trailing_whitespace = false
  1. Setting to make Markdown compatible with Obsidian's style

Linters

Linters look primarily at code quality: unused variables, naming conventions, logic errors. They are static analysers, working at compile time.

Each is installed in VS Code as an extension.

  • ESLint is the main one for TypeScript and JavaScript. It can also look at embedded code blocks in markdown documents.
  • Markdownlint is focused on Markdown files.

Prettier (formatter)

Linters can also format code, but a common practice is to separate these. The formatter enforces a consistent style by reformatting the code, while the linter mostly flags logic errors to be fixed by the user.

Prettier is a common choice as opinionated formatter. It supports JavaScript, TypeScript, and most "adjecent" technologies like HTML, JSON, and YAML. It also handles frameworks like Angular and Vue.

There is a Prettier extension for VS Code.

Tip for Obsidian

Obsidian can indent using tabs or spaces. Set this to spaces. Obsidian will use 4 spaces, and with the editor config above, so will VS Code. You can set Obsidian to visually use 2 spaces for indentation.