加点配置文件 | Day 2

在一个现代前端 Monorepo 的总包目录下，通常会包含一些说明和配置文件。对于不同的项目，这些文件会有些许差别。

本系列文章所涉及到的文件如下：

• .editorconfig
• .gitignore
• LICENSE
• eslint.config.js
• .vscode/settings.json

.editorconfig

.editorconfig 文件是一种用于定义代码风格统一规范的配置文件。它可以帮助开发者在不同的编辑器和 IDE 中保持一致的代码格式。

此文件位于项目的根目录下，本系列文章项目的配置和解释如下：

root = true  # 表明该文件所在的目录为根目录

[*]
charset = utf-8  # 文档编码格式为 utf-8
indent_style = space  # 缩进格式为空格
indent_size = 2  # 缩进大小为两个空格
end_of_line = unset  # 行尾符格式，未设定，根据系统自动匹配
insert_final_newline = true  # 文件末尾插入新的空行
trim_trailing_whitespace = true  # 清除行结尾多余空格

.gitignore

.gitignore 文件的作用是指定 Git 版本控制系统忽略哪些文件和目录，使其不被纳入版本控制管理。

一般情况下，项目中不需要将诸如 node_modules、dist 等目录或文件纳入版本管理。因此，可以将其路径写入 .gitignore ：

node_modules
dist

参考 vite 官方模板的 .gitignore 并结合本系列文章项目实际，如下：

# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local

# Editor directories and files
.vscode/*
!.vscode/settings.json
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

LICENSE

LICENSE 文件用来放置当前仓库的开源协议的文本内容，本系列文章的代码使用 MIT 。

同时，也可以在 package.json 文件中指明本 npm 包采用何种开源协议：

{
    ...,
    license: "MIT"
}

eslint.config.js 和 .vscode/settings.json

ESLint 是一个用于识别和报告 JavaScript 代码中模式的工具。它的目标是帮助开发者识别和修复代码中的问题，以提高代码的质量和可维护性。

它是通过项目根目录下的 eslint.config.js 进行配置的，可以根据官方的配置规则进行自定义配置，或者使用一些配置预设工具。

本系列文章使用的是 @antfu 大佬的一个 EsLint 配置预设工具 @antfu/eslint-config 。

配合 EsLint 的 VSCode 插件和预设的编辑器配置，可以做到在文件保存时和在 git commit 之前进行代码的检查和格式化。

首先，在项目总包下安装 eslint 和 @antfu/eslint-config ：

pnpm add -w -D eslint @antfu/eslint-config

安装完成后，在 eslint.config.js 中加入如下配置：

import antfu from '@antfu/eslint-config'

export default antfu()

接着，在总包 package.json 的 scripts 中注册命令，如下：

{
    //...,
    scripts: {
        // 检查当前目录下的文件
        "lint": "eslint",
        // 检查文件并修复可自动修复的格式
        "lint:fix": "eslint --fix"
    }
}

至此，就可以通过 pnpm lint 和 pnpm lint:fix 来执行对 JavaScript 相关的文件的检查和修复操作。

配合 VSCode 的配置，可以实现在文件保存时，进行检查和自动修复，这需要在 .vscode/settings.json 中加入如下配置：

{
  // Disable the default formatter, use eslint instead
  "prettier.enable": false,
  "editor.formatOnSave": false,
  // Auto fix
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "never"
  },
  // Silent the stylistic rules in you IDE, but still auto fix them
  "eslint.rules.customizations": [
    {
      "rule": "style/*",
      "severity": "off",
      "fixable": true
    },
    {
      "rule": "format/*",
      "severity": "off",
      "fixable": true
    },
    {
      "rule": "*-indent",
      "severity": "off",
      "fixable": true
    },
    {
      "rule": "*-spacing",
      "severity": "off",
      "fixable": true
    },
    {
      "rule": "*-spaces",
      "severity": "off",
      "fixable": true
    },
    {
      "rule": "*-order",
      "severity": "off",
      "fixable": true
    },
    {
      "rule": "*-dangle",
      "severity": "off",
      "fixable": true
    },
    {
      "rule": "*-newline",
      "severity": "off",
      "fixable": true
    },
    {
      "rule": "*quotes",
      "severity": "off",
      "fixable": true
    },
    {
      "rule": "*semi",
      "severity": "off",
      "fixable": true
    }
  ],
  // Enable eslint for all supported languages
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue",
    "html",
    "markdown",
    "json",
    "jsonc",
    "yaml",
    "toml",
    "xml",
    "gql",
    "graphql",
    "astro",
    "svelte",
    "css",
    "less",
    "scss",
    "pcss",
    "postcss"
  ]
}

保存后需要重启 IDE，以使该配置生效。

同时，也可以通过工具 lint-staged 和 simple-git-hooks 来实现在提交代码前的代码检查和修复。

首先，在 package.json 中配置一个 npm scritps hook，并且对上述两库的行为进行配置 :

{
    // ...,
    "scripts": {
        // 在安装依赖后执行 simple-git-hooks 的初始化
        "postinstall": "simple-git-hooks"
    },
    "simple-git-hooks": {
        // 在提交之前执行
        "pre-commit": "pnpm lint-staged"
    },
    "lint-staged": {
        // 对所有有更改的文件进行检查和格式修复
        "*": "eslint --fix"
    }
}

然后，安装两个库：

pnpm add -w -D lint-staged simple-git-hooks

这样，我们在提交之前，有更改的文件会被检查，以确保提交代码的语法和格式的正确性。

源码

完整仓库

本文相关 commit