全网最简单的方法实现代码格式化【2022-VScode】

滚石
3,492 阅读6分钟

前言

一直在研究各种*lint和代码格式化，网上看了很多文章，发现要么是互相抄袭，要么就是讲得不够通俗易懂，要么就是很久之前的教程了，(编辑器一直在更新迭代，很多配置已经缺乏了时效性！！)，于是乎决定出一篇适用于2022年的教程以最最简单的方式实现代码格式化。

明确本次讨论的范畴！！！

  • 编辑器 以2022年4月最新版本的 vscode 为例
  • 针对的是 vue 或者 react 脚手架生成的前端项目
  • 格式化的目标是standard标准或者接近该标准，可根据公司的严格程度不同弹性调整
  • 想要 在保存时，让编辑器自动帮你按预期的风格格式化代码
  • 你厌倦了各种插件的配置，因为插件之间还可能存在莫名其妙的冲突

等等！我知道你现在有许多疑惑！！！

  • 到底是谁来执行格式化这个操作？
  • 是编辑器？还是例如eslint等某个插件？
  • 格式化的时候到底是按照哪套规则执行的？
  • 如何根据自己的需要，去微调格式化的规则？
  • 各种格式化插件之间那些莫名其妙的冲突是怎么产生的？
  • 从网上复制了别人的settings.json代码为什么不生效？
  • 同时存在诸如eslint, prettier, vetur...时到底谁最终生效了？
  • ……

别着急！接下来，这些疑惑你都会解开！！！

准备插件

  • ESlint---主要作用【仅在这里】是对不符合规则的代码做出提示(波浪线)
  • Vetur---主要作用【仅在这里】是针对.vue文件的各个部分进行格式化的规则设置

ESLint.png

Vetur.png

只需要 eslint 和 vetur 两个插件进行配合！！！

剩下的事情，就交给 VScode 编辑器吧！！！ 顺带说一句，当前(2022年)版本的VScode已经很强大了，内置的格式化规则就非常接近prettier效果(JS部分接近standard标准)，对于绝大多数小公司来说，这套代码风格足够了！ 当然，你也可以根据需要，对这套编辑器自带的默认配置做弹性修改！！！

打开 VScode 编辑器，如下图步骤设置：

不用担心，接下来会给出一些说明！

JS规则选择.png

这一步主要是为了设置 .vue模板文件中 各个部分要遵循的格式化规则。注意：咱们在这里只利用 vetur 来处理 .vue 模板中的代码格式化，其他的诸如.js, .css, .scss, .less, jsx……文件中的代码格式化要遵循的规则都依照编辑器本身默认的规则(因为它在处理起来非常接近prettier的处理效果)。这样，我们就几乎不需要做什么设置了。

如果你还想微调一些设置：

接下来，直接上图！！

JS风格.png

微调CSS.png

特别需要注意的是： 如果打开js文件，想要将 4个空格的缩进，格式化成 2个空格的缩进，有的时候，一直不生效。那请你检查下面的选项：

关于缩进设置.png

等等！到目前为止，只是设置格式化要遵循的规则！！！

我们还没有开启格式化！ 到底怎么开启格式化？需要注意哪些问题？

开启 编辑器自带的格式化：

开启编辑器自带的格式化.png 关闭 eslint的格式化： 关闭eslint的格式化.png

这里需要注意的是：我们整个编辑器里应该只保留一个格式化工具！ 如果你同时开启了两个及以上的格式化工具，例如同时开启了编辑器默认的格式化和 eslint的格式化，那就会冲突！！！所以不要盲目安装一堆你不清楚用途及使用规则的插件！！！

不要直接修改settings.json文件！！！

很多C+V工程师(手动狗头)喜欢直接从网上找一段json设置复制到编辑器的settings.json文件中，这种做法往往得不到预期的效果！！因为网上教程里的设置缺乏时效性，很久之前的配置格式了，vscode都更新迭代N多次了，json对象的结构都不一定匹配了！！

正确的姿势是： 根据下图左侧的设置来生成右侧的settings.json文件！！

关于settings文件.png

还可以使用 eslint 提供的快速修复！！！

上面的格式化能覆盖90%以上的场景，这里我们还可以使用 eslint 提供的快速修复作为补充。
把鼠标移动到波浪线上： eslint的快速修复.png 点击快速修复如下： eslint格式化.png 选择最后一项 Fix all …… 这样该文件中所有的同类型的问题都修复了！
so easy!!! 妈妈再也不用担心我的代码格式化了！！！😀

可能会存在的一个小坑：

有的项目中会存在 .eslintignore文件，如果你稍不注意，会发现自己的eslint没生效，检查一下是否被该文件忽略了：

小坑.png 绝大多数情况下，都不应该出现这个文件。因为我们就是想利用 eslint来做代码检查校验的，如果忽略了还有什么意义呢？？？如果觉得校验规则太严苛，可以适当调整校验规则，这才是最佳实践！！！

关于微调的小技巧：

如果带有 波浪线，则说明该检查与 selint 有关应该去调整 eslintrc.js 文件中的规则。 如果该文件中，没有提示波浪线，但你发现它的格式确实有问题，那说明它与编辑器本身的格式化规则有关，则你应该去编辑器设置里去调整相关的规则。

总结：

  • 我们总共只安装了eslint 和 vetur 两个插件。前者提供校验提示，后者针对vue模板文件。
  • 我们没有去安装其他乱七八糟的插件，也没有额外添加许多配置文件。
  • 充分利用了 VScode 编辑器自带的格式化功能 及默认遵循的格式化规则。
  • 默认规则的微调，要去设置里，搜索 format关键词，然后去修改对应的规则。
  • 还可以使用 eslint 提供的快速修复。
  • eslint只对 JS | JSX ( TS | TSX)部分生效。
  • CSS | scss | Less | HTML部分的格式化是由编辑器根据内置规则来完成的。
  • 在 vue | react 项目中都适用。
  • 以前 prettier 插件的功能相当于被 VScode 编辑器内置化 实现了。
  • 校验 和 格式化 是两码事。前者侧重于提示，后者直接修改了你的源码！！！
  • 凡是格式化，必然要遵循一定的规则，搞清楚遵循了哪个规则，在哪里修改！！！

最后：这是首次尝试发帖，码字不易，希望各位大佬，多多鼓励！！！


作者：张延锋
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

avatar
文章
阅读
粉丝