Skip to content

01.ESLint, Prettier and EditorConfig

Objective

To add a newline at the end of each file.

  • Text editor: Vim 9.1, Neovim 0.10, and VS Code
  • Project root: D:\VitePress5\
  • 配置文件: D:\VitePress5\.editorconfig
# Config is awesome: https://editorconfig.org

# top-most EditorConfig file
root = true

# Unix-style newlines with a newline ending every file
[*]
charset = utf-8
end_of_line = lf # control the newline type (lf | cr | crlf)
insert_final_newline = true
trim_trailing_whitespce = true

[*.md]
trim_trailing_whitespce = false

Vim

Once you have created the .editorconfig file created in place, Vim 9.1 will work automatically without any plugins.

The newline is already there, although you don't see it in the Vim editor.

What if there is no .editorconfig file in place, will it still work?

Yes, it still works, at least for Markdown files.

Test with a file that its folder and parent folders do not contain any .editorconfig files, and if you delete the last newline with other editors like VS Code or Typora, reopen it with Vim and markdownlint within Vim will alert a message:

MD047/single-trailing-newline: Files should end with a single newline character

VS Code

With VS Code, a plugin EditorConfig for VS Code is required. Install the plugin, and VS Code will use .editorconfig under the project root.

What they do

Our three tools all have similar objectives:

  • make code more consistent in itself and across team members
  • detect problematic code patterns that could lead to potential bugs

ESLint is by far the most popular JavaScript linter. It statically analyzes your code to help you detect formatting issues and find code inconsistencies.

Prettier, while similar to ESLint by formatting your code, does not check your code quality. It just serves as a code formatter. It does this job pretty well though by natively supporting JavaScript but also JSX, Flow, TypeScript, HTML, JSON, CSS and many more languages.

What is EditorConfig?

EditorConfig helps maintain consistent coding styles for multiple developers working on the same project across various editors and IDEs. The EditorConfig project consists of a file format for defining coding styles and a collection of text editor plugins that enable editors to read the file format and adhere to defined styles. EditorConfig files are easily readable and they work nicely with version control systems.

EditorConfig, on the other hand, does not lint or format your code. It merely defines a standard code formatting style guide among all the IDEs and editors used within a team of developers. For instance, if a team uses two main editors such as Sublime Text and Visual Studio Code, EditorConfig allows them to define a common indentation pattern (spaces or tabs) within a single file.

冲突和优先级