2024-02-07发表10 分钟读完 (大约1573个字)

代码规范

eslint

通过配置.eslintrc.*指定团队代码规范。在编码过程中，对于不规范的代码能够进行提示，帮助开发者更正代码。同时，提供 auto-fix 能力。
auto-fix 能够修复的问题比较有限，无法修复较大变动的规范问题，如：单行不能超过 80 个字符。

prettier

prettier 是什么？

prettier 能根据.eslintrc.*的约定，自动格式化代码。具有比 eslint auto-fix 更加强大的代码修复能力。

配置 prettier 的几种方式：

可以使用 vscode settings.json、prettier 配置文件或.editorconfig 文件。VSCode settings.json 是用来作为备用的，通常只用于非项目文件，不能用于 prettier CLI。建议你总是在项目中包含一个 prettier 配置文件，这将确保无论你以何种方式运行 prettier（通过 prettier-vscode 插件 or prettier CLI [prettier –single-quote ]），都将应用同样的格式化选项。
推荐使用 prettier 配置文件来设置格式化选项。如果你想将 prettier 的格式化选项应用于整个项目，只需在项目根目录下添加一个 prettier 配置文件即可。

配置 prettier

所有的 prettier 配置项都可以直接在 settings.json 中配置，这些配置的默认值始终是 prettier 2.0 的默认值。

一般我们需要npm install prettier进行安装，再进行使用，这里先不介绍如何使用，主要介绍下在 vs code 中的使用。

在 vs code 中使用 prettier

在 vs code 应用商店安装 prettier 插件

pic.1708325653485

配置插件.prettierrc

module.exports = {
  printWidth: 80, //一行的字符数，如果超过会进行换行，默认为80
  tabWidth: 2, //一个tab代表几个空格数，默认为2
  useTabs: false, //是否使用tab进行缩进，默认为false，表示用空格进行缩减
  singleQuote: false, //字符串是否使用单引号，默认为false，使用双引号
  semi: true, //行位是否使用分号，默认为true
  trailingComma: 'none', //是否使用尾逗号，有三个可选值"<none|es5|all>"
  bracketSpacing: true, //对象大括号直接是否有空格，默认为true，效果：{ foo: bar }
  parser: 'babylon', //代码的解析引擎，默认为babylon，与babel相同。
};

eslint 与 prettier

区别：

eslint 主要解决代码质量问题。代码风格问题并没有完全做完。而 Prettier 认为代码风格更重要，所以格式问题由 Prettier 处理。
但是 Prettier 的处理结果可能 eslint 不会完全满意，但绝对不丑，而且给予了部分配置项，可以通过.prettierrc文件修改。

冲突:

因为 eslint 和 prettier 一起使用会有冲突。可以通过eslint-config-prettier 这个插件解决。

eslint-config-prettier：用 prettier 的规则，覆盖掉 eslint:recommended 的部分规则。因此不会有冲突。
eslint-plugin-prettier：将 prettier 的能力集成到 eslint。按照 prettier 的规则检查代码规范性，并进行修复。

.editorconfig

开发者使用不同编辑器或系统时，将.editorconfig文件保存到项目根目录下，即可让项目下所有文件都统一编辑器代码风格。
这个文件会覆盖编辑器的默认配置。
https://www.cnblogs.com/lwming/p/15270816.html

# http://editorconfig.org
root = true

[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
max_line_length = 80
trim_trailing_whitespace = true

[*.md]
max_line_length = 0
trim_trailing_whitespace = false

vscode settings.json

settings.json 文件是 VS Code 众多“配置文件”中的一个，用来控制诸多工作项的配置。
按快捷键【Ctrl】+【,】，打开 VS Code 的设置界面，
pic.1708325666467
可以看到设置内容有“用户” “工作区”两个分支，它们其实就分别对应了两个不同位置的 settings.json 文件，前者位于与用户相关联的特定文件夹中，后者就会位于你当前打开的文件夹的.vscode 子目录下。这两个 settings.json 文件其实都只会包含你修改过的设置项，而软件的全局默认设置则记录在软件安装目录中的某个位置，用户是不必理会的。
pic.1708325675886
这些配置文件具有工作区>用户>全局默认的优先级，也就是前面的配置覆盖后面的，这样做的好处是你可以为不同工作区、不同用户做不同配置，而不会互相干扰。而当你不小心在某个工作区做了错误的配置导致软件不能正常工作时，只需删除相应的设置项，或者 settings.json 文件，即可恢复到用户配置或默认配置。

// 工作区分支 .vscode/setting.json

{
  "prettier.printWidth": 100,
  "editor.formatOnSave": true,
  // 一个制表符等于的空格数。
  "editor.tabSize": 2,
  "editor.fontSize": 13
}

以“prettier”开头的配置项可以放在.prettierrc 文件中

总结

对于 vscode 配置，setting.json 文件只会包含你「手动添加」过的设置项，在「设置页面中勾选」和「手动添加」设置项的效果是一致的。为了保持多项目使用同一份配置，建议将需要的配置『手动添加』到工作区分支的 setting.json 文件中，后续只需拷贝 setting.json 文件即可。

参考
https://its401.com/article/yexudengzhidao/113249805
prettier: https://juejin.cn/post/6914549928131821576

Q&A

修改了.gitignore 文件但无效？
如果在开发的过程中添加或者修改了.gitignore 文件，那么它可能不会生效，因为一些需要忽略的文件已经加入了 git 的追踪列表中，可以通过清除 git 缓存来使新的.gitignore 生效。方法如下：
:::info
第一步：cd 到项目目录
第二步：git rm -r –cached .
第三步：git add .
第四步：git commit -m ‘update .gitignore’
:::

#项目场景