oxlint代码检查工具

• Oxlint

  • 是一款基于 Rust 开发的 JavaScript/TypeScript 代码检查工具（Linter），由尤雨溪创立的 Void(0) 公司旗下的 ​OXC(Rust重构工具) 工具链项目推出。
  • 官方说法： 现阶段，oxlint 并不打算完全取代 ESLint；当 ESLint 的缓慢成为工作流程中的瓶颈时，它可以作为增强功能。
  • 聚焦 代码错误检测
  • 兼容性： 支持 .eslintignore 和 ESLint comment disabling。适用于大多数为 ESLint 设计的配置和插件。
  • 使用方便： 开箱即用的零配置；甚至 Node.js 也不是必需的。大多数调整可以通过命令行进行，并且从 ESLint 配置文件读取当前正在进行中。
  • 快速： Oxlint 大约比 ESLint 快 50 ~ 100 倍。 （OXC工具链，会通过Rust逐步重构替换传统前端项目）

• ESLint

  • 老牌代码检查工具
  • 主要功能是对项目代码做代码错误检测和代码风格的格式化

Oxlint + ESLint = 高速度 + 强检查的代码格式化

1.安装依赖

• prettier : 代码格式化工具
• eslint-plugin-prettier : ESLint 插件，它可以将 Pretier 的格式化规则集成到 ESLint 中，从而使 ESLint 可以检查代码风格和格式，并自动修复不符合规则的代码。
• eslint-plugin-oxlint : 用于关闭 ESLint 中已由 oxlint 支持的规则的插件, 开发者可以确保在项目中只运行必要的 lint 规则，从而提高开发效率。

npm i oxlint prettier eslint-plugin-oxlint eslint-plugin-prettier -D

2.安装ESLint

建议新项目使用 v21.1.0 版本以上的 node

npm init @eslint/config@latest

根据命令行提示，选择

执行完后会在根目录下自动创建eslint.config.mjs配置文件，以及对应依赖包

3.配置eslint.config.mjs

vue 项目示例，直接替换下面代码

// eslint.config.mjs

import path from 'path'
import globals from 'globals'
import pluginJs from '@eslint/js'
import pluginVue from 'eslint-plugin-vue'
import VueEslintParser from 'vue-eslint-parser'
import prettier from 'eslint-plugin-prettier'
import oxlint from 'eslint-plugin-oxlint'
import { FlatCompat } from '@eslint/eslintrc'
import { fileURLToPath } from 'url'

const __filename = fileURLToPath(import.meta.url)
const __dirname = path.dirname(__filename)

const compat = new FlatCompat({
  baseDirectory: __dirname
})

/** @type {import('eslint').Linter.Config[]} */
export default [
  {
    files: ['**/*.{js,mjs,cjs,vue}']
  },
  {
    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.node
      },
      parser: VueEslintParser
    }
  },
  /** js推荐配置 */
  pluginJs.configs.recommended,
  /** vue推荐配置 */
  ...pluginVue.configs['flat/essential'],
  /** 继承自动导入配置 */
  // ...compat.extends('./.eslintrc-auto-import.json'),
  /** oxlint推荐配置 */
  oxlint.configs['flat/recommended'],
  /** 自定义eslint配置 */
  {
    rules: {
      // 'no-var': 'error', // 要求使用 let 或 const 而不是 var
      'no-multiple-empty-lines': ['warn', { max: 4 }], // 允许空行数
      'no-unexpected-multiline': 'error', // 禁止空余的多行
      'no-useless-escape': 'off', // 禁止不必要的转义字符

      'vue/multi-word-component-names': 0
    }
  },
  /**
   * prettier 配置
   * 会合并根目录下的prettier.config.js 文件
   * @see https://prettier.io/docs/en/options
   * https://github.com/prettier/eslint-plugin-prettier/issues/634
   */
  {
    plugins: {
      prettier
    },
    rules: {
      ...prettier.configs.recommended.rules
    }
  },
  // 忽略文件
  {
    ignores: [
      '**/dist',
      './src/main.ts',
      '.vscode',
      '.idea',
      '*.sh',
      '**/node_modules',
      '*.md',
      '*.woff',
      '*.woff',
      '*.ttf',
      'yarn.lock',
      'package-lock.json',
      '/public',
      '/docs',
      '**/output',
      '.husky',
      '.local',
      '/bin',
      'Dockerfile'
    ]
  }
]

4.配置prettier.config.js

根目录创建 prettier.config.js

export default {
  // 一行的字符数，如果超过会进行换行，默认为80，官方建议设100-120其中一个数
  printWidth: 100,
  // 一个tab代表几个空格数，默认就是2
  tabWidth: 2,
  // 启用tab取代空格符缩进，默认为false
  useTabs: false,
  // 行尾是否使用分号，默认为true(添加理由:更加容易复制添加数据,不用去管理尾行)
  semi: false,
  vueIndentScriptAndStyle: true,
  // 字符串是否使用单引号，默认为false，即使用双引号，建议设true，即单引号
  singleQuote: true,
  // 给对象里的属性名是否要加上引号，默认为as-needed，即根据需要决定，如果不加引号会报错则加，否则不加
  quoteProps: 'as-needed',
  // 是否使用尾逗号，有三个可选值"<none|es5|all>"
  trailingComma: 'none',
  // 在jsx里是否使用单引号，你看着办
  jsxSingleQuote: true,
  // 对象大括号直接是否有空格，默认为true，效果：{ foo: bar }
  bracketSpacing: true,
  proseWrap: 'never',
  htmlWhitespaceSensitivity: 'strict',
  endOfLine: 'auto'
}

5. 配置.editorconfig

.editorconfig 是一个用于统一代码风格的配置文件，它可以被多个编辑器和IDE识别和应用。通过在项目中添加一个名为 .editorconfig 的文件，可以确保团队成员在不同的编辑器中编写代码时遵循相同的代码风格和规范。

# 顶层editorconfig文件标识
root = true

########## 针对所有文件适用的规则 ##########
[*]
# 编码格式
charset = utf-8
# 缩进符使用的风格 （tab ｜ space）
indent_style = space
# 缩进大小
indent_size = 2
# 控制换行类型(lf | cr | crlf)
end_of_line = lf
# 文件最后添加空行
insert_final_newline = true
# 行开始是不是清除空格
trim_trailing_whitespace = true

############# 针对md的规则 ###############
[*.md]
trim_trailing_whitespace = false

6.配置package.json文件

"scripts": {
  "lint": "oxlint && eslint", 
  "lint:fix": "oxlint --fix && eslint --fix"
},

• 执行代码检查，默认不修改代码

npm run lint

• 直接修改代码并修复问题

npm run lint:fix