ESLint V9 + Prettier + simple-git-hooks + lint-staged + editorconfig

本来设置了一套，后面直接copy。但是发现在没加过这些的老项目中，比如微信小程序js代码，再从头设置有点忘了，所以简单总结下。

前言

• stylelint
• eslint
• prettier
• simple-git-hooks
• lint-staged

以上这些工具配置，感觉够用了，此外像什么 commitlint 这些，感觉用处不大，就不配置了。 husky 功能强大，不过配置有点点复杂，用到再配置。

EditorConfig

先设置这个，这个比较简单，直接在项目根目录下添加 .editorconfig 文件就好了。

          root = true

[*]
indent_size = 2
end_of_line = lf
insert_final_newline = true

        

ESLint

安装：

          # eslint 是核心，@eslint/js 是格式化 js 的，eslint-config-prettier 是 prettier 的 eslint 配置，后面会用到
npm install --save-dev eslint @eslint/js eslint-config-prettier

        

配置文件：

一般客户端系统都是 ESM 模块，所以需要配置 package.json 的 type 为 module。 不过之前的代码有一些是 CommonJS 模块，所以这里不配置 package.json 了，直接使用 .cjs 文件。

• ignores 忽略文件
• 使用 @eslint/js 对 js 预设的规则
• 使用 prettier 的插件规则

          const js = require('@eslint/js');
const prettier = require('eslint-config-prettier');

module.exports = [
  {
    ignores: [
      '**/miniprogram_npm/**',
      '**/node_modules/**',
      '**/dist/**',
      '**/lib/**',
      '**/.vscode/**'
    ]
  },
  {
    ...js.configs.recommended,
    files: ['**/*.{js,jsx,ts,tsx}'],
    rules: {
      'no-console': 'error',
      'no-unused-vars': 'warn',
    },
  },
  prettier,
];

        

package.json 中添加：

          "scripts": {
  "lint": "eslint .",
  "lint:fix": "eslint . --fix",
}

        

使用：

可以直接执行命令：

          npx eslint .

        

也可以在 js 文件中使用，敲下 console.log('hello'); ，看看会不会报红。

tips

不知道 eslint 生效没有，可以在 vscode 中，按下 Ctrl + Shift + P ，输入 Restart ESLint Server ，重启 vscode 的 eslint 服务。 打开一个 js 文件，在 vscode 的右下角，文本的类型那里，点击会有 popup ，可以看到 eslint 服务的状态，如果启动错误，查看日志 Open ESLint Output。

Prettier

安装：

          # 这里只需要安装 prettier 就好了，跟 eslint 集成的 eslint-config-prettier 插件，刚才上一步安装好了。当然可以再安装一次。
# npm install --save-dev eslint-config-prettier
npm install --save-dev prettier

        

配置文件：

因为上一步跟 eslint 集成了，所以这里只需要配置 prettier 的配置就好了。

          module.exports = {
  semi: true,           // 语句末尾使用分号
  singleQuote: true,    // 使用单引号
  trailingComma: 'es5', // 多行时尾随逗号
  tabWidth: 2,          // 缩进空格数
  printWidth: 100,      // 每行最大长度
};

        

使用：

这里需要对vscode 的 settings.json 进行配置，让其文件的格式化方式都使用 prettier：

          {
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

        

0. 准备一个不合适的格式，对一个 js 文件，写一个 function ，都在一行。
1. 可以使用 vscode 的默认快捷键 Ctrl + Shift + P ，输入 Format Document ，格式化文件了。
2. 可以在文件中，右键点击，然后选中 格式化文档 ，格式化文件了。
3. 配置 onSave 的时候自动保存，需要在 vscode 的 settings.json 中添加 editor.formatOnSave 为 true。
4. 执行对整个项目的 prettier 格式化，使用 npx prettier . 。

vscode 保存文件自动 prettier 格式化：

          {
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

        

对整个项目执行 prettier 格式化：

          npx prettier . --write

        

simple-git-hooks 和 lint-staged

这两个配合使用，simple-git-hooks 是 git 的钩子，能触发事件。lint-staged 顾名思义，就是 lint 暂存区（staged）的文件。 那合起来用，就可以提交代码的时候，对 staged 的文件格式化代码。

安装：

          npm install --save-dev simple-git-hooks lint-staged

        

配置：

          {
  "scripts": {
    "postinstall": "npx simple-git-hooks",
  },
  "simple-git-hooks": {
    "pre-commit": "npx lint-staged"
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{json,css,less,scss,md,yaml,yml}": [
      "prettier --write"
    ]
  }
}

        

上面就配置好了，可以提交代码，看看效果。

postinstall 是 npm 的钩子，在安装依赖后的时候执行。

npm 的钩子语法： <生命周期阶段> pre<生命周期阶段> post<生命周期阶段>