🌐 Ngôn ngữ

unplugin-check-syntax

Một plugin kiểm tra cú pháp đa năng, hỗ trợ nhiều công cụ xây dựng (Webpack, Vite, Rollup, esbuild, Rspack, v.v.), dùng để kiểm tra khả năng tương thích cú pháp ECMAScript trong các tệp JavaScript và HTML. Plugin này tham khảo từ rsbuild-plugin-check-syntax.

Tính năng

🔧 Hỗ trợ nhiều công cụ xây dựng: Hỗ trợ Webpack, Vite, Rollup, esbuild, Rspack, v.v.
📝 Nhiều loại tệp: Hỗ trợ tệp JavaScript và mã script nhúng trong tệp HTML
🎯 Định vị chính xác: Hỗ trợ sourcemap, có thể truy vết tới vị trí tệp nguồn
⚙️ Cấu hình linh hoạt: Hỗ trợ loại trừ tệp, bao gồm thủ công, lọc loại lỗi, v.v.
📁 Phát hiện tệp thông minh: Hỗ trợ chế độ glob để thêm thủ công các tệp JS/HTML bổ sung
🌐 Tích hợp Browserslist: Hỗ trợ cấu hình browserslist để tự động chuyển đổi sang phiên bản ECMAScript

Cài đặt

npm install @winner-fed/unplugin-check-syntax --save-dev

Cách sử dụng

Vite

// vite.config.ts
import { defineConfig } from 'vite'
import checkSyntax from '@winner-fed/unplugin-check-syntax/vite'export default defineConfig({
  plugins: [
    checkSyntax({
      targets: ['> 1%', 'last 2 versions'],
      // 或者直接指定 ECMAScript 版本
      // ecmaVersion: 'es2015'
    }),
  ],
})

Webpack

// webpack.config.js
const checkSyntax = require('@winner-fed/unplugin-check-syntax/webpack')module.exports = {
  plugins: [
    checkSyntax({
      targets: ['> 1%', 'last 2 versions'],
    }),
  ],
}

Rollup

Tổng hợp

// rollup.config.js
import checkSyntax from '@winner-fed/unplugin-check-syntax/rollup'export default {
  plugins: [
    checkSyntax({
      targets: ['> 1%', 'last 2 versions'],
    }),
  ],
}

esbuild

// esbuild.config.js
const { build } = require('esbuild')
const checkSyntax = require('@winner-fed/unplugin-check-syntax/esbuild')build({
  plugins: [
    checkSyntax({
      targets: ['> 1%', 'last 2 versions'],
    }),
  ],
})

Rspack

// rspack.config.js
const checkSyntax = require('@winner-fed/unplugin-check-syntax/rspack')module.exports = {
  plugins: [
    checkSyntax({
      targets: ['> 1%', 'last 2 versions'],
    }),
  ],
}

Tùy chọn cấu hình

interface CheckSyntaxOptions {
  /
   目标浏览器范围，使用 browserslist 格式
   */
  targets?: string[];
  
  /
   直接指定 ECMAScript 版本（优先级高于 targets）
   */
  ecmaVersion?: 'es3' | 'es5' | 'es2015' | 'es2016' | 'es2017' | 'es2018' | 'es2019' | 'es2020' | 'es2021' | 'es2022' | 'latest';
  
  /
   排除源文件检查，支持正则表达式
   */
  exclude?: RegExp | RegExp[];
  
  /
   排除输出文件检查，支持正则表达式  
   */
  excludeOutput?: RegExp | RegExp[];
  
  /
   手动包含额外的 JS 或 HTML 文件进行语法检查
   支持文件路径（相对于项目根目录）或 glob 模式
   */
  include?: string[];
  
  /
   排除特定的错误日志类型
   */
  excludeErrorLogs?: ('source' | 'output' | 'reason' | 'code')[];
}

Sử dụng ví dụ

Cấu hình cơ bản

// 使用 browserslist 配置
checkSyntax({
  targets: ['> 1%', 'last 2 versions', 'not dead'],
})// 直接指定 ECMAScript 版本
checkSyntax({
  ecmaVersion: 'es2015',
})

Loại trừ tệp tin

checkSyntax({
  targets: ['> 1%', 'last 2 versions'],
  // 排除 node_modules 和测试文件
  exclude: [/node_modules/, /\.test\.js$/],
  // 排除特定输出文件
  excludeOutput: [/vendor\.js$/],
})

Bao gồm tệp bổ sung

checkSyntax({
  targets: ['> 1%', 'last 2 versions'],
  // 手动包含额外的文件进行检查
  include: [
    'src/legacy//*.js',        // 包含 legacy 目录下的所有 JS 文件
    'public/scripts/app.js',     // 包含特定的公共脚本文件
    'docs//*.html',            // 包含文档中的 HTML 文件
    '/absolute/path/to/file.js'  // 支持绝对路径
  ],
})

Xuất lỗi tùy chỉnh

checkSyntax({
  targets: ['> 1%', 'last 2 versions'],
  // 只显示错误原因，不显示代码片段
  excludeErrorLogs: ['code', 'output'],
})

Hướng dẫn di chuyển

Nếu bạn đang chuyển từ @rsbuild/plugin-check-syntax:

- import { pluginCheckSyntax } from '@rsbuild/plugin-check-syntax'
+ import checkSyntax from '@winner-fed/unplugin-check-syntax/vite' // 或其他构建工具
export default defineConfig({
  plugins: [
  pluginCheckSyntax({
+   checkSyntax({
      targets: ['> 1%', 'last 2 versions'],
    }),
  ],
})

Nguyên lý hoạt động

Kiểm tra sau khi xây dựng: Plugin kiểm tra tệp đầu ra sau khi xây dựng hoàn tất
Phân tích cú pháp: Sử dụng trình phân tích Acorn để kiểm tra cú pháp JavaScript
Xác minh tương thích: Xác minh tính tương thích cú pháp dựa trên phiên bản ECMAScript đã cấu hình
Báo cáo lỗi: Cung cấp thông tin lỗi chi tiết, bao gồm vị trí tệp và đoạn mã nguồn
Hỗ trợ Sourcemap: Nếu có sourcemap, sẽ truy vết về tệp nguồn gốc ban đầu

Giấy phép

Giấy phép MIT

Đóng góp

Hoan nghênh gửi Issue và Pull Request!

--- Tranlated By Open Ai Tx | Last indexed: 2025-07-21 ---