ESLint, Prettier & Beautify: VSCode Formatting

VSCode 代码自动格式化使用的主流插件是 ESLint，Prettier 和 Beautify。其中 ESLint 需要通过 Terminal 安装，后面两个是 VSCode 的插件，三个插件互相配合可以对代码排版起到事半功倍的效果。

最近使用 VSCode 的时候我遇到了格式上的问题，即代码自动格式化之后换行较多，导致代码看起来不够清爽。于是研究了一下这三个插件的设置。

首先通过npm i -g eslint安装 ESLint，之后在settings.json文件中配置如下的设置：

{
  "eslint.autoFixOnSave": true,
  "files.eol": "\n"
}

在 VSCode 应用市场安装后做如下配置:

{
  "prettier.eslintIntegration": true,
  "editor.formatOnSave": true
}

同样是在 VSCode 应用市场安装后做如下配置:

{
  "beautify.language": {
    "html": ["html", "php", "erb"],
    "css": [],
    "js": []
  }
}

—

但是到这里还没有结束。试了一下还是会出现很多不必要自动换行，主要是 HTML 标签。所以这里还需要对 HTML 进行 unformatted 的设置。

//设置不需要自动格式化的html标签类型
 "html.format.unformatted": "pre,code,textarea,li",

 //或者直接禁用所有对html的格式化
 "html.format.enable": false

到这里整体代码可以自动换行，但不会过于破碎影响阅读。

—

编译器 UI 的美观程度也是影响工作的重要因素。日常使用 VSCode 的时候，还可以配合使用一些小工具：

—