目标

跨平台, 支持多编辑器, 文件无关, 统一个人编码风格, 尽量避免定制化设定.

编码风格分类

代码风格问题(风格不符合一定规则)

max-len no-mixed-spaces-and-tabs keyword-spacing comma-style

代码质量问题(使用方式有可能有问题)

no-unused-vars no-extra-bind no-implicit-globals prefer-promise-reject-errors

工具

editorconfig

EditorConfig helps maintain consistent coding styles for multiple developers working on the same project across various editors and IDEs. 适用 代码风格问题, 全平台支持, 语言无关. 支持大多数编辑器. 控制语法无关的风格, 详细可配列表见: https://editorconfig.org/#file-format-details

Prettier

An opinionated code formatter; Supports many languages; Integrates with most editors; Has few options 适用 代码风格问题, 主要是 Javascript/Node.js/Typescript 生态. 使用 prettier 配置文件声明风格, 编辑器保存时自动格式化文件; 示例: https://github.com/isayme/prettier-config/blob/master/prettier.config.js

ESLint

ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs. 主要适用 代码质量问题, 也适用代码风格问题, 主要面向 Javascript/Node.js/Typescript 生态.

对比

Prettier 与 editorconfig 功能有重叠, 两者差异是什么?

两者的适用范围有差异

editorconfig 适用任何文件, Prettier 主要适用 Javascript 生态; 比如 editorconfig 可以配置 Makefile 的缩进使用 TAB, 但 Prettier 不支持. 以这个角度看, 建议两者都使用, 可以将 Prettier 配置为 editorconfig 相同的风格;

editorconfig 声明面向编辑器, Prettier 声明面向插件

比如 editorconfig 设置indent_style = space 和 indent_size = 2, 编辑器中输入TAB时, 会缩进 2 个空格. 但如果 Prettier 设置 tabWidth = 4, 在使用文件报错自动格式化时, 会重新将缩进改为 4 个空格.

Prettier 在格式化时, 优先使用自身的配置, 降级使用 editorconfig 的配置

ESLint 与 Prettier 功能有重叠, 两者差异是什么?

两者适用范围有差异

ESLint 更多解决的是代码质量问题; Prettier 更多解决的是代码风格问题.

ESLint也可以格式化代码, 为什么还要用 prettier?

Prettier 官网对比: Prettier vs. Linters If eslint can auto fix/format code why to use Prettier?

官方网站

• EditorConfig
• Prettier
• ESLint

参考资料

EditorConfig，Prettier and ESLint Prettier看这一篇就行了 Setting up ESLint and prettier with VS Code in 2019 Using ESLint and Prettier in a TypeScript Project 搞懂 ESLint 和 Prettier 深入理解 ESLint vscode 中 prettier 和 ESLint 冲突的一点探讨 Comparison between tools that allow you to use ESLint and Prettier together